Custom separators

[Richard]

Richard

August 8, 2017 at 8:24 am

Hey guys,

at the moment, when you visit my website you get to see this.

I made these golden separators in a png format and I am trying to create an effect similar to this:

Can you see those golden lines? They are completely unresponsive. They simply scale in size when I swap to mobile view on their website.

Now I have no idea what would be the best way to create this effect. They way I made it looks like this-

As you can see I’ve inserted a row with 3 columns. I played with the code so I could resize them and get them closer to the actual text by using this code.

For the left one
{
display: inline-block;
margin-right: -40%;
width: 70%;
}

And for the right one
{
display: inline-block;
margin-left: -40%;
width: 70%;
}

Didn’t save it though, because there is no point yet. Because when I switch to mobile menu I get this.

Funnily enough it doesn’t look half bad, but I won’t learn anything by settling for random things.

What would be the best approach to make sure that the row is unresponsive to the mobile layout and simply stays the same? Or should I choose a different approach entirely?

And is there any easy way to create separators such as these across my website without a need to tweak the css every time?