CSS media query help :-)

1

I’ve just made this…

@media screen and (max-width: 9999px) {
    .hammy {
      padding:0;
      margin-right: 40px;
}

@media screen and (max-width: 960px) {
    .hammy {
      padding:0;
      margin-right: 30px;
}

@media screen and (max-width: 640px) {
    .hammy {
      padding:0;
      margin-right: 15px;
}

In case it’s not obvious, it is to change the right margin of .hammy at two breakpoints.

It works, but I’ve a feeling it’s a bit messy. I think I should be using “min-width” in places but can’t work out what.

Is anyone able to help me make this as clean as possible?

Ta.

2

You are missing closing braces for each media query. Make sure you have the same number of closing braces as opening braces - I.e. 2 per media query. None apart from the fist one will be doing anything. Look in the inspector at the CSS file and you will see the errors highlighted in red.

Using a huge max width is pointless - that condition needs no media query as it is the “default” state not covered by your other media queries.

Only on mobile so I can’t re type it for you.

1 Like
3

It is much less messy to write mobile first. So default state with no media query and then each subsequent condition for larger screens is specified using a min-width.

1 Like
4

Thanks Tav, I knew I had it wrong somehow, although it did work, in Chrome at least, didn’t try Safari.

So this, I believe, is now correct (it works)…

.hammy {
      padding:0;
      margin-right: 11px;
}

@media screen and (min-width: 641px) {
    .hammy {
      padding:0;
      margin-right: 26px;}
}

@media screen and (min-width: 961px) {
    .hammy {
      padding:0;
      margin-right: 36px;}
}

And looking at it now, I’ve no idea why padding is in there!

1 Like
5

You might have (had) another .hammy definition somewhere else in our CSS before this section…

6

When people in the RW community can’t see the point of mobile first they should look at those two examples of CSS. Good job.

Look in the browser. Inspect element on hammy and you will see which line is applying the padding that you are not expecting. Try to override it using a more specific selector rather than using !important if possible.

7

Oh, there is no padding, which is why I’ve no idea I decided to set it 0 in hammy!