Height of Parallax, Shorten & Make Responsive

Hi,

I’ve been creating a website - http://tidalmassage.com.au/

You’ll notice that on a mobile screen the text in the parallax image (first image gets cut off). Is there a way to make this section of the parallax responsive?

Also is there a way to shorten the height of that first parallax section (as on a mobile it seems like the user has to scroll through a fair bit of image before they see the other sections)?

I imagine however this probably will be fixed if that section can be changed to respond (shrink so to speak) on a mobile device.

Thank you for your help! I absolutely love this theme.

Hi @angh5,

I hope you are well today and thank you for your question.

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Shapely Options -> Other


@media (max-width: 580px){
.shapely_home_parallax:first-child,
.shapely_home_parallax:first-child > section,
.shapely_home_parallax:first-child .parallax-window {
    max-height: 260px;
}
}

Best Regards,
Movin