How to add a line between heading and text in rich text section in Debut theme

Solved
MPOPernille
Excursionist
37 0 15

Hey,

I'm looking to add a line between heading and text in rich text section in home page of my store, like this.

Skjermbilde 2021-06-28 kl. 15.41.26.png

I also want to change the position of the heading and text to be centered in the middle. This is how it looks now

Skjermbilde 2021-06-28 kl. 17.37.24.png

 

Thanks in advance,

Pernille

KetanKumar
Shopify Partner
20725 2148 7850

@MPOPernille 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
dmwwebartisan
Shopify Partner
7483 1776 2381

@MPOPernille 

Please share the store URL.

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
KetanKumar
Shopify Partner
20725 2148 7850

This is an accepted solution.

@MPOPernille 

sorry for late here please try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.
this code apply for after 5 - 6 second

.page-width.rich-text {
    max-width: 768px;
}
.rich-text .text-left {
    text-align: center !important;
}
.rich-text h2 {
    position: relative;
}
.rich-text h2::before {
    position: absolute;
    content: "";
    width: 50px;
    height: 2px;
    bottom: -10px;
    background: #f99f6d;
    left: 0;
    right: 0;
    margin: 0px auto;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
MPOPernille
Excursionist
37 0 15

@KetanKumar Thank you so much, this really helped!

However, what if I wanted a bit more space between heading, line and text? As well as for the text-part to be a bit wider?

This is how it looks now

Skjermbilde 2021-06-29 kl. 08.42.01.png

And this is how I would prefer it.

Skjermbilde 2021-06-28 kl. 15.41.26.png

 

KetanKumar
Shopify Partner
20725 2148 7850

@MPOPernille 

yes i have  update my previous code please check

.page-width.rich-text {
    max-width: 768px;
}
.rich-text .text-left {
    text-align: center !important;
}
.rich-text h2 {
    position: relative;
margin-bottom: 60px;
}
.rich-text h2::before {
    position: absolute;
    content: "";
    width: 50px;
    height: 2px;
    bottom: -30px;
    background: #f99f6d;
    left: 0;
    right: 0;
    margin: 0px auto;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
MPOPernille
Excursionist
37 0 15

@KetanKumar Great, thanks!!

And do you know how I can get the text-part wider? It's still the same

0 Likes
KetanKumar
Shopify Partner
20725 2148 7850

This is an accepted solution.

@MPOPernille 

yes please remove this code

.page-width.rich-text {
    max-width: 768px;
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
MPOPernille
Excursionist
37 0 15

@KetanKumar It's perfect, thank you so much!!

KetanKumar
Shopify Partner
20725 2148 7850

@MPOPernille 

it's my pleasure to help us

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing