Making Websites Mobile Friendly

1

Hey guys!

I’ve been working on this project for Free Code Camp and I’m trying to make it mobile friendly first. I have a browser window resized to mimic a smartphone and I’m styling the webpage based on that. This worked well for my first project, but for some reason on this project, the elements are extending beyond the screen size and I’m not sure why.

Here’s what I mean:

118942588_410185333288180_7024093633242034324_n
118942588_410185333288180_7024093633242034324_n1431×2048 249 KB

The h2 section and the image are bigger than the selected screen size and I can’t figure out why. For some reason, the browser lets me scroll horizontally on the iPhone setting. I’m not sure why it does this. Do I have the window set up incorrectly?

This is the code. I feel like I’m missing something very obvious but I’m not sure what!

Responsive Web Design is proving to be a challenge for me, so if you happen to have any useful learning resources to share, I would appreciate it! :slight_smile:

Thanks for the help!

2

First, you need to add the .product-images class to all the images so they can scale down, otherwise, they will just overflow the page.

As you have given #header a fixed with of 375px it will not get any smaller, you can use max-width instead.

However, it will not avoid the overflow unless the letters are allowed to wrap (e.g. word-break: break-all on the h1). But allowing the letters to wrap is not really something you would usually want for a brand heading. I would adjust the font-size instead to make it fit a smaller screen.

1 Like
3

Thanks for the help! I was able to fix it by using box-sizing: border-box :slight_smile: