Solved

Set text container to overlap home page picture on mobile

MagesLaboratory
Tourist
9 0 0

My desktop homepage looks like this:

MagesLaboratory_0-1711935886227.png

And my mobile homepage looks like this (w/o the "show container on mobile" toggled on):

MagesLaboratory_1-1711935946890.png

Mobile with the "show container" switched on:

MagesLaboratory_2-1711935993110.png

 

Any ideas on how to make my mobile homepage picture and container look like the desktop version?

Craft theme

themageslaboratory.com

pw magic123

Accepted Solution (1)

PageFly-Noah
Astronaut
914 181 196

This is an accepted solution.

This is Noah from PageFly - Shopify Page Builder App

 

 You can follow code here to fix it:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag </head>

 

<style>
@media only screen and (max-width: 767px) {
    #shopify-section-template--17416315371761__image_banner_nPgiEg .banner .banner__media{
      height: 400px !important; 
    }
    #shopify-section-template--17416315371761__image_banner_nPgiEg .banner .banner__content{
    position: absolute !important;
    top: 70px !important;
    }
}
</style>

 

Hope my solution will help you resolve the issue.

 

Best regards,

Noah | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

Replies 3 (3)

PageFly-Noah
Astronaut
914 181 196

This is an accepted solution.

This is Noah from PageFly - Shopify Page Builder App

 

 You can follow code here to fix it:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag </head>

 

<style>
@media only screen and (max-width: 767px) {
    #shopify-section-template--17416315371761__image_banner_nPgiEg .banner .banner__media{
      height: 400px !important; 
    }
    #shopify-section-template--17416315371761__image_banner_nPgiEg .banner .banner__content{
    position: absolute !important;
    top: 70px !important;
    }
}
</style>

 

Hope my solution will help you resolve the issue.

 

Best regards,

Noah | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

MagesLaboratory
Tourist
9 0 0

Singing your praises. Thanks much!!

PageFly-Noah
Astronaut
914 181 196

Thank you for response.

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.