Diagonal dividers using SVG display weird

Design help General
1

Hello Webflow community.

I used this tutorial to add diagonal slanting lines for a website I am working on. When in Designer mode, as well as in the published preview, the diagonals don’t span the height of the parent. However, if I resize the browser, then they snap into place. I can’t expect users to figure that out, and I’d like them to load in at the correct height. Anyone dealt with this before, or have any ideas?

The page in question is “North Kansas City” visible on web here.

Here is my read-only link

Thanks!

2

Hi, this is my tutorial :slight_smile:

Problem 1 -
If you set fix height users could get overflow (Use min-height instead).

image
image1564×849 349 KB

Problem 2
In my tuturial, I use position absolute trick inside relative parent for the vertical- Diagonal - and you use regular flexbox (So your issue not related to my tutorial).

3

Hello! Thanks for the tip on min-height, and for the original tutorial.

I should have been more specific with my issue… the slider on the home page is actually working fine, because the image is simply a background on the slide itself. My problem is on the “North Kansas City” page - there are 3 bars there that have the image as a separate div so the full image is visible, and won’t go behind the content div (this isn’t an issue on the home page slider). Please take a look at that page if you have the time, and you should see what I mean.

I will edit my post and link to be more specific.

Thank you!

4

Looks fine to me.

image
image1271×539 212 KB

Please add a screenshot of the problem.

5

Interesting. Here is a screenshot of what I see when first loading in:

22%20PM
22%20PM2548×2132 1010 KB

As soon as I resize the browser it fixes and looks like the screenshot you shared.

6

Maybe try to clear cache. Or “start” again with those 3 (Sometime bugs solve like this hh).

Try this. Weird but looks like webflow add some style for the embed code.

<style>
.w-embed:before, .w-embed:after {
    content: initial;
}
</style>
7

I have tried clearing my cache, and it still persists… same with using incognito tab. I just checked in Firefox and Safari and it seems to be working in those browsers… must just be with Chrome.

With that style code you shared, do I just place that in the “custom code” area of the page settings, or add it to the html embed for the SVG?

8

Put anywhere. Also, publish → inspect element and share screenshot.

Before:

image
image1515×695 286 KB

9

That bit of code seems to have done the trick! I don’t know exactly what it did, as I am not much of a coder myself, but I can’t thank you enough. If it gets out of whack again, I will be sure to let you know.

Here is the screenshot, it looks like it matches yours:

10%20PM
10%20PM3540×2160 1.58 MB

1 Like
10

hhh - this is bug (The embed code should not add extra styles). Again very weird.

initial its like saying (“remove the value and go back to deafult”).

Please mark the custom code answer as solution.

11

Maybe I added something within Webflow that added a style…

Thank you for the explanation. Cheers!