[Resolved] Seperation Line for Headline

[melvin]

Hi,

How do i make a seperation line exactly like this ya?

View post on imgur.com

Kindly advice

TQ

[Elvin]

Hi Melvin,

Can you link us to the page where this should be applied? To inspect the page and find the necessary selectors for CSS writeup.

Let us know. 😀

[melvin]

Hi Elvin,

Thanks for the quick response, I’ve attached the page as per requested.

[Elvin]

You may have to modify the HTML tag of that headline to add a span tag. You’ll have to add additional CSS class “with-sidelines” to it.

Here’s an example: https://share.getcloudapp.com/NQuYYvol

And then add this CSS:

.with-sidelines{
    position: relative;
}
.with-sidelines:before {
    content:"";
    width: 100%;
    height: 4px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%) translateZ(-5px);
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(9,9,121,1) 50%, rgba(255,255,255,0) 100%);
    z-index: 0;
}

.with-sidelines span {
    position: relative;
    z-index: 10;
    background-color: white;
    padding: 0 20px;
}

Change the background color and height to your preference.

[melvin]

Perfect!

Thanks Elvin, appreciate your kind support!

TQ

[Elvin]

In case you need it:

You can generate CSS for the gradient colors from this site – https://cssgradient.io/

No problem. glad to be of any help. 😀

[melvin]

Noted with thanks. I appreciate the additional gradient color info.

Stay safe!

[Elvin]

No problem. 😀

[melvin]

Hi Elvin,

What I want to achieve : change red color for word “Brands”
Issue I face:
1. Desktop – gap too big https://imgur.com/a/qCwLCvO,
2. Mobile – https://imgur.com/a/Rr4yj5U the seperation line looks weird.

Can you kindly guide me to fix it?

TQ

Melvin

[Elvin]

For the spacing,

You have this CSS:

.with-sidelines span {
    position: relative;
    z-index: 10;
    background-color: white;
    padding: 0 20px;
}

The space is coming from the padding value.

Change the padding from padding: 0 20px; to padding: 0 0 0 20px;

The padding value is for top, right, bottom and left. I’ve basically removed the padding on the right. You can adjust the 2nd 0 to adjust the right padding.

As for the mobile separation.

You can try adding this CSS so they stack together when the mobile viewport is too small to fit “Brands we carry” in 1 line.

.with-sidelines > span {
    display: flex;
    flex-direction: column;
}

[melvin]

Hi Elvin,

Thanks for your quick response.

I’ve done inserting the code you provided above, however the layout is kind of weird (refer to layout 3)

View post on imgur.com

What I would want to achieve is simply changing the word “Brands” to red color in Layout 1, the rest of the layout 1 remain unchange. Can you guide me how to achieve that?

TQ

[Elvin]

Ah right.

I think we need to change the selectors you’re using. We may have to be more specific.

Can you remove this CSS?

.with-sidelines span {
    position: relative;
    z-index: 10;
    background-color: white;
    padding: 0 0 0 20px;
    display: flex;
    flex-direction: column;
}

And try this:

@media (max-width:600px){
    .with-sidelines > span {
        display: flex;
        flex-direction: column;
    }
}

.with-sidelines > span {
    position: relative;
    z-index: 10;
    background-color: white;
    padding: 0 20px 0 20px;
}

Also, can you wrap the text ” we carry” on a span tag as well?

Let us know.

[melvin]

Hi Elvin,

I’ve resolved the issue.

Basically I just add a class to wrap the headline title, then everything is solved.

I appreciate your support.

TQ

Melvin

[Elvin]

Nice one. Glad you got it sorted. 🙂

[Author]

Posts