Hi again,

just checking... is there somewhere in Salient an in-build function to replace desktop images on mobiles?

I'd like to load different (more square-ish / portrait) images on mobiles as the desktop landscape images appear fairly small.

Or should this be done via custom css?

Thanks.

OK. Please could you give me the css code to target the first image you see on this page? The large full width photo.

https://florianz29.sg-host.com/work/orme/

I've replaced images on mobile before via css but not being a particularly good coder, it'd be good to see what you guys suggest ;)

Thanks.

Yes - thanks. I've tried this by setting mobile max width to 200%. It sort of works and doesn't look too bad but it'd be nice to be able to upload a specific mobile image that has been created and cropped with mobile in mind.

I've replaced images on mobile before via custom css but not being a particularly good coder, it'd be good to see what you guys suggest ;)

Ah, of course. Yes. Much cleaner that way.

I'll be using the method as you advised and just tweak my images in a way that they look good regardless which viewport.

Thanks for your help!

Hi, I just played around with the Mobile Max Width and encountered one issue:

How do centre the enlarged image? I've set the 'mobile max width' to 175% and it displays the image zoomed in on mobile. However, the image is left aligned. I've set 'Image alignment' to 'centre' but the image is still left aligned.

Any way to centre the image?

(See top image on https://florianz29.sg-host.com/work/orme/. It should show the middle smartphone in the centre of the screen.)

Many thanks as always.

I don't have that option as the images is added as a 'Single image'. I'm looking for a way to centre a 'Mobile Max Width: 175%' single image.

Adding an image as a background image wouldn't be ideal as it's so hard to control how the browser crops them. We'll be showing our work in our portfolio and background images tend get cropped depending on browser width.

Any way you can help me with this?

Thanks.

Hey,

I managed to centre a single image at 175% Mobile Max Width with this css and it seems to work: 

@media only screen and (max-width: 690px) {
.img-with-aniamtion-wrap.center[data-max-width-mobile="175%"]:not([data-max-width="75%"]):not([data-max-width="50%"]) .inner

{margin-left: -38%!important;}
}

I tried that because noticed that I can left, right align and centre images that have been added as single images. Centring wouldn't work for some reason at 175% but it does at 200%. Maybe a little bug in your code?