Reduce size of image on home page

Store Design
,
1

Hello, I have this image that I want to reduce the size of and make a specific width and height on my home page. How can I do this, and just for this image? I don’t want to make it the same for each one on my home page, just this one. Is there a custom css I can put into the object’s custom CSS section?

Website: https://mmz7sv-mw.myshopify.com/

PW: seupri

alexlomt1_0-1742207191912.png
alexlomt1_0-1742207191912.png1599×803 125 KB

2

Hi @alexlomt1 , you can follow these steps:

Step 1: Open Online Store → Themes → Edit code.

Step 2: Find component-card.css file

Step 3: Paste this code at the bottom of the file

@media screen and (min-width: 799px) {
img.transition--blur-up.mobile-banner--crop-none.lazyautosizes.lazyloaded {
   height: 90vh !important;
   object-fit: cover !important;
}
}

Screenshot_4.png
Screenshot_4.png1342×881 96.7 KB

If this is helpful, please let us know by giving us a like and marking it as a solution. Thank you :heart_eyes:

3

Hi @alexlomt1 :blush: I’m Ellie from BOGOS, #1 Shopify Promotion App featuring Free Gifts, Bundles, Upsells, and Discounts :blue_heart:

Apply this code for a 100% work on your store and also only apply to that image (not for others) like what you want:

Step 1: Open Online Store → Themes → Edit code.

Step 2: Find “theme.liquid” file

Step 3: Paste this code right after the part of your image. I will take “500px” for example (please remember to change it to the px you want)

:persevering_face: If you find this helpful, appreciate if you could ACCEPT IT AS A SOLUTION or give it a like to motivate me to help you and others even more!

4

Like I said, I want the css code only in that specific section, not in my theme files.

alexlomt1_0-1742211012956.png
alexlomt1_0-1742211012956.png288×343 8.98 KB

5

I have dropped this into the custom CSS section and it still works. Can you give me the code to make it so that the text container inside the image is center and middle aligned? Because it looks like this now. Also, how do I adjust the width?

alexlomt1_0-1742211458515.png
alexlomt1_0-1742211458515.png1314×814 120 KB

6

Hello @alexlomt1

Add the CSS to the Custom CSS section in the Theme Options or inside the tag of the theme.liquid file, just before the closing tag. Adjust the width and height as per your preference.

@media screen and (min-width: 481px) { section#banner-image_with_text_overlay_3Ci76h { width: 800px; margin-left: auto; margin-right: auto; } #shopify-section-image_with_text_overlay_3Ci76h .image-element__wrap img { aspect-ratio: 2 / 1; object-fit: cover; min-height: 600px; } }

HuptechWeb_0-1742211986860.png
HuptechWeb_0-1742211986860.png1929×901 254 KB

7

Hi @alexlomt1 :blush: I just wanted to check in and see if you’ve been able to solve your problem yet? I truly hope my recommendations help. Let me know if this works for you or if you have any other questions!

‌‌ :blush: Appreciate it if you could Like and Accept as Solution if my answer was helpful!