Hi everyone,
I was hoping to get some help changing the background of my rich text section.
I would like the background black and the text white in this section.
I have managed to change some of the background black but am having trouble changing the whole section. I have attached an image to this message to show you what i would like. I have marked in red the whole section that needs to be black. Could you also please show me how to move the section underneath the rich text section so they are touching and look like one big black section.
url:
https://pn3rv18ybatfxncn-54993551588.shopifypreview.com
Thank you kindly.
Hi!
I’m unable to see any Rich Text fields via the preview link you posted. Could you possibly publish/save the change and send through the actual URL or updated preview?
Thanks for replying @WoodyDev
The Rich Text section is on my Product page. I have refreshed the preview url which is below.
https://pn3rv18ybatfxncn-54993551588.shopifypreview.com
Can you please let me know if you can now see the Rich text section.
Can you please make the black background span the width of both the mobile and desktop screens please.
Thank you.
Perfect!
Sure thing, add the code below to your theme.scss file:
.page-width.rich-text {
background: #000;
max-width: 100%;
}
Thanks. I’ll try this now and get back to you.
Thank you this worked. Can you please help me remove the white gap between the rich text section so it become one big black section. Also how do I add some height to the black background so the text isn’t so close to the top? Thank you for your help.
Sure thing, head into your theme.scss and delete the following code:
.product-featured-icons-container {
margin: 55px 0 30px;
}
Then in the same file, find these two pieces of code:
@media only screen and (min-width: 750px)
.index-section {
padding-top: 55px;
padding-bottom: 55px;
}
.index-section {
padding-top: 35px;
padding-bottom: 35px;
}
Change padding-bottom on both to 0px 
To add more space, take the code in my previous comment and change it to the following:
.page-width.rich-text {
background: #000;
max-width: 100%;
padding-top: 10px;
}
Edit the padding-top value to increase the gap between the text and the edge of the box
I could find the first bit of code to delete in my theme.scss.liquid file
I couldnt find the last 2 bits of code to change the padding-bottom to 0.
Can I just copy this code then paste it into the bottom of my theme.scss.liquid file then change the bottom value?
Sorry to be a pain.
No problem at all!
Try just searching for ‘.index-section’ and it should come up.
Ideally, it’s better to not add extra code when there is already a value to be change, as it can cause confusion for future development
This is what comes up when i search what we are looking for? Sorry if I’mmissing something.
Ahh I see, if you’d like, send me your STORE.myshopify.com link and I’ll request collaborator access and make the changes for you
That sounds great! I’ve just ducked out for the moment but I’ll be back home in about 20 minutes. Does that suit you if I message you in 20 minutes?
Ofcourse!
No rush at all, just post your STORE.myshopify.com link whenever you’re back and I’ll request access and resolve the issue
Hi @WoodyDev What link do you need of me again?
No i need the URL for your store when you’re on the admin page where you can select products, online store, orders etc
I’m working on a non published draft called NEW WEBSITE.
