Solved

Center Align Image With Text Element: Taste Theme

liambeauchamp
Excursionist
27 2 5

Hello!

 

I have set tried to set a max width for the 'Image with Text' element so that it is the same width as the 'Rich Text' element above which I am happy with, but the 'Image with Text' element is aligned to the left. Is there any code I can add to center align the element? Here is a link to the page that shows the elements I am talking about: 

 

https://batchedcookies.co.uk/pages/about-us

 

Many thanks,

Liam

Accepted Solution (1)

Made4uo-Ribe
Shopify Partner
6407 1538 1908

This is an accepted solution.

hI @liambeauchamp 

Do you mean like this? 

Made4uoRibe_0-1713466662302.png

If it is check this one. 

From your Shopify admin dashboard, click on "Online Store" and then "Themes".

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

 

.image-with-text.image-with-text--no-overlap.isolate.collapse-borders.collapse-corners {
    width: 70%;
}
#shopify-section-template--19314387353868__image_with_text_bkDRDj .image-with-text {
    max-width: 100% !important;
}

 

And Save. 

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.

View solution in original post

Replies 8 (8)

KetanKumar
Shopify Partner
36904 3640 11985

@liambeauchamp 

oh sorry for that issue can you please try this code
1. Go to Online Store->Theme->Edit code
2. Asset->/base.css ->paste below code at the bottom of the file.

#shopify-section-template--19314387353868__image_with_text_bkDRDj .image-with-text {
    margin: 0px auto;
}

 

KetanKumar_0-1713465173168.png

 

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
liambeauchamp
Excursionist
27 2 5

Thank you - that worked perfectly! 

 

As you can see, the 'Text with Image' element isn't aligned with the 'Rich Text' element above, so is there a way to align everything so that it is the same width? 

techlyser_web
Shopify Partner
1654 303 324

Hello @liambeauchamp 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
 #shopify-section-template--19314387353868__image_with_text_bkDRDj .image-with-text {
       margin: 0 auto !important;
  }
</style>

techlyser_web_0-1713465377532.png

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
liambeauchamp
Excursionist
27 2 5

Thank you - that worked perfectly! 

 

As you may have seen though, the 'Text with Image' element now isn't aligned with the 'Rich Text' element above. Is there a way to align everything so that it is the same width and all centered? 

techlyser_web
Shopify Partner
1654 303 324

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
@media screen and (min-width: 990px){
 .image-with-text__content {
     padding: 0 0 0 3.5rem !important;
  }
}
</style>
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com

Made4uo-Ribe
Shopify Partner
6407 1538 1908

This is an accepted solution.

hI @liambeauchamp 

Do you mean like this? 

Made4uoRibe_0-1713466662302.png

If it is check this one. 

From your Shopify admin dashboard, click on "Online Store" and then "Themes".

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

 

.image-with-text.image-with-text--no-overlap.isolate.collapse-borders.collapse-corners {
    width: 70%;
}
#shopify-section-template--19314387353868__image_with_text_bkDRDj .image-with-text {
    max-width: 100% !important;
}

 

And Save. 

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
liambeauchamp
Excursionist
27 2 5

That is exactly what I needed - thank you so much for the solution, I really appreciate it 🙂 

Made4uo-Ribe
Shopify Partner
6407 1538 1908

Welcome, please dont forget to hit like. Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.