How to Make Images Larger on Mobile Without Affecting Desktop

This method essentially creates separate image elements for desktop and mobile views, allowing you to customize each one independently. For more information, refer to this article.

Step 1: Duplicate the Image Section

• In the GemPages editor, locate the image you want to modify.
• Click on the image to select it.
• Use the Duplicate function to create a copy of this image. This duplicate will be used for the mobile version.

Step 2: Configure Visibility Settings:

For the Original (Desktop) Section:

• Select the original image.
• Navigate to the Advanced tab in the left sidebar. Find the Display on section.

• Ensure that only the Desktop option is enabled. This setting will make the section visible only on desktop devices.

For the Duplicated (Mobile) Section:

• Select the duplicated image.
• Go to the Advanced tab in the left sidebar. Locate the Display on section.

• Enable only the Mobile option. This configuration ensures the section appears exclusively on mobile devices.

Step 3: Adjust the Image Size for Mobile

• With the mobile-specific section selected, click on the image to access its settings.

• In the Settings tab, look for the Width / Height options.

• Increase the image’s width and height to your desired dimensions. 

For more details on changing the image size, please refer to this article.

Step 4: Preview and Test

• Use the device preview icons at the top of the GemPages editor to switch between desktop and mobile views.

• Ensure that the image displays correctly on both versions: the original size on desktop and the enlarged size on mobile.
• Make any necessary adjustments to padding, margins, or other styling settings to achieve the desired appearance on each device.

For more information on responsive web design and visibility settings in GemPages, refer to this article.