You can set the width based on the vw (viewport width). You can use that value too using the calc function, to calculate a left-margin for the div. This way you can position it inside the flow, but still sticking out on the left and right side of the centered fixed-width div. Support is pretty … Read more
edit 2022 Nowdays, aspect-ratio becomes widely avalaible. set a width or an height then for a square use the 1/1 ratio : aspect-ratio: 1 / 1 ; ressources: tutorial https://css-tricks.com/almanac/properties/a/aspect-ratio/ description https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio browsers that understand it https://caniuse.com/?search=aspect-ratio snippets becomes (note: no width nor height set, since we are in flex layout and flex-grow is set … Read more
Someone linked me this: What is the best way to move an element that’s on the top to the bottom in Responsive design. The solution in that worked perfectly. Though it doesn’t support old IE, that doesn’t matter for me, since I’m using responsive design for mobile. And it works for most mobile browsers. Basically, … Read more
Here is what I’ve done in my projects: @desktop: ~”only screen and (min-width: 960px) and (max-width: 1199px)”; @tablet: ~”only screen and (min-width: 720px) and (max-width: 959px)”; @media @desktop { footer { width: 940px; } } @media @tablet { footer { width: 768px; } } This allows you to only define your media queries once and … Read more
On small device : 4 columns x 3 (= 12) ==> col-sm-3 On extra small : 3 columns x 4 (= 12) ==> col-xs-4 <footer class=”row”> <nav class=”col-xs-4 col-sm-3″> <ul class=”list-unstyled”> <li>Text 1</li> <li>Text 2</li> <li>Text 3</li> </ul> </nav> <nav class=”col-xs-4 col-sm-3″> <ul class=”list-unstyled”> <li>Text 4</li> <li>Text 5</li> <li>Text 6</li> </ul> </nav> <nav class=”col-xs-4 col-sm-3″> … Read more
There are many ways to create the shape with a slanted edge only on one side. The following methods cannot support dynamic sizes as already mentioned in the question: Border triangle method with pixel values for border-width. Linear gradients with the angle syntax (like 45deg, 30deg etc). The methods that can support dynamic sizes are … Read more
That’s by design of CSS — Cascading Style Sheet. It means that, if you apply two rules that collide to the same elements, it will choose the last one that was declared, unless the first one has the !important marker or is more specific (e.g. html > body vs just body, the latter is less … Read more
You have it correct. The thing is, that once your browser has the higher resolution picture (loaded, in cache), there is no point for it to download lower quality one, even when you make your window smaller (the point of this is to save traffic). So if you want to test this, just make your … Read more
Well it seems that they are hiding behind the browser zoom excuse. Really sad to see such a heavily used and influential framework completely ignore accessibility issues and a fundamental cornerstone of responsive design. They are in a position of great responsibility and unfortunately seem to have no intention of acting accordingly. [Update] So today … Read more
What are the rules for CSS media query overlap? Cascade. @media rules are transparent to the cascade, so when two or more @media rules match at the same time, the browser should apply the styles in all the rules that match, and resolve the cascade accordingly.1 What will happen, across all supporting browsers, at exactly … Read more