Align text to image above

Solved

Align text to image above

TBS2023
Shopify Partner
279 1 34

I would like to align my text to the image above - both on desktop

https://thebodyshop.com.lb/collections/shop-hair

dosawr

TBS2023_0-1718006150555.png

 

Accepted Solution (1)

Moeed
Shopify Partner
6980 1883 2300

This is an accepted solution.

Hey @TBS2023 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
@media screen and (min-width: 768px) {
.rte-setting.text-spacing p {
    padding: 0 51px !important;
}
}
</style>

RESULT:

Moeed_0-1718006416488.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


View solution in original post

Replies 3 (3)

Moeed
Shopify Partner
6980 1883 2300

This is an accepted solution.

Hey @TBS2023 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
@media screen and (min-width: 768px) {
.rte-setting.text-spacing p {
    padding: 0 51px !important;
}
}
</style>

RESULT:

Moeed_0-1718006416488.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


Dan-From-Ryviu
Shopify Partner
11308 2214 2383

Hi @TBS2023 

You can add this code to the Custom CSS of that multiple-column section. 

.rte-setting {
max-width: 330px;
margin: auto;
}
.rte-setting p { margin-left: 0; margin-right: 0; }

Screenshot 2024-06-10 at 15.00.24.png

- Found this helpful? Hit "Like" and "Accept as Solution"! - Feeling generous. Buy me coffee!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...
Sign up now.

Rakesh_patel_68
Shopify Partner
36 5 6

Hello @TBS2023 

 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file base.css, theme.css, styles.css, custom.css or theme.scss.liquid
Step 3: Insert the below code at the bottom of the file -> Save

<style>
  @media screen and (min-width: 768px) {
  body.template-collection .rte-setting.text-spacing {
      max-width: 330px;
      margin: 0 auto;
  }
}
</style>

Screenshot from 2024-06-10 13-34-56.png
Best Regards,
Rakesh patel

Helpful? then please Like and Accept the Solution.
For any inquiries, please feel free to contact via WhatsApp and Email: sales@dolphinwebsolution.com.
For more information visit our website Dolphin Web Solution.