Assistance Needed:Header Image Not Resizing for Mobile

Technical Q&A
1

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_0-1627273560806.png1920×1080 274 KB

Jala2006_6-1627273774166.png
Jala2006_6-1627273774166.png800×600 197 KB

2

Hello There,

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

3

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.

4

https://www.cyclemelaninkisses.com/

Password: Jaia2006

Thanks for your assistance.

5

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

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

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.

8

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