Show different sections for mobile vs desktop

Site URL: http://www.munchum.com/home-page

I want to hide the 2nd landing image on desktop, and hide the 1st one when viewing on mobile.  

We can target device widths with CSS, so I'd suggest playing with the widths & resizing your window or checking on your phone to get the desired effect you want... That said, this CSS should hide the second section on devices/windows larger than 750px and hide the first (display second) on devices/windows smaller than 750px.

@media only screen and (max-width: 750px) {
    .page-section:nth-of-type(1) {
        display: none;
    }
}

@media only screen and (min-width: 750px)  {
    .page-section:nth-of-type(2) {
        display: none;
    }
}

@mess_cal I tried that, but it didn't work.  

How did you test after you added the code @kal2ennn? I just tested the same code again over here on Chrome/Firefox and it seems to behave correctly.

14 hours ago, kal2ennn said:

@mess_cal I tried that, but it didn't work.  

If the code doesn't work, you can add this to Home > Settings > Advanced > Code Injection > Header

<style>
  @media only screen and (max-width: 750px) {
    .page-section:nth-of-type(1) {
        display: none;
    }
}

@media only screen and (min-width: 750px)  {
    .page-section:nth-of-type(2) {
        display: none;
    }
}
</style>

Sometimes he copies missing characters, or pastes the wrong position, causing syntax error to occur & the code doesn't work (I have many cases when answering questions)

13 hours ago, mess_cal said:

How did you test after you added the code @kal2ennn? I just tested the same code again over here on Chrome/Firefox and it seems to behave correctly.

@tuanphan@mess_cal Thanks, it's working now.  I put it on www.munchum.com/home-sale , but now my footer disappears on. mobile.  When I remove the code, the footer shows up, but obviously, 2 landing images show up in that case. 

Any idea?  TIA

On 11/19/2020 at 5:01 AM, kal2ennn said:

@tuanphan@mess_cal Thanks, it's working now.  I put it on www.munchum.com/home-sale , but now my footer disappears on. mobile.  When I remove the code, the footer shows up, but obviously, 2 landing images show up in that case. 

 

Any idea?  TIA

 

The url doesn't exist. Can you check again?