0

I have wrote my website in the biggest size (1025px) however now that I have added media queries the media query for the smallest screen size (400px) has over written all other CSS.

It does not listen to the breakpoint.

Too much code for one code snippet as I am unsure where the problem is at all. Site here: https://taramcallister.github.io/portfolio/

@media (min-device-width : 320px) {
/* smartphones, iPhone, portrait 480x320 phones */
#top {
    display: grid;
    grid-template-columns: 100%;
}
.nav {
    display: none;
}

#bio {
    font-size: 0.7em;
    max-width: 70vw;
    padding-top: 1em;
    padding-bottom: 0em;
}

 @media (min-width:481px) {
/* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */

#bio {
    font-size: 0.85em;
}

#name {
    font-size: 3em;
}

.app {
    margin-top: 4em;
}

.info-wrap6 {
    margin-top: 2em;
}

}

 @media (min-width:1025px) {
/* big screens */
/* designed for this size */

}

When i make the viewport larger it still has all the styling from the smaller screen size, rather than switching to original code?

UchiCode
  • 23
  • 9
  • 1. Welcome! I suggest doing this: create a new html file, and start adding CSS piece by piece, till you see the problem happen. Then post the code that made it change, here. 2. I don't know what "It does not listen to the breakpoint." means. 3. CSS means "cascading". If you write "A", and below it , "B", CSS will consider the "B" rule over "A". –  May 08 '18 at 01:01
  • without the code we can't help, or it would be hard, so try to add some code! – Adam May 08 '18 at 01:02
  • Hi, I think the problem is my max and min breakpoints i will edit the post – UchiCode May 08 '18 at 01:03
  • I assumed inspect would be the way people would easily debug! – UchiCode May 08 '18 at 01:03
  • You need to either define your styles in order mobile - desktop (best practice, see Bootstrap or similar framework for example), or you're going to need to add `min-width` and `max-width` to all media queries to prevent them from incorrectly applying. – fubar May 08 '18 at 01:07
  • The problem is you added `min-width:` not `max-width:` switch it and then the code will respond to the small media screens – Adam May 08 '18 at 01:09
  • I have other media queries applied in order, but removed them in order to keep post short - they have no affect, however when I add max-width nothing happens and the smaller styling still remains even though it is beyond it's max-width? hope that makes sense – UchiCode May 08 '18 at 01:09
  • It should work, but you need to go back from the begging and write your media query because there's a conflict. https://i.stack.imgur.com/UR1gw.png – Adam May 08 '18 at 01:12
  • thank you all so much! it is now working :) – UchiCode May 08 '18 at 01:22

0 Answers0