Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
This is an accepted solution.
Do you mean like this?
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!
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;
}
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?
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>
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.
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?
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.
This is an accepted solution.
Do you mean like this?
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!
That is exactly what I needed - thank you so much for the solution, I really appreciate it 🙂
Welcome, please dont forget to hit like. Thanks!
Find Global Growth Opportunities For Your Business with Shopify AcademyLearn how to exp...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025