[Support request] Website Not “Scaling” Correctly

[Monica]

Hey there

My problem may just be that I don’t know how to articulate my issue in order to find the right answers, but when I go to my site http://www.sounding-line-data.com, the containers are pushing to “full width” and beyond instead of adhering to their allocated percentages. As a result, none of the spacing formatting is working either. However if I scale my monitor to 90 percent (using the CTRL + minus key), the settings appear correct.

As an example, if you go to my Our Services page
https://sounding-line-data.com/our-services/

When the display is set to 100%, the top “Our Services” bar has what appears to be equal padding on top, bottom and left. but there’s a lot of white space between the top bar and the next “Our Services” (black on white) Title.

Then each image and text block stretches to nearly the full width of the page.

If you CTRL Minus to 90^, then the page looks “correct” The top bar has a deep top padding (set that way as a test), less white space between the top bar and the top title, and the images and text boxes scale correctly, with four boxes in one row.

Since I can’t even articulate what is wrong, I’m having a hard time figuring out how to fix it. I did try checking my monitor resolution and it is on “recommended,” the same as when I built the site, so I don’t believe that’s the problem.

I appreciate any guidance you can provide!

Monica

[Fernando]

Hi Monica,

For reference and to check if we’re seeing the same thing, can you take a screenshot of the “Our Services” section on 100% and 90% screens, and share it here?

Uploading Screenshots: https://docs.generatepress.com/article/using-the-premium-support-forum/#uploading-screenshots

[Monica]

Hey Fernando, thanks for looking into this for me! I’m sure I’m going to feel really silly when you tell me I did something wrong, but I just cannot figure out what that something is! Here’s the link to the two images.
https://postimg.cc/gallery/8CDcRXD

[Fernando]

I see. You’re looking from a screen size less than 1025px which would be tablet view.

For tablet view, you have a different top padding for a Container Block.

You’ll need to set it to 0px as well if you want them the same.

Example: https://share.getcloudapp.com/bLu5nQ0E

The same goes for mobile.

[Monica]

Thanks! It’s more the left and the right columns I am worried about. I have the containers set at 60 and 40 percent but they are still spilling over into two rows and not staying in one.

I have a Samsung all in one, so maybe although I’m using it as a laptop it’s transforming into tablet mode?

But even in tablet view, there should be enough spacing to have two columns.

Thank you!

[Fernando]

On tablet view, they’re set to 100% width. See: https://share.getcloudapp.com/rRuQeDE9

Can you try setting the widths to 60 and 40% respectively and recheck?

[Author]

Posts