Modify mobile devices layout without affecting the desktop version

Hello!

I was wondering if there’s a way to modify the site’s layout for mobile devices without affecting the desktop version. I’m not very sure how to get my point across, so I’ll provide you an example of what I’d like to do.

The screenshot below is from the desktop version. As you can see, the “Hi there!” image is big and fits the screen perfectly:

However, take a look at the next screenshot. This is taken from a mobile device, and as you can see, in order to fit the screen, the image got smaller. Please compare the size of the text below it so you can get a feel of what I’m trying to convey.

What I’d like to do is to upload a new modified image that could properly fit the screen, but I’d like to keep the image I already have for the desktop version, and have the new image reflected in mobile devices only.

Is there a way to modify the mobile device’s layout without affecting the desktop version? If so, how do I do it?

My website: http://stsloc.com/

Hope you can help me out with this one!

Thanks in advance!

Cheers,

Luciano

Hi Luciano,

You will insert two image blocks and apply some CSS code to show/hide them on certain screen size. First image is for desktop and the second one is for mobile version. Then do these steps:

  1. Add custom class name to the fist image: show-on-desktop
  2. Add custom class name to the second image: show-on-mobile
  3. Update page
  4. Add this CSS code to Appearance > Customize > Additional CSS from dashboard.
    @media only screen and (min-width: 671px) {
      .show-on-mobile {
        display: none;
      }
    }
    @media only screen and (max-width: 671px) {
      .show-on-desktop {
        display: none;
      }
    }

P.S.:

You can find the additional CSS class(es) option in the block’s Advanced setting in the editor sidebar when the block is selected. Refer to the below screenshot for visual guide.

Regards,
Kharis
aThemes Support

1 Like

Hi Kharis,

Sorry for my late reply. Work has been overwhelming these past few days.

Thanks a bunch for your answer! I still don’t have the image to try it out, but I’ll certainly let you know as soon as I do. Hopefully, it’ll pan out.

Have a great day!

Luciano

Hi Luciano,

Thank you for updating me. Sure, I will be happy to wait.

Regards,
Kharis
aThemes Support