CSS and media queries

#css #media #responsivedesign

Strategy to add additional breakpoints to responsive CSS

I'm studying CSS, so I'm sure that those who are experienced front-end developers will smile on this post. So will I in a couple of years from now. Nevertheless, I'll try to write down what I found, just to remember it better.

I have this chunk of code:


div id=A

    div id=B
        img
        img
        img
        img
        img
    /div

/div

In browser this looks like this:

I'm trying to keep these icons centered on the page with fixed paddings to the left and to the right. And equal space between icons.

In my CSS I have like this:


#A {
    width: 56%;
    margin: 0 auto;
}

Icons are of the same width 51px. To make them look nicely placed, I put padding-right for images and padding-right:0 for the last image. The task was to make this page responsive starting with the screen width of 768px.

I ended up with a table of calculations, like this:


A = current width of screen/container, div id=A
B = div wrapper for icons = 0.56*A, div id=B
I = icon image width = 51
P = padding-right = (B-5*I)/4
% = (P/B)*100 rounded down
rounded means that if I had 3.99%, it would be rounded down to 3.

The next step was to see, at what breakpoint do I need to change padding percentage. Because if I set 'padding-right:10%' for example, it worked only for width screen between 768px and 758px.

Actually, this can be checked mathematically:

Let's say we have width of our screen 768px. In this case we have:

A = 768
B = 0.56*768 = 430.08
I = 51
P = (430.08 - 5*51)/4 = 43.77
% = (43.77/430.08)/100 = 10.1771
rounddown(10.1771) = 10

So we have proved, that with screen width of 768px, padding should be 10%.

Now, let's assume that we set padding to be 10% (of container width) and resized our screen to 757px. The last icon image will jump to the next line like this:

Why it happened? It seems that everything was correct, we are using percentage and it should never come out of the limits of container, images should not jump below. The practice showed, that this assumption was wrong.

So I decided to add breakpoints with @media query into my CSS. My calculations of the possible breakpoints were:

I created excel document, inserted my formulas of calculations (see above) and applied this formulas to every possible value of screen sizes, i.e for 768px, 767px, 766px ... 475px.

And I noticed, that from 768px to 759px value of padding between images was 10% of the container (div id=B, see above). But with the screen size of 758px, the padding turned to be 9%. And it was so until screen size was 712px. At screen size 711px the padding was 8% and so on. So with this imperical values I found all the segments:

width between 758px and 768px, padding 10%
width between 711px and 758px, padding 9%
width between 669px and 711px, padding 8%
width between 632px and 669px, padding 7%
width between 599px and 632px, padding 6%
width between 569px and 599px, padding 5%
width between 542px and 569px, padding 4%
width between 517px and 542px, padding 3%
width between 494px and 517px, padding 2%
width between 475px and 494px, padding 1%

If width was below 475px, padding was 0%. That indicates, that I shall narrow left and right paddings of parent container, because 5 icons were not able to fit inside their div id=B when screen was less than 475px.

Based on this I added media queries to my CSS as follows:


@media all and (min-width:758px) and (max-width:768px) {
    #social img {
        padding-right: 10%;
    }
}

@media all and (min-width:711px) and (max-width:758px) {
    #social img {
        padding-right: 9%;
    }
}

...

@media all and (min-width:475px) and (max-width:494px) {
    #social img {
        padding-right: 1%;
    }
}

My only concern was: what will happen, if screen size was exactly at the breakpoint edge - i.e. 758px?

Will the padding be 10% (because min-width == 758px and is TRUE) or it will be, as necessary, 9% (because max-width == 758px and is TRUE)?

In this case the cascading rule of css - that the instruction, which is later in css file will override the same instruction above it - answered my question. Because the instruction 'max-width:758px' is after the instruction 'min-width:758px', padding will be 9%.

Thank you for reading this boring post. I guess, there are more elegant ways to make your page responsive, instead of creating 10 media queries and spending all the evening calculating the segments ))) Take care!