Design Solution for uniquely styled sections

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!

Warm Regards,

Reed


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

Your link is broken :sob:
Share a read-only link | Webflow University.

ohh no! ok one more time. https://preview.webflow.com/preview/icebox-collective?utm_medium=preview_link&utm_source=dashboard&utm_content=icebox-collective&preview=b3e2275bbea1302b7d4200c80cfa9205&workflow=preview

1 Like

I don’t see overlapping at all :smiley:
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

1 Like

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.

1 Like

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.