Index Image resize on Mobile Device SS7.0

Site URL: https://www.greenconltd.com

Hi All

Just looking for some help with mobile specific code please.

Website: www.greenconltd.com

I have an index page being used as a home page using projects to categorise sectors of a business. It displays as required on desktop but there's a bit too much dead space on mobile devices.

Ideally, I'd like for the index pages to display below one another as they currently are, but so that they're both visible on screen as you visit the website - either by scaling or reducing the padding

I've tried targeting the blocks but I'm not having much luck in achieving the desired results at the moment.

Any help appreciated.

Hi. Can you take screenshot space? We can give the code to remove space on mobile

Hi!

Screenshot from mobile attached.

I'd like to reduce the top and bottom padding for both images please

Thanks

On 3/15/2021 at 5:40 PM, richardgreencreative said:

Hi!

Screenshot from mobile attached.

I'd like to reduce the top and bottom padding for both images please

Thanks

You can add 4 images, 2 for desktop, 2 for mobile. We will give the code to hide mobile images on desktop an vice versa.

Hi @tuanphan

I know that this from a while ago but just picking it back up again.

If possible, I'd like to use different images on mobile so that the dead space is reduced.

and, 2. make it so that they both display side-by-side on tablet as they do on desktop. Is that possible please?

Thanks

On 3/23/2021 at 8:41 PM, tuanphan said:

You can add 4 images, 2 for desktop, 2 for mobile. We will give the code to hide mobile images on desktop an vice versa.

You can do this, then we will give the code to make side by side on tablet

How's best to go about adding the two images for mobile in this scenario?

The current images displayed are through the index page setting in the Media Banner/Thumbnail?

Am I best uploading the images I want for mobile in the custom files area and providing the links to the image.

Thanks as always for your help

On 9/9/2021 at 6:48 PM, richardgreencreative said:

How's best to go about adding the two images for mobile in this scenario?

The current images displayed are through the index page setting in the Media Banner/Thumbnail?

Am I best uploading the images I want for mobile in the custom files area and providing the links to the image.

 

Thanks as always for your help

ah okay, you can consider remove space within image, then we will try CSS to add grey padding around image, same as grey in current image.

Hi @tuanphan

I've just replaced the images so that there's less space around the logos within the image file itself.

Does this look sufficient now to work with?

Thanks as always!

Hi @tuanphan

Looks like I've managed to figure that out! Thank you