RWD is killing me! And other questions on my Project Landing Page

Project Feedback
#1

https://codepen.io/jordancrowl/full/MWjGJLQ

I feel like I haven’t quite grasped the fundamentals of media queries. I’ve done a lot of reading, but it all seems like a foreign language to me and everything I try doesn’t seem to work. When loading my page on my mobile browser things are off-centered, the nav bar is wonky, images are not the right size, etc. I’d also like the row that I have at the bottom of my page to show up as a column on mobile.
Can anyone provide any guidance or assistance into how I might accomplish all of these things? I feel like with all the reading and trials I’ve done so far I’ve accomplished nothing except more confusion.

I have some other questions:

My nav bar links jump to parts of the page when at the top of the page, but if you are in another section the links are unavailable. What’s going on here?

My nav bar is transparent. How do I remedy this so that you don’t see the text going through when scrolling?

Thanks for your help.

#2

Your header gets under the other divs so the links aren’t clickable as you are not clicking the link but the div which is over it.
give your header a z-index property which has value higher than every other element on screen z-index:999; something like that.

If your header is transparent thing under it will be shown there is no way you can keep it transparent and opaque at the same time. Give it some background-color to hide what goes under it .

1 Like
#3

Media queries let you define a different styling rule for different viewport widths. For you #products for example, this could look like this:

#products {
  flex-direction: column;
}

@media (min-width:680px){
  #products {
    flex-direction:row;
  }
}

This will set the flex-direction to column, but when the viewport is bigger than 680px, it’ll switch to row.

The products are off-center because of this combination of rules:

.product-div { 
 margin: auto 2rem;
 width: 100%;
}

You set them to a width of 100%, but also want a margin left and right of 2rem. That makes them bigger than 100% width. The browser applies the margin-left, but the div doesn’t fit in its container anymore and overflows to the right. To fix that, and to still have some space left and right, I’d replace the rules with this:

.product-div { 
 margin: 1rem auto;
 width: 90%;
}
@media (min-width:680px){
  .product-div {
    width:30%;
  }
}

The issue with your transparent navbar can easily be fixed if you give your #header a background-color (as an extra, I’d also give it some box-shadow like box-shadow:0 3px 5px 0 rgba(0,0,0,0.3);). As for the links not working, check the comment above.

And finally, you have some syntax errors in your HTML. You can run your code through a validator like https://validator.w3.org/ to identify them.

2 Likes
#5

@mdshariq Thank you that helped so much.

#6

@jsdisco Thank you! I applied the formula you gave me to my product-div, products, and nav/ul sections. It really made everything look a lot better on mobile! I have one more question for you. How do we know the exact min-widths, max-widths, etc. in media queries? How did you come up with 680px?

1 Like
#7

That was really just some random value.

Smartphones have widths starting with 320px (that’s an older iPhone) up to around 420px. If you make your smartphone version look good in that range, you should be fine.

Then, there’s a gap of widths that aren’t really relevant (from 420px to around 600px). There’s not many devices with that width, so I wouldn’t bother to optimise here.

Tablets start at around 600 or768px, so you want to make sure that your page looks good from that value and above (take a smaller value to be on the safe side, but 768px seems reasonable).

For the desktop view, add the next media query at maybe 1200px. Can be 1000 or 1400 if you prefer. It depends on your layout.

Here’s a list of devices and their widths, if you scroll through them, you’ll see that reasonable breakpoints are

  • 320px - 420px for mobile
  • 420px - 600px range doesn’t really matter
  • 600px - 1024px for tablets
  • 1024px and above for desktop

You can never be sure that your page looks good on every possible device on earth (unless you go to great lengths, or are a design genius), so just concentrate on the most common viewport widths and it should be alright.

3 Likes
#8

Super great and helpful information. Thanks so much for taking the time to help :slight_smile:

1 Like