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

[CalmaCoils]

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!

[Made4uo-Ribe]

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!

[CalmaCoils]

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.

[Made4uo-Ribe]

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!

[CalmaCoils]

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!

[Made4uo-Ribe]

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!

[CalmaCoils]

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.

[Made4uo-Ribe]

Im sorry but I cant replicate it. 

This is on my screen. 

[CalmaCoils · Accepted solution]

i guess it has to do with different screen previews, thanks anyway for all your help, i really do appreciate it!