Centre align paragraph text (image with text section)

Store Design
1

Hi everyone

I’m struggling with the simple task of centre aligning some body text of an image with text section on my mobile view.

At the moment I’m putting the following code into my theme.scss.liquid file

@media only screen and (max-width: 749px) {
#shopify-section-template–1644120866612d0b09 .rte-setting {text-align: centre;}

}

but is coming up with an error. I have attached a screen shot below which show you what section I would like help with. My preview link is below.

https://k07bffpuz2vgow9c-54993551588.shopifypreview.com

Screen Shot 2022-10-13 at 6.42.52 pm.png
Screen Shot 2022-10-13 at 6.42.52 pm.png3456×2234 714 KB

Thank you.

2

Hello @Timstar ,

Use this css

@media screen and (max-width: 749px) {
.rte.rte-setting.featured-row__subtext {
   text-align: center;
}
}

Thanks

3

Hi @Timstar , I would like to suggest to edit the content like this screenshot below:

GemPages_Agents_0-1665648390375.png
GemPages_Agents_0-1665648390375.png1887×950 158 KB

Hope that helps

4

Thank you for being so quick.

Can you please tell me what section to put before your code?

e.g. #shopify-section-template–16533096136932__1643065458b042bb44

5

Edit theme.scss.liquid under Assets and add the css code at the bottom.

6

Thank you for your help. I’m putting this code in but it’s not working?

@media screen and (max-width: 749px) {
#shopify-section-template–1644120866612d0b09 .rte.rte-setting.featured-row__subtext {
text-align: center;
}
}

Can you help me with the whole cold? I would appreciate it.

7

Hi @Timstar

This is PageFly - Advanced Page Builder. I would love to give you some recommendations

-Go to Online Store->Theme->Edit code

-Asset-> theme.scss.liquid paste the below code at the top of the file.

@media screen and (max-width: 749px) {

.rte.rte-setting.featured-row__subtext {

text-align: center;

}

}

PageFly_0-1665649143503.png
PageFly_0-1665649143503.png317×585 24.8 KB

Hope my solution works perfectly for you!

Best Regards;

PageFly

8

Hi @Timstar ,

please try to put this code before in theme.liquid:

@media only screen and (max-width: 750px) { .shopify-section .feature-row__text--left .featured-row__subtext { text-align: center!important; } }

Please try it and let me know how it goes

Thanks

9

Hello @Timstar

Go to the online store ->Theme ->Assets-> theme.scss.liquid >Add Code at the bottom

@media screen and (max-width: 749px) {
.rte.rte-setting.featured-row__subtext {
margin: auto;
width: 286px;
text-align: center;
}
}
10

This code turns every Image with text section body text to centre aligned.

I just want the image with text section in the screen shot to have body text centred.

Can you fix this?

11

This code make all body copy in ALL Image with text sections centred. I only want the landing page on mobile to be centred. Can you help?

12

This code makes all body copy in ALL Image with text sections centred.

I only want the landing page on mobile to be centred. Can you help?

13

This code make all body copy in ALL Image with text sections centred.

I only want the landing page on mobile to be centred. Can you help?

14

Hello Again @Timstar

It will be helpful if you try this code -

Go to the online store ->Theme ->Assets-> theme.scss.liquid >Add Code at the bottom

@media screen and (max-width: 749px) {
div#shopify-section-1644120866612d0b09 p {
    margin: auto;
    width: 320px;
    text-align: center;
}
}