Streaming live at 10am (PST)

Can't unbind style

Thats so helpful and the VW for font size totally worked! You’re a genius :smiley:

If I can bother you slightly again, I thought I had everything figured out but I can’t seem to understand what’s going on.

I added a new container that I want for a background for a new page. I added the image to the div container inside the section, set height to auto, but for some reason nothing shows up. It only shows up if I manually set the height to 100vh Not even 100% works only VH. Is there a reason why it doesnt just fully take the original image and set it?

https://preview.webflow.com/preview/drinkrevyv?utm_medium=preview_link&utm_source=designer&utm_content=drinkrevyv&preview=a8650bd4c4e234781cbf322146409bb1&pageId=5ed487cf97a20afc8491bf01&mode=preview

And when I do set it to 100VH, it fills up the page but then any section with a BG color no longer shows D:

That’s because you haven’t told it what 100% is yet. If the container has no height, than a child with a height of 100% is unset or zero. Setting the Section-Contact (parent) to a value, let’s say 100vh, then the child can take up 100% of that space - or 100vh.

In your recent issue, that’s because your setting the height of the image to 100vh and it’s parent container is set to overflow: visible. That means it will break the zero height of it’s parent container and bleed over the other sections below. To get around that, make sure you’re defining your height (or min-height) within the parent container instead so that it’s child (the div with the background image) fills the size without spilling over.

Just as a note, unless you have a ton of visitors using IE11 or older, I’d recommend using an image block with object-fit: cover instead. It’s got support across all other browsers and you’ll take advantage of Webflow’s responsive images as background images will serve up the same size for all breakpoints.

O that makes perfect sense!

Also I’m dumb, I just wanted a static background image on each page, I could just put it in the body right? No reason to create a new section just for a BG image that I want other content over

It depends on the design and how much is going to be covered up but totally. Most of the time I like to split my sections up, so using a color or background for each section makes more sense and give me a bit more flexibility for smaller breakpoints.

1 Like

Definitely! Thank you again!! Really can’t express how much you’ve helped me. I would still be pulling my hair out trying to figure who knows what

Hi! Sorry to bother again! I’m having an issue with the footer, again it’s working perfect on all pages except for one breakpoint. I was able to make it stick to the bottom on all pages by setting margin top: auto, but on screens bigger than 1440px, it overlaps. Do you know what would cause this?

https://preview.webflow.com/preview/drinkrevyv?utm_medium=preview_link&utm_source=designer&utm_content=drinkrevyv&preview=a8650bd4c4e234781cbf322146409bb1&mode=preview

Glad I could help out!

If you haven’t already checked it out, the Webflow University has a ton of great resources to run through to get you familiar with things. Alternatively I’d also recommend taking some time to get comfortable with how to structure HTML and write CSS given that Webflow is grounded in the structure of “traditional” web development. Learning how to manual writing code will help you understand how to best organize your future projects within Webflow and ensure you’re using the platform as a tool instead of a crutch. I know it can seem pretty daunting, and I still learn new things even though I started coding in grade school, but it’s awesome seeing more and more people explore web development with help of Webflow.

As far as your most recent issue, your footer symbol is set to have a background color for the 1440px and up breakpoint. Removing this by clicking the label and choosing “Rest” (or alternatively Alt+Clicking the label) will revert it back to your transparent color used across the other breakpoints.

image

A quick way to troubleshoot issues like this is to look for the blue highlighted labels within the style panel as this indicates that it’s been overwritten for that particular breakpoint. All of the orange highlighted labels indicate that a style was overwritten from the default but not modified on that given breakpoint yet.

image

You can always click on these colored labels to see which breakpoint/class that specific style is being inherited from which can help make sense of more complex relationships - especially when it comes to sub-classes.

image

O nice!! Yea i’ve been binging those webflow university classes haha the videos are actually really funny and entertaining!

In terms of the footer, I actually changed it just to be more visible. I was more wondering why in the 1440px and up, you can see it’s cutting off a portion of “Bottled Goodness” but in the resolutions under, it sits nicely under the content. You can also see the blue highlighted outline overlap the grey footer in the 1440px and up, but on the smaller resolutions, the blue line sits nicely on top of the footer

Ah I see, my apologies. I just checked and I don’t see the issue anymore on the read-only link, did you happen to get it fixed?

No worries!! I added a padding to the section above, which pushed the footer down! But I was more just wondering why I had to do that for the large breakpoint and not the others haha

Also I’m not sure if this is a bug, but do you ever have it where what you see in the designer isn’t what you see on the actual device?

On the mobile view in the designer everything looks great and the background is fixed (I set it in the body class):

But on my actual device, the background isn’t fixed and the other sections seem to be broken:

This looks to be an issue with some devices not respecting fixed backgrounds. There was a thread about it a couple years back, but you should be able to include an image block set to fixed instead for mobile.

And even worse on other pages. I have the body set with a BG image, fixed, cover


O interesting! I’ll take a look thanks!

So I got the BG image to fix on some pages! But on other pages theres something blocking it and I can’t figure out what it is. I cleared all classes in my body tag, but there still seems to be something there

https://preview.webflow.com/preview/drinkrevyv?utm_medium=preview_link&utm_source=designer&utm_content=drinkrevyv&preview=a8650bd4c4e234781cbf322146409bb1&pageId=5ed2e43daf1b4dd4fc079206&itemId=5ed3285caf1b4d642607a421&mode=preview

Trying my best to troubleshoot, seems to be something in the code maybe?

Pretty much turned all sections off and only have a fixed, full section with a full BG image, but theres still something blocking it. I made sure the body had no class and was transparent

You haven’t given your div-product-bg element a height, so just make sure it’s set to 100vh and it will show up. By default, Webflow shows empty elements with a default height to make it easier to add other elements inside of it.

You can toggle this to check the actual height by clicking this icon in the lower left of the Designer window:

image

That did the trick! I thought that at first but on these pages I didn’t set a vh on purpose to see if it would work and it did. Is there a reason these pages didn’t need a set height on the div?

You’re using two different classes (div-product-bg and div-shop-bg), one of which is set to position: fixed with top, bottom, left, and right all set to 0%. If you made these same changes to the div-shop-bg, the image fills the screen.