- This topic is empty.
-
AuthorPosts
-
June 15, 2016 at 12:11 am #242873
Rhino.Freak
ParticipantSo I made this thing for my website
http://codepen.io/RhinoFreak/pen/MeewaxI 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!June 15, 2016 at 12:19 am #242874AsGYakimov
ParticipantPut 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.
June 15, 2016 at 12:30 am #242875Rhino.Freak
ParticipantDid that.
Now there is -5px margin on desktop and mobile both :/June 15, 2016 at 12:50 am #242876AsGYakimov
Participanthttp://prntscr.com/bgkt2t
Where?June 15, 2016 at 1:48 am #242877Rhino.Freak
ParticipantI didn’t update it on codepen then, I did now, check it
http://codepen.io/RhinoFreak/pen/MeewaxJune 15, 2016 at 1:57 am #242878AsGYakimov
ParticipantI see the same thing, there’s no margin. There’s 5px padding, maybe you look at it?
June 15, 2016 at 2:03 am #242879Rhino.Freak
ParticipantNo, 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 casesJune 15, 2016 at 4:21 am #242880Senff
ParticipantWhat 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:
June 15, 2016 at 4:31 am #242881Rhino.Freak
Participantthanks 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.
June 15, 2016 at 4:47 am #242882AsGYakimov
Participanthttp://prntscr.com/bgnafx
I am not very good with colours but this is lightgreen.June 15, 2016 at 4:54 am #242883Rhino.Freak
ParticipantOdd, it doesn’t work when I use Google Chrome’s responsive mode… It seems to work now thanks all!
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.