A user seeks help reducing the size of an image box and removing its border on their Shopify homepage section.
Initial Problem:
Solution Provided:
A helper provides CSS code snippets to be added to the theme’s CSS files (base.css or component-image-with-text.css):
border: none !importantobject-fit: scale-downCurrent Status:
The desktop version works as intended after applying the CSS modifications. However, a mobile display issue persists where excessive spacing remains above the image despite adjustments. The helper cannot replicate this mobile spacing problem on their device, suggesting it may be screen-specific. The conversation remains open with the user expressing gratitude while the mobile spacing discrepancy is unresolved.
Hello, i have added a section with image and text to my home page. Does anyone know how can i make the box that contains the image smaller and how can i make the border around the picture disappear using code?
No matter how small i make the original picture in the box, the box it self seems to have a minimum size.
Below you can see what i mean, i want to make the whole box, highlighted with red color, smaller
This is the page url if someone wants to check
Thanks in advance!
Hi @CalmaCoils
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__media.image-with-text__media--adapt.gradient.color-background-1.global-media-settings.media {
border: none !important;
}
.image-with-text__media.image-with-text__media--adapt.gradient.color-background-1.global-media-settings.media {
min-width: 30px !important;
min-height: 30px !important;
padding-bottom: 100% !important;
}
@media only screen and (min-width: 749px){
.image-with-text__media-item.image-with-text__media-item--small.image-with-text__media-item--top.grid__item {
margin-top: 50px;
}
}
And Save.
Result:
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
Hello there and thank you for your reply. I tried adding the code both in the base.css and in the component-image-with-text.css but it didn’t seem to work!
Do you think that i can put a code in the section “custom.css” on the left, of the picture below. I have already inserted a small code to make the text smaller and it seems to work fine.
The code is working. it even take out the border. Do you like to make it more smaller?
Check this one.
Paste on the same file where you place it.
.image-with-text.image-with-text--no-overlap.page-width.isolate.section-template--16421685002457__3d0a14e2-89cd-4fd6-b9e6-11f91ccd0adb-padding .media > img {
object-fit: scale-down !important;
}
If you like more more smaller adjust this padding.
result:
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
it actually did work, i thought i erased the code but i accidentally have left it in the component-image-with-text.css, i pasted the last code that you ve sent me and it got it to a size that i had in mind. But now i face an issue on the mobile version. As you can see in the image below, the space in the upper and down part of the image is too big. I dont really mind about the upper space, but i would like it to be right above the title. “Secure transactions …”
Thanks again for your valuable help in advance!
Check this one.
Same Instruction. Paste it where you paste it before.
@media only screen and (max-width: 749px){
div#ImageWithText--template--16421685002457__3d0a14e2-89cd-4fd6-b9e6-11f91ccd0adb {
padding-top: 0px !important;
}
}
And Save.
Result:
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
Thank you much for your help in advance,
it moved the image closer to the title a bit, but still there is distance! This is how it looks at this moment on my phone.
i guess it has to do with different screen previews, thanks anyway for all your help, i really do appreciate it!
