Assistance Needed:Header Image Not Resizing for Mobile

Jala2006
New Member
4 0 0

Hi There-

I need some assistance in resizing my header w/ image overlay for my mobile view.  The view is fine from a desktop view, but is not the case from the mobile view.

 

Thanks in advance.

Jala2006_0-1627273560806.png  

Jala2006_6-1627273774166.png

 

 

 

 

 

 

 

 

Replies 7 (7)

ZestardTech
Shopify Expert
5393 970 1291

Hello There,

Please share your store URL and password.
So that I will check and let you know the exact solution here.

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing

Kinjaldavra
Shopify Partner
2302 570 1422

hello @Jala2006 

 

Please provide website url and if your store is password protected then also provide password So I will check and provide a solution here.

Jala2006
New Member
4 0 0
https://www.cyclemelaninkisses.com/

Password: Jaia2006

Thanks for your assistance.
Kinjaldavra
Shopify Partner
2302 570 1422

hello @Jala2006 


please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

@media screen and (max-width: 789px){
#shopify-section-hero-1 .hero {
    height: auto;
    background-position: center !important;
}
#shopify-section-hero-1 .hero__inner .h1.mega-title{
	display: none;
}
}

 

ZestardTech
Shopify Expert
5393 970 1291
Hello There,
1.In your Shopify Admin go to online store > themes > actions > edit code
2.Find Asset >theme.scss.css and paste this at the bottom of the file:

 

@media screen and (max-width: 789px){
#shopify-section-hero-1 .hero {
    height: auto;
    background-position: center !important;
}
#shopify-section-hero-1 .hero__inner .h1.mega-title{
display: none;
}
}

 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
Jala2006
New Member
4 0 0

Thank you that worked, but the text overlay 'Melanin Cuties Cycle Too' is not showing which sits below 'Melanin Kisses'.  Is there a way so that the text overlay is present?

Thanks.

 

Kinjaldavra
Shopify Partner
2302 570 1422

hello @Jala2006 

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

@media screen and (max-width: 789px){
#shopify-section-hero-1 .hero__inner .h1.mega-title {
    display: block;
    font-size: 22px;
    position: absolute;
    top: 80px;
    left: 95px;
}
}