â–Ľ
Streaming live at 10am (PST)

Filling the window without borders


#1

Hello All,

I am looking to have my whole page filled. Right now if I increase the size of my window I get this weird background on the edges.

When I was looking at some other websites that used templates off of webflow I tried expanding the window and all the content followed, no boarders of any sort.

I attached a reference of my website incase I am not explaining this properly( I am not a web designer)

Can someone assist in helping me fix this. I saw some posts that required coding, but its all Chinese to me and I wouldn’t even know where to plug it in.


#2

Hi @Peter_Kramm

Can you share the website or webflow link here?
so it will make us easier to analyze the problem.


#3

It appears I was able to fix it on my image( I believe this is the hero image ) but anything below the blurb if I drag out corners of the window I get this pink bars across.

here is the link


#4

Hi @Peter_Kramm,

Can you share the read-only to see the structure of your project as well?


#5

Absolutely…

https://preview.webflow.com/preview/peters-first-project-6b11e0?preview=6e69f80f2df95d572b772b389b4a5385


#6

It is because you have the background colour set on your element : “Content Wrapper”
try to set your desired colour on your element “Content section”

Side Note: I am able horizontally scroll your page which mean you don’t really have a responsive layout.
Some elements are overflowing to the right just so you know.


#7

When you say the elements are overflowing, are you referring to those pink boxes? That is what I am trying to get rid of.


#8

These are not pink boxes but they are the content section background colour which you can see when your screen is bigger because the Content wrapper (container can’t be more than 1330 px). It takes 100% of the screen until it reach 1330 px and after you can start to see the edges of your content wrapper element.

The overflowing is when an element is bigger than its parent and therefore overflow out of it. The default behaviour of browser is to make you able to scroll this extra content.

Yours come from your custom embed element set to a fixed width of 1150px. If your screen is smaller than this it will start to overflow out of the body making the page scrollable.

I hope this make sens.


#9

Is there a video for this? This is really confusing.

Where the pink box is under my BW images, I don’t see any option for the Background colour in the elements sections and in the Style tab under Background colour I have it set to transparent.


#10

Sorry the background colour is set on your body and this is the one you are seing. (My mistake because I did some changes on my end to find your issue)

Btw, except in some very specific case you should try to avoid putting a class on the body and use the Body All Page selector instead :slight_smile:

I setup the background colour to black and this is the result:

But of course it depends of what you are trying to achieve as a design :wink:


#11

Ok that was HUGEEEE HELP! LOL Thanks a lot.

If you don’t mind also answering this because you mentioned this, how do I fix the over flowing. The element widget I added thats is 1150px, is a instagram feed that I plugged in. What I took away from what you wrote is basically if someone is shrinking their screen thats widget will be a static 1150px it wont adjust- correct me if im wrong.

Also I used a template for this website, the class was already put on the body :wink:


#12

Yes you got it for the size of your widget. I don’t know what it is suppose to look like on the published site but if it is a responsive widget you could just set the width of you HTML embed element to 100% and set the height to auto and you should be good to go :wink: