White space on the right of the published website

Design help General
1

I know this has been asked multiple times, but I have near to zero knowledge on webflow so I couldn’t understand them so well. I’ve been working on constructing a very simple website and I am having a column of white space on the published site. If someone could let me know what could be done I’ll appreciate it greatly. (It is quite urgent)

Here is my site Read-Only: https://preview.webflow.com/preview/vikis-blank-site-12eb90?utm_medium=preview_link&utm_source=designer&utm_content=vikis-blank-site-12eb90&preview=4282cfac24821f75ab526d76905b166a&pageId=60396c58875cc767e71ff370&mode=preview

2

It’s because you have a fixed width value on the right side content, and the content div. Try setting them to auto.

1 Like
3

That was so simple, thank you v much!

4

hi… sorry to ask again but for some reason, it’s doing it again and I can’t figure why, I can’t find any hidden overflow or fixed-width value for my div… could you do me one more favour?

5

You still have fixed widths on all the containers in your grid. I would check out the webflow university videos for how to use their best practices

6

Hello! Thank you for the reply, would do you mind looking at it just one more time? Because I made the content div 1100 temporarily while trying things out but even when I put it at auto the problem remains…T.T I really need this to work! I would be happy if you could help a little

7

Hi Viki. You are having trouble because you are going against the way websites work especially responsive ones. The one part we didn’t discuss yesterday is background images. Background images are placed behind content in a div, but have no space of their own and you should not try to design content to fit them. Which I realized is exactly what you are doing. You still are giving things specific width instead of using grid or flex-box to do the work. As your design is it won’t work responsively and it is also very hard to read. There is no way to fundamentally have it work as is. To rework it you should think of things as in rows just like a grid. Those rows stack on top of each other. You can approximately place things but for instance those large balls should be images not background images. Images take up space background images do not. You are also using fixed height to ensure the placement of the background images which is also a bad practice and is messing up the responsiveness of your design. What i would suggest and what I did was hide the background images so you can deal with the real content and if those background images are content then cut them up into smaller images and use them as content. You can also use grids inside of grids if that is easier to picture and align.

1 Like