This is a popular Bootstrap question, so I’ve updated and expanded the answer for Bootstrap 3, Bootstrap 4 and Bootstrap 5… Bootstrap 5 (update 2021) Bootstrap columns still use flexbox, but the card-columns previously used to create a Masonry like layout have been removed. For Bootstrap 5 the recommended method is to use the Masonry … Read more
CSS will skip over style declarations it doesn’t understand. Mozilla-based browsers will not understand -webkit-prefixed declarations, and WebKit-based browsers will not understand -moz-prefixed declarations. Because of this, we can simply declare width twice: elem { width: 100%; width: -moz-available; /* WebKit-based browsers will ignore this. */ width: -webkit-fill-available; /* Mozilla-based browsers will ignore this. */ … Read more
Do I need to double the size of the .box div to 400px by 400px to match the new high res background image No, but you do need to set the background-size property to match the original dimensions: @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .box{ background:url(‘images/box-bg@2x.png’) no-repeat top left; background-size: 200px 200px; } } EDIT … Read more
The @media query specifically for ‘phones’ is.. @media (max-width: 480px) { … } But, you may want to remove the padding/margin for any smaller screen sizes. By default, Bootstrap adjusts margins/padding to the body, container and navbars at 978px. Here are some queries that have worked (in most cases) for me: @media (max-width: 978px) { … Read more
Go to http://getbootstrap.com/customize/ and toggle just what you want from the BS3 framework and then click “Compile and Download” and you’ll get the CSS and JS that you chose. Open up the CSS and remove all but the grid. They include some normalize stuff too. And you’ll need to adjust all the styles on your … Read more
The viewBox isn’t the height of the container, it’s the size of your drawing. Define your viewBox to be 100 units in width, then define your rect to be 10 units. After that, however large you scale the SVG, the rect will be 10% the width of the image.
The image has a property currentSrc, you can log it or inspect it with several tools: In chrome developer tools inspect the element, then click the properties tab. In Firefox developer tools inspect the element, right click and select DOM from the context menu. You will see an entry for currentSrc: with the actual image … Read more
You are probably missing the viewport meta tag in the html head: <meta name=”viewport” content=”width=device-width, initial-scale=1″> Without it the device assumes and sets the viewport to full size. More info here.
Another useful media feature is device-aspect-ratio. Note that the iPhone 5 does not have a 16:9 aspect ratio. It is in fact 40:71. iPhone < 5: @media screen and (device-aspect-ratio: 2/3) {} iPhone 5: @media screen and (device-aspect-ratio: 40/71) {} iPhone 6: @media screen and (device-aspect-ratio: 375/667) {} iPhone 6 Plus: @media screen and (device-aspect-ratio: … Read more
You can make YouTube videos responsive with CSS. Wrap the iframe in a div with the class of “videowrapper” and apply the following styles: .videowrapper { float: none; clear: both; width: 100%; position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0; } .videowrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } … Read more