Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
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!
Solved! Go to the solution
This is an accepted solution.
i guess it has to do with different screen previews, thanks anyway for all your help, i really do appreciate it!
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.
Im sorry but I cant replicate it.
This is on my screen.
This is an accepted solution.
i guess it has to do with different screen previews, thanks anyway for all your help, i really do appreciate it!
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024