Spacing issues from one screensize to the next

Hello everybody.
Someone else at my job started a website using the Webflow app. I picked it up halfway through. He downloaded a template and that is what we have been using. I set the spacing between objects and paragraphs so it works and looks fine on my MacBook but when its opened on another computer, the paragraphs on a couple of the pages get all jumbled up. Another example is it looks fine on my coworker’s iPhone 15 in landscape mode but my iPhone 15 Max in landscape mode its all jumbled up again. I am relatively new to all of this and I am not sure what I am missing here. Some screens it is fine and others it is messed up but it works perfectly on my computer. I am using Chrome as my browser.

Is there something I can do to correct this?

Thank you for you time.


Here is my site Read-Only: https://preview.webflow.com/preview/foldstar-panels?utm_medium=preview_link&utm_source=designer&utm_content=foldstar-panels&preview=2ea2130616d37fadc915a2cb5766e443&workflow=preview

I don’t see anything. Possible to send screen grabs of what you’re experiencing?

1 Like

Yeah, that’s just it. On only some screens, it is jumbled up. I have it set perfectly on my laptop’s screen. It looks fine. I’m not sure if there is any way I am not aware of to make sure it works fine on every other screen as well. I mean, there is some padding in the home screen that I am not sure is necessary but it all came with the template that we got originally. Maybe they are messing up things somehow?

Thank you for taking the time to look at it. I can’t tell you how much I appreciate it. I really don’t know what to do. I can email my co-worker to send me screen shots of his screen.

Here are a couple of screenshots of the main problem areas. Those boxes, I guess need to be there, right? I don’t know, I kind of inherited this whole thing and know just enough to get into trouble.


Yeah, it looks like some elements were moved inside of the margin elements. I don’t know the exact intentions of the template designer but assuming all margin elements are intended to be empty and only used to properly space the surrounding elements.

I do see that by resetting the height of layout349_content will help with the first overlapping headline. layout349_content is set to a heigh of 100vh (the total height of the browser), yet the content inside is longer than 100hv. By resetting, you’re no longer forcing all of that content into space that’s too small.

This may be the case with your other overlaps. And again, if you see that there are things inside of a “margin” elements, I’m assuming they should be moved out of them.

1 Like

You… Are… The… BEST!!!

I think that might have fixed it. I will send out an email to my co-worker and ask if he can check for me but it sounds right. I can’t thank you enough for looking into this for me. Huge help! I knew it was just something I wasn’t seeing being such a rookie with all of this.

Oh, one more question, if you don’t mind. Those little margin squares, there are two of them on the left. Are they necessary?

I will let you know how it works out with the sizing.

Thank you again,
Connor

That’s great!

It looks like the margin divs can be removed. Or they were moved from their original position.

Example below. Looks like there may have been something between this button and the images below it.

Ok great!
Thats cool. I will definitely check all that out as well.

Thanks again, I mean, really can’t thank you enough. HUGE help!!

Sincerely,
Connor :)