Shopify themes, liquid, logos, and UX
Hey,
I'm looking to add a line between heading and text in rich text section in home page of my store, like this.
I also want to change the position of the heading and text to be centered in the middle. This is how it looks now
Thanks in advance,
Pernille
Solved! Go to the solution
This is an accepted solution.
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;
}
This is an accepted solution.
yes please remove this code
.page-width.rich-text {
max-width: 768px;
}
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.
Please share the store URL.
This is an accepted solution.
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;
}
@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
And this is how I would prefer it.
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;
}
@KetanKumar Great, thanks!!
And do you know how I can get the text-part wider? It's still the same 🙂
This is an accepted solution.
yes please remove this code
.page-width.rich-text {
max-width: 768px;
}
it's my pleasure to help us
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024