Hero Image with Text Overlay is cutoff on Mobile

Store Design
1

Hello,

New to shopify however I’m already noticing the header text is cutoff when I move toggle to the mobile view.

I have tried every suggestion on here and nothing seems to work.

Here is my URL:

https://gera-pizza-ovens.myshopify.com/

I’ve tried all the suggestions on the edit code feature and nothign has worked.

2

Also, I am using the motion theme

3

Hi @jhenry60 ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css->paste below code at the bottom of the file:
@media (max-width: 768px){
.hero__text-wrap .page-width{
    display: block !important;
}
.shopify-section:first-child .hero__text-content.vertical-center {
    padding-top: 172px !important;
}
.hero__subtitle .animation-contents {
    width: 300px;
    overflow: hidden;
}
.hero__text-content {
    display: block !important;
}
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

Best regards.