Hi Webflow Community,
Im pretty new to designing site, and this is the first site I have created with Webflow. I have created a project highlight section that is styled as a ripped piece of paper. However, I am having trouble getting the image to display responsively. at certain breakpoints the about section, below the one style with the ripped paper, overlaps the ripped paper and disregards the height dimensions of the project highlight section.
if anyone has a recommendation on how to fix the responsiveness of the project highlight section I would really appreciate it!
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
Hi @Reed722 ,
Without a read-only link it will be very hard to understand your intentions and help.
thanks! first time posting here. I thought I had included it in the link section. but here it is
read only link
I don’t see overlapping at all
Can you share a screen capture?
the overlapping is really only at this screen width… however the section that contains the paper strips as a background resizes in some odd ways too. im wondering if maybe I need to include the paper on a div block that is stretched to the grid that the project highlight image and text are contained within
I would try to make the hole sections dimensions follow one axis, so the sizing will always be relative. For example - give it height of 50vw.
Once you have that as you need it to be, add the background image and play with it’s sizing.
thanks! I appreciated your patience with the links too! I’ll try that out. I think the current sizing of the section is on auto and is responsive to the grid.