Shapely - Parallax full background not responsive to mobile?

Hi.

When I choose the ‘Background Full’ option for the parallax widget, the selected image will appear fine on my laptop. When I visit the site on my cellphone however, the image does not resize to the smaller screen which forces me to scroll downwards through a very large oversized image.

Is there a way to fix this? Website is www.sheltercamp.com

I have tried the solution posted on this page without success: https://colorlibsupport.com/t/parallax-image-full-width-100/

Thanks!

Hi @kraftkramer,

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

To provide the solution i visited your site but I didn’t find any parallax widget on your shared site having Background Full.

Please advise.

Kind Regards,
Movin

Hi Movin.

I turned off the parallax function because I couldn’t get it to work responsively on mobile. I have turned it back on now for the last image.

Thanks!

To make it responsive for that widget try 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: 760px){
#shapely_home_parallax-3 .parallax-window.fullscreen {
    background: url("http://www.sheltercamp.com/wp-content/uploads/2016/10/sheltercamp-whistler-glamping-bathhouse.jpg") no-repeat #fff;
    background-size: 100%;
    height: 69vh;
}

#shapely_home_parallax-3 .parallax-window.fullscreen .align-transform{
  top: 25%;
}
#shapely_home_parallax-3 .cover.fullscreen{
  height: auto !important;
}
}

Hi Movin.

Sorry but this still doesn’t appear to be working. I added your code to the custom CSS field as indicated above. I also tried adding it via the ‘Simple Custom CSS’ plugin I have installed. Cleared caches etc.

Could you take another look at how to make this theme responsive on smaller screens?

Thanks!

I visited your shared site and saw it is working fine as shown in the first attached screenshot.

You can see in the second attached screenshot how it was displaying before.

Hi

I have the same problem. I put this code in Admin Area -> Appearance -> Customize -> Shapely Options -> Other

But it doesn’t work…

@jimmydct To help us keep support thread separates could you please create your own thread for your question here https://colorlibsupport.com/c/shapely/ instead of replying on others thread as it makes the thread messy and hard to read.

If you want to you can also add reference of this thread in your newly created thread.

We would be more than happy to help you on your new thread.