Solved

Center Align Image With Text Element: Taste Theme

liambeauchamp
Excursionist
25 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
5971 1436 1772

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!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com


View solution in original post

Replies 8 (8)

KetanKumar
Shopify Partner
36855 3637 11976

@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
25 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
1491 275 294

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
25 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
1491 275 294

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
5971 1436 1772

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!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com


liambeauchamp
Excursionist
25 2 5

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

Made4uo-Ribe
Shopify Partner
5971 1436 1772

Welcome, please dont forget to hit like. Thanks!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com