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

DipperDolphin · February 21, 2019, 10:14am

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

Thanks!

1-1 · February 21, 2019, 1:21pm

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

DipperDolphin · February 21, 2019, 1:58pm

Thanks, I will try it out!

Appreciate the help

DipperDolphin · February 21, 2019, 2:08pm

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

1-1 · February 21, 2019, 2:40pm

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%.

DipperDolphin · February 21, 2019, 3:13pm

Okay, thanks. I will give it a go.

Thanks!

DipperDolphin · February 21, 2019, 4:16pm

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

jenovs · February 21, 2019, 5:06pm

From Bootstrap docs:

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

DipperDolphin · February 21, 2019, 5:22pm

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