BlueOwlCreative » Topic: Images on mobile

Images on mobile

MOconcepts — Tue, 16 Feb 2016 20:53:32 +0000

Hi,

On mobile, the images don’t look so good. Is there a way to fix this?

http://dna.media-monkey.nl/

Thanks!

Reply To: Images on mobile

BlueOwl — Wed, 17 Feb 2016 09:26:32 +0000

Hi there,

Which images are you referring to? And by not look so good do you mean they get blurry?
If yes then the answer is simple – you have a Row with a background image that is set to “cover”. Since on mobile the row gets real tall and stretches – the background image also stretches in order to cover it – so it becomes a bit blurry.
Several ways you can approach this, either upload a larger size image in pixels or set a custom media query CSS that removes the image and sets a solid color background below a specific resolution.

Reply To: Images on mobile

MOconcepts — Wed, 17 Feb 2016 09:35:12 +0000

Hi,

I am referring to the images on top of most of the pages and on the homepage. They’re stretched out indeed and are becoming too big on mobile.

Removing the images on mobile is not an option. Would be nice if they are scaled in the right way.

Reply To: Images on mobile

BlueOwl — Wed, 17 Feb 2016 12:46:05 +0000

They are scaled in the right way, they are simply stretched because you have set the background image sizing propery to “cover”…

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Scaling_background_images

You could overwrite that property in mobile if you want with a media query.

Reply To: Images on mobile

MOconcepts — Wed, 17 Feb 2016 13:13:44 +0000

Ok, thanks.

How can I overwrite this with a media query?
Or shoud I set the image to ‘Contain’ instead? But this makes it rather small on mobile…

I am trying to figure this out, but is not working for me.

Thanks for your help!

Reply To: Images on mobile

BlueOwl — Wed, 17 Feb 2016 13:38:45 +0000

Contain does a different thing, make sure you understand the difference…
I can help you remove the “cover” property, what would you do then though, have the bgr images repeat? Your rows are rather tall so if you don’t repeat the background it will show at the start then the rest would be blank.
I just noticed your images are rather small – 1198 in width… do you have at least 1920w versions of the images, i think the quality would still be ok on mobile if you use larger images in size?

Reply To: Images on mobile

MOconcepts — Thu, 18 Feb 2016 09:15:32 +0000

I have used the same row settings as in the demo, so not sure if they are too tall.

If I add 1920w images, would that solve this issue? I will try that first, otherwise your help would be much apprectiated

Reply To: Images on mobile

BlueOwl — Thu, 18 Feb 2016 11:23:07 +0000

Ok, let me know.
There will still be some stretching, but they will surely look much better than the current ones.

Reply To: Images on mobile

MOconcepts — Fri, 19 Feb 2016 11:41:33 +0000

Ok, I can’t figure it out..

I have changed the image to 1920 x 400 on this page – http://dna.media-monkey.nl/cursus-spaans/

Now there’s an grey area below the image, but that could be fixed I guess. But on mobile the image is blown up and still huge and blurred.

Could you please advise how to fix this?

Reply To: Images on mobile

BlueOwl — Fri, 19 Feb 2016 16:21:58 +0000

Hi again,

You could remove the padding in this specific case for the mobile, thus the image won’t be stretched as much in order to “cover” the background and will look better.
For example, add this class to your Row – “remove_mobile_padding”, then add this to the Page inline CSS (Page Settings) in the top right (a Settings icon):

@media only screen and (max-width: 768px){
.remove_mobile_padding {
padding: 30px 0 20px;
}
}