Reduce size of image on home page

alexlomt1 · ‎03-17-2025

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 · ‎03-17-2025

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?

View solution in original post

B2Bridge · ‎03-17-2025

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;
}
}

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

B2Bridge: All-in-one B2B wholesale solution, enabling merchants to set up a complete B2B store quickly and without coding.
With features like customizable registration forms, customer segmentation, and tailored price lists, it simplifies wholesale management.
B2Bridge also includes a dedicated Quick Order page and flexible Net Payment Terms, streamlining operations for wholesalers and enhancing the buying experience.

alexlomt1 · ‎03-17-2025

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

alexlomt1 · ‎03-17-2025

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?

Ellie-BOGOS · ‎03-17-2025

Hi @alexlomt1 😊 I'm Ellie from BOGOS, #1 Shopify Promotion App featuring Free Gifts, Bundles, Upsells, and Discounts 💙

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 </body> part of your image. I will take "500px" for example (please remember to change it to the px you want)

<style>

#shopify-section-image_with_text_overlay_3Ci76h .image-element__wrap img{

width: 500px; // add your width

height: 500px; // add your height

}

</style>

😣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!

If my post is helpful, let me know by giving a Like or Accept solution.
Use BOGOS to create powerful promotions on your Shopify stores: free gifts, discounts, bundles!
Have a nice day ^^

Ellie-BOGOS · ‎03-21-2025

Hi @alexlomt1 😊 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!

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

If my post is helpful, let me know by giving a Like or Accept solution.
Use BOGOS to create powerful promotions on your Shopify stores: free gifts, discounts, bundles!
Have a nice day ^^

Huptech-Web · ‎03-17-2025

Hello @alexlomt1

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

<style>

@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;

}

</style>

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required

Reduce size of image on home page

Reduce size of image on home page

Community Blog Articles