overflow-x:hidden still can scroll

I had this exact same problem. I solved it by putting overflow-x: hidden; on both the body and html. html, body { margin: 0 auto; overflow-x: hidden; } html{ padding: 0; } body { width: 950px; } .full { background: red; color: white; margin-right: -3000px !important; margin-left: -3000px !important; padding-right: 3000px !important; padding-left: 3000px !important; …

Read more

CSS: max-width for @media query not working

Have you tried adding the viewport in? <meta name=”viewport” content=”width=device-width, initial-scale=1″> Working JSFiddle Viewport is used when rendering responsive pages and is therefore mostly used when dealing with mobile websites, but when dealing with media queries it helps tell the CSS what the actual device-width is.

How can I transition height: 0; to height: auto; using CSS?

Use max-height in the transition and not height. And set a value on max-height to something bigger than your box will ever get. See JSFiddle demo provided by Chris Jordan in another answer here. #menu #list { max-height: 0; transition: max-height 0.15s ease-out; overflow: hidden; background: #d5d5d5; } #menu:hover #list { max-height: 500px; transition: max-height …

Read more

Flask css not updating [closed]

Problem is, as already said, related to browser cache. To solve that, you could add some dynamic variable to your static (css, js) links. I prefer last modified timestamp for each file. /static/css/style.css?q=1280549780 Here is a snippet for that: http://flask.pocoo.org/snippets/40/ @app.context_processor def override_url_for(): return dict(url_for=dated_url_for) def dated_url_for(endpoint, **values): if endpoint == ‘static’: filename = values.get(‘filename’, …

Read more

Flexbox: flex-start/flex-end, self-start/self-end, and start/end; What’s the difference?

The values flex-end and flex-start (among others) were created for use with flex layout. However, the W3C has been developing the Box Alignment Module, which establishes a common set of alignment properties and values for use across multiple box models, including flex, grid, table and block. So what you’re seeing are the newer values that …

Read more

A grid layout with responsive squares

The padding-bottom trick is the most used to accomplish that. You can combine it with both Flexbox and CSS Grid, and since using percent for margin/padding gives inconsistent result for flex/grid items (on older browser versions, see edit note below), one can add an extra wrapper, or like here, using a pseudo, so the element …

Read more

JavaScript – adding style to the text of console log [duplicate]

Addy Osmani has a good explanation: https://plus.google.com/+AddyOsmani/posts/TanDFKEN9Kn (archive.org) Styled console logging in the Chrome DevTools (Canary) Thanks to Mr. +Mike West, you can now add style to your console log via %c, just like you can in Firebug. e.g console.log(“%cBlue!”, “color: blue;”); Blocks such as console.log(‘%cBlue! %cRed!’, ‘color: blue;’, ‘color: red;’); are also now supported …

Read more