Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Re: Image size and position

Solved

How to adjust image box size and remove border using code?

CalmaCoils
Excursionist
12 3 5

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!

 

Screenshot 2023-12-09 at 2.21.10 PM.jpg

Accepted Solution (1)
CalmaCoils
Excursionist
12 3 5

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!

View solution in original post

Replies 8 (8)

Made4uo-Ribe
Shopify Partner
9094 2173 2683

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:

Made4uoRibe_0-1702139744265.png

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

 

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
CalmaCoils
Excursionist
12 3 5

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.

 

Screenshot 2023-12-09 at 23.59.20.png

Made4uo-Ribe
Shopify Partner
9094 2173 2683

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. 

Made4uoRibe_1-1702160502155.png

result:

Made4uoRibe_2-1702160533423.png

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

 

 

 

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
CalmaCoils
Excursionist
12 3 5

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!

 

IMG_6436.PNG

Made4uo-Ribe
Shopify Partner
9094 2173 2683

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:

Made4uoRibe_0-1702241655174.png

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
CalmaCoils
Excursionist
12 3 5

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.

IMG_6457.PNG

Made4uo-Ribe
Shopify Partner
9094 2173 2683

Im sorry but I cant replicate it. 

This is on my screen. 

Made4uoRibe_0-1702246441476.png

 

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
CalmaCoils
Excursionist
12 3 5

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!