Using a different image for Full Page Scroll for Mobile

Follow

Rong Huiying

• November 24, 2021 01:29

Hello,

How do we set a different home page background image to be used at the full page scroll for mobile versus desktop.

I tried setting up a different class called tocmobile and then hide in the CSS when the breakpoints provide but that doesn't seem to work.

I would like to display a different image for Portrait mobiles versus Landscape Desktop.

Thank You

0

• 

  Jill Seeman

  • December 12, 2021 02:42

  Hi,

  I found I had to put the different classes CSS in my custom_less file in my child theme as the CSS in the breakpoints on the full page scroll never worked for me either.  Here is the code I used in my CSS.

  Hope this helps.

  @media only screen and (max-width: 760px) {
  .desktop {
  display:none;
  }
  }

  @media only screen and (min-width: 760px) {
  .mobile {
  display:none;
  }
  }

   

  0

  Comment actions Permalink

Please sign in to leave a comment.