Mobile First Issue

[Rhino.Freak]

So I made this thing for my website
http://codepen.io/RhinoFreak/pen/Meewax

I want the crowsnest block to have no margin when viewed from desktop and -5px from sides when viewed from mobile.

But it’s not really working for some reason. :/
Help!

[AsGYakimov]

Put the media query at the bottom of the code. Also change min-width to max-width, because now you have -5px margin on desktop and no margin on mobile.

[Rhino.Freak]

Did that.
Now there is -5px margin on desktop and mobile both :/

[AsGYakimov]

http://prntscr.com/bgkt2t
Where?

[Rhino.Freak]

I didn’t update it on codepen then, I did now, check it
http://codepen.io/RhinoFreak/pen/Meewax

[AsGYakimov]

I see the same thing, there’s no margin. There’s 5px padding, maybe you look at it?

[Rhino.Freak]

No, there is -5px margin. Check again via browser tools. And that margin stays even if the width of screen is lesser than 700px.

What I want to do is.
1. -5px margin ONLY if screen width is lesser than 700px
2. No margin in all other cases

[Senff]

What you have now, is a -5px margin when the screen is more than 700px, because:

.crowsnest {
    margin-left: -5px;
    margin-right: -5px;
    border-radius: 8px;
......
[more code]
......
@media (max-width: 700px) {
    .crowsnest {
        margin: 0;
    }
}

So by doing this, the -5px is always there (regardless of screen size), and then for screens smaller than 700, you override it by giving it a 0 margin.

So you need to switch it around. At the top, set it to -5px, and then in the media query, set it to 0. Like this:

http://codepen.io/senff/pen/Nrrxyv

[Rhino.Freak]

thanks for help but I don’t think it’s working right now either.
There’s just no change at all to margins irrespective of viewport sizes.

http://codepen.io/RhinoFreak/pen/Meewax

Also I tried to make it work exactly like this http://www.w3schools.com/css/tryit.asp?filename=tryresponsive_mediaquery
But still it doesn’t work for some reason.

EDIT: Applied body color for testing. Not working as we can see.

[AsGYakimov]

http://prntscr.com/bgnafx
I am not very good with colours but this is lightgreen.

[Rhino.Freak]

Odd, it doesn’t work when I use Google Chrome’s responsive mode… It seems to work now thanks all!

[Author]

Posts