Page hero header appearance - Desktop Vs Mobile

Hi there,

For starters, try changing the padding-left on mobile to 0 on the Header Element you're using.

See this setting - https://share.getcloudapp.com/rRubwRy4

You then add this CSS:

@media(max-width:768px){
.inside-page-hero {
    display: block;
}
}

Here's the expected result - https://share.getcloudapp.com/Wnu0eneE

Great that worked. I have 2 follow up questions:

1. why is my text not responsive? Is it because I have set a pixel value to it?
2. is there a way to not show the background image of the page hero on mobile.

Thanks for your help.

For #1,

Yes that's correct. The heading has an inline style w/ fixed text of 54px.

For #2:

Add this CSS:

@media (max-width:768px){
    .page-hero {
        background-image: none;
    }
}