Reduce Image with Text Overlay on Mobile Only - Debut Theme

NicholeE
Tourist
9 0 4

Hi,

I am looking to reduce all of the Images with Text Overlay on my homepage. I've searched this endlessly on these discussion boards and have not found a solution that works. I was able to reduce the image size for my First Banner Image with the code below but it's not working on all of my images on the homepage. Can someone help me adjust the code? Also - I only have Theme.css. Thank you!

 

This line: height: 32vh !important; 

banner for question.jpg

 

This code helped me adjust the first image to whatever size I wanted. But only for the first banner image.

@media screen and (max-width: 749px){
div#shopify-section-hero-1 div#Hero-hero-1 {
height: 32vh !important;
background-position: center !important;
}

div#shopify-section-hero-1 div#Hero-hero-1 .hero__inner {
padding: 15px 0 21px;
}

div#shopify-section-hero-1 div#Hero-hero-1 .hero__inner h2.h1.mega-title {
font-size: 18px;
}

div#shopify-section-hero-1 div#Hero-hero-1 .hero__inner .rte-setting.mega-subtitle {
margin-bottom: 0;
}

div#shopify-section-hero-1 div#Hero-hero-1 .hero__inner .rte-setting.mega-subtitle p {
margin-bottom: 5px;
}

div#shopify-section-hero-1 div#Hero-hero-1 .hero__inner a.btn.hero__btn {
margin-top: 2px;
}
}

Replies 5 (5)
KetanKumar
Shopify Partner
24919 2495 9027

@NicholeE 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
KetanKumar
Shopify Partner
24919 2495 9027

@NicholeE 

thanks for url can you please try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.

@media only screen and (max-width: 749px) {
.hero--medium {
    height: 140px;
    background-size: contain;
    background-color: #fff;
    }
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
NicholeE
Tourist
9 0 4

Thank you so much. I had to fiddle with it because not all the graphics were medium size and the sizing was a little off. But we got there with this! Appreciate your help so much - I couldn't figure it out without you.

 

@media only screen and (max-width: 749px) {
.hero--medium {
height: 30vh !important;
background-position: center
background-size: contain;
background-color: #fff;
}
}
@media only screen and (max-width: 749px) {
.hero--large {
height: 30vh !important;
background-position: center
background-size: contain;
background-color: #fff;
}
}

KetanKumar
Shopify Partner
24919 2495 9027

@NicholeE 

yes please can try it

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing