Why on smaller screens does my page not fit the screen?

Hi all,

This page: https://giacomolaw.me/ does not fit smaller screens for some reason. A scroll bar appears on the bottom and lets you scroll left and right. I can’t seem to find anything overflowing either.

The page is responsive, just something is overflowing and I can’t figure out what.

How can I fix this?

Here is the GitHub repo: https://github.com/GiacomoLaw/giacomolaw.github.io


your images don’t appear to have the max-width attribute applied to them. Try it out. Again, nice site.

Thanks, I will try it out!

Appreciate the help

Turns out I do have max-width set, on the image-fluid class.

Well, @DipperDolphin, I suggest making all your images have a max width set. For example, (sorry for the ping btw) you could have the img tag set max-width to 100% by default, and have classes like icon to set the max-width to 5%. :slight_smile:

Okay, thanks. I will give it a go.


Seems not to be the issue. I tested locally and it was still happening :confused:

From Bootstrap docs:

  • Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
1 Like

It worked! Can’t believe I forgot about these, thanks for reminding me!