Hello, I made this picture with text
but the picture is not perfectly like the picture on the left. And I want to set the “LEES MEER” button under the picture just for desktop. It looks fine on phone already. My URL is: TrendBlend, Thanks in advance
Topic summary
A user is experiencing alignment issues with a text-embedded image on their Shopify store’s desktop version, though it displays correctly on mobile. They want to position a “LEES MEER” (Read More) button beneath the image and align it to the left.
Proposed Solution:
A community member provided CSS code to address the image alignment:
- Navigate to Shopify admin → Online Store → Themes → Actions → Edit code
- Locate the CSS file (base.css, style.css, or theme.css) in the Assets folder
- Add the following CSS at the bottom:
.section-template--[ID].image_with_text_A9wh-padding img {
object-fit: contain;
}
Note: The responder indicated that button placement within the image requires developer assistance and cannot be achieved through simple CSS modifications alone.
The issue remains open pending the user’s implementation of the suggested fix.
1 Like
Hi @TrendBlend
I can help you with the image, but the buttons you need a developer to transfer the into the iimage.
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:
.section-template--21323864506707__image_with_text_3e9Ahw-padding img {
object-fit: contain;
}
And Save.
Result:
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
1 Like