Solved

How to set small section height for mobile and large size for home page image with text overlay?

dreary
Tourist
5 0 2

On my mobile view of my site the home page image has large gaps but if I set the size to small it fits perfectly the only issue is that then the desktop view the image is also small. My store is drearyvisuals.com and the password is quapru

Accepted Solution (1)
KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@dreary 

thanks for clear

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) {
#shopify-section-hero-1 .hero-hero-1 {
    height: 67.333333vw !important;
}
}

 

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

View solution in original post

Replies 8 (8)

KetanKumar
Shopify Partner
36839 3635 11972

@dreary 

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide 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
dreary
Tourist
5 0 2

My shop url is drearyvisuals.com and the site password is quapru

KetanKumar
Shopify Partner
36839 3635 11972

@dreary 

sorry i can't see both are section can you please show me 

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
dreary
Tourist
5 0 2

E1A5ED19-2321-4A79-A30E-B0002C3BA25B.png

7249F6A5-A6C3-42CF-BF06-E2945628B2FB.png

dreary
Tourist
5 0 2

the mobile version has the big gaps when the image is set to large extra large or adapt to image when I customize my website. But on desktop it looks fine. If I set the image to small to have it fit correctly for mobile it then looks too small for desktop

KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@dreary 

thanks for clear

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) {
#shopify-section-hero-1 .hero-hero-1 {
    height: 67.333333vw !important;
}
}

 

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
dreary
Tourist
5 0 2

Thank you very much this fixed it!! Have a great rest of your day! 🙂

KetanKumar
Shopify Partner
36839 3635 11972

@dreary 

it's my pleasure to help you

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