Images Not Optimised for mobile
HSNM Front-end Welcome Portal general discussion about HTML, CSS, layout, custom apps, templates

Rate this topic
   Post Reply
6 posts   •   Page 1 of 1
StephenAlfreds
Posts: 10
Joined: 26 Oct 2017, 10:18

Images Not Optimised for mobile

by StephenAlfreds » 26 Oct 2017, 12:00

Hi @Marisa
I'd like to know how to have images optimise for mobile use. I've uploaded the images and they seem set for laptop screens and not mobile screens. How do I change this?

HSNMSupport
Posts: 1529
Joined: 26 Jul 2016, 09:16

Re: Images Not Optimised for mobile

by HSNMSupport » 26 Oct 2017, 12:18

Hi StephenAlfreds,

HSNM already resizes images that you upload in the system. Then, quality of views of those images depend on the resolution of the device (phone, tablet etc...).

What would you like to be your goal? Would you like to be able to upload an image for any, most used, devices' resolution?

Let me know.

Best Regards.

StephenAlfreds
Posts: 10
Joined: 26 Oct 2017, 10:18

Re: Images Not Optimised for mobile

by StephenAlfreds » 26 Oct 2017, 14:24

Hi StephenAlfreds,

HSNM already resizes images that you upload in the system. Then, quality of views of those images depend on the resolution of the device (phone, tablet etc...).

What would you like to be your goal? Would you like to be able to upload an image for any, most used, devices' resolution?

Let me know.

Best Regards.
Currently the  background image doesn't scale when viewed on mobile. I'd like to know how to optomose so that it when viewed on a mobile device

Alex
Hsnm Support
Hsnm Support
Posts: 50
Joined: 23 Sep 2015, 11:48

Re: Images Not Optimised for mobile

by Alex » 27 Oct 2017, 12:00

Hi, the image scale in order to be 100% width and 100% height, so the background cover the entire screen of the device. If you want to change this behaviour and make the background image fully visible you need to edit the css inside the template simply by adding these few lines of code:

#WP_FullScreenAd {
background-size:contain !important;
background-position:center!important;
}

if you want to have the background image height 100% and aligned center you need to use this code:

#WP_FullScreenAd {
background-position:center center !important;
}

Bye thank you.

StephenAlfreds
Posts: 10
Joined: 26 Oct 2017, 10:18

Re: Images Not Optimised for mobile

by StephenAlfreds » 01 Nov 2017, 13:56

Hi, the image scale in order to be 100% width and 100% height, so the background cover the entire screen of the device. If you want to change this behaviour and make the background image fully visible you need to edit the css inside the template simply by adding these few lines of code:

#WP_FullScreenAd {
background-size:contain !important;
background-position:center!important;
}

if you want to have the background image height 100% and aligned center you need to use this code:

#WP_FullScreenAd {
background-position:center center !important;
}

Bye thank you.
Hi

I've tried adding the CSS and still it doesn't optomise for mobile. It keeps a landscape dimension. Thanks so much or your help so far

Alex
Hsnm Support
Hsnm Support
Posts: 50
Joined: 23 Sep 2015, 11:48

Re: Images Not Optimised for mobile

by Alex » 02 Nov 2017, 10:50

Hi, I double check the code and it seems to work fine on my hsnm. Can you tell me exactly where you paste that code? Inside the "Custom CSS applied to the Welcome Portal" on the main page of the editing page of the template or inside the custom css for info or login app? Thank you! 

Rate this topic

Who is online

Users browsing this forum: No registered users and 7 guests

It is currently 29 Mar 2024, 00:42