Hello!
I’m new on Webflow and got some problems with this website. I want to place half macbook on the website and the other half not being visible, problem is the part that is outside the page is visible if you scroll and I would like to know how to avoid this.
Here is the link to the editor where you can see what I mean.
Thanks in advance and hello to everyone in this community!
Ethan
Hey @EthanSuero
The solution is to go to BenefitSection, the parent of the image, and change it to overflow:hidden
Hope that helps. Happy designing!
Hey Matthew! thank you for you quick replay!
The problem of doing this is that it will cut the image on the side but also on the next section. I want the image of the macbook to be visible on his section but also on top of the next section like so:
Instead of messing around with overflows, I’d suggest setting that image as the background of an absolutely-positioned div.
I’m just eye-balling this, but if you create a div with a width of 40% and absolutely positioned Right: 0, Bottom: -75px, and use that image as your bg with “cover” sizing and left-center positioning, I think that will get you what you’re looking for. Adjust your height accordingly.
Make sure that the parent section of this absolutely-positioned div is positioned relative (not auto), and you should be good to go.
Thank you for your replay!
I was thinking that maybe use the image croped woulf be easier? Crop and put it on the right edge? Maybe that would be easier and ideal than mess around with the full image?
Thanks!
If you crop it, you may not get the full effect you are looking to achieve, especially when Responsiveness is invoked.
I recommend @Cricitem’s approach.
Will try that then but seems a bit confusing for a noob like me. I will try that and let you know what I get
Hey Cricitem, I have been trying what you said but this is a completely mess. Thing is when now adding more sections those are added below the header and not as the “next” section below at the bottom, so now I have to “absolute” everything and move it to the bottom, I am pretty sure that it should exist a better-simple way to do this, or I might be missing something.
This is the link to the editor so you can check what I’ve done so far
Many thanks for your help!
I am looking at your project, and I am going to have to make some guesses as to what I think is going on here.
When you say, “adding more sections those are added below the header and not as the “next” section below at the bottom,” I BELIEVE what is happening is that your order of elements is just mixed up. You definitely do not want to get into using absolute positioning for everything (and you don’t need to).
Check your Navigator (hit F) and make sure that your new section is at the bottom. Right now you’ve got a div called “div section” with relative positioning. In reality, that could just be a section, there is no need to use a div there.
Also, for the record, here are the settings for your MacbookContainer element. Take note of the background position settings. This is important.
If you’re stuck trying to figure out how to get a new section to appear as the “next” section on the page, just select the body itself (by clicking on the word “body” at the bottom of the screen), then create a section. That will automatically add it to the very end of the current document.
