Debut - Different Hero for Desktop & Mobile

Store Design
1

Hello! I have been searching through old posts without finding a solution for this.

I have got two questions to try to solve the same problem: I am trying to make my website better for mobile users by having a solution for my hero image on mobile. The picture that I am using has a lot of information in the middle, meaning that text has to be positioned to the left or right in the image not to crash with the image info, on Desktop view I have positioned text to the left. But when in mobile mode the text overlaps with image information as only the center of the image is shown on mobile.

I see that this can be fixed in two ways: #1: Having hero image change when on mobile or #2: Having text and CTA Buttons be put under the hero image when in mobile mode.

Question 1:

How do I have the hero image change to another image when entering mobile mode? I am using the Debut theme.

Question 2:

How do I make it so that the text, (which on desktop view is placed on top of the hero image with overlay), is moved to below the hero image when in mobile mode?

2

You could try using PageFly builder App’s free plan for your homepage design. You’re able to have different images for different screen sizes and adjust padding.

3

@Eller I know that this works with the Debut theme as other shops have it. The problem is that when looking at paid themes they always lack some of the other features that I need, so I decided that I might as well go for the free debut theme and edit the code for what isn’t already included. Thanks for telling me about the Motion theme.

4

Thanks, @DiscountDale , will check it out.

5

Hi @Benjamin_Pwt

You can try PageFly - An advanced page builder app that has a free plan for you to explore.

What you are describing will be resolved with Basic elements in the PageFly app: Button, image, heading, and paragraph element.

An interesting thing is that you can choose different images for different devices: laptop, mobile.

Let’s check PageFly now with 24/7 support live chat (even in the Free plan).

And thank you @DiscountDale for recommending PageFly!