Re: Center Align Image With Text Element: Taste Theme

Solved

Center Align Image With Text Element: Taste Theme

liambeauchamp
Excursionist
38 2 6

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
9839 2339 2930

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 are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.

View solution in original post

Replies 8 (8)

KetanKumar
Shopify Partner
37583 3668 12151

@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. Partnership of your ️ Coffee Tips and my code can bring miracles.
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
38 2 6

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? 

niraj_patel
Shopify Partner
2391 516 513

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.

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
38 2 6

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? 

niraj_patel
Shopify Partner
2391 516 513

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.

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
9839 2339 2930

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 are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
liambeauchamp
Excursionist
38 2 6

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

Made4uo-Ribe
Shopify Partner
9839 2339 2930

Welcome, please dont forget to hit like. Thanks!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.