Mobile site completely different to preview of mobile site

Here is a screenshot showing the problem with my site on my mobile:
https://www.dropbox.com/s/6mt87ms8fzyy2lb/160511_screen%20shot%20from%20my%20mobile.png?dl=0

Turn off the Jetpack mobile theme module in your Jetpack settings. The module isn’t needed since Argent is already responsive, adapting automatically to different screen sizes.

Brilliant! Thanks so much, it all looks much more readable and the widgets are back.

I do still have an issue with the carousel in that some photos are stretched horizontally and some vertically. Could this be because I haven’t used a standardised image size originally when uploading?

Thanks again.

Could you please let me know:

– what specific mobile device you’re using (i.e. Nexus 7)
– what OS and version you’re using (i.e. Android 4.4.4 Kitkat) – visit https://whatismyandroidversion.com/ if you’re not sure
– what mobile browser you’re using (i.e. Chrome)

Sony Xperia Z3 compact (model D5803)
Linux Android 5.1.1
Chrome 50.0.2661.89

Thanks so much.

Thought it would be useful to add screen shots so you can see what is happening with the photos stretching. I’ve also just noticed that the photo labels are falling off the side of the photos on the mobile site.

Correct view on PC of Weathervane
https://www.dropbox.com/s/udfmt3w76tejiiw/160517_correct%20view%20of%20photos%20on%20carousel%20Weathervane.jpg?dl=0

Stretched view on mobile site of Weathervane:
https://www.dropbox.com/s/hjsmoqey8eqnyrc/160517_photo%20stretched%20height%20wise%20on%20carousel%20on%20mobile%20site%20of%20Weathervane.png?dl=0

Correct view on PC of Wonford Road:
https://www.dropbox.com/s/kcebtd35ysu9lyw/160517_correct%20view%20of%20photos%20on%20carousel%20Wonford.jpg?dl=0

Stretched view on mobile site of Wonford Road:
https://www.dropbox.com/s/9ovrg1rqyc1rse3/160517_photo%20stretched%20width%20wise%20on%20carousel%20on%20mobile%20site%20of%20Wonford%20Road.png?dl=0

Thanks.

Hi @katehds: Thank you so much for the screenshots. ??

Are the images in the carousel the only ones on your site that looks distorted while viewing your site on mobile devices?

I can see that you’ve used the WP Slick Slider and Image Carousel plugin to generate the carousels.

That plugin sets a minimum height for the images in the carousel. This is to keep all of the images the same height as each other, but also means that images are stretched in order to reach that minimum height.

As a quick workaround, you could add the following CSS to take away the plugin’s minimum height setting:

.slick-slide img {
    min-height: inherit !important;
}

I can see that you have Jetpack installed. To add CSS, please activate Jetpack’s Custom CSS module and then navigate to Appearance > Edit CSS. The above snippet can be added to the editor.

Please note, the above snippet will also make all of the images in your carousel different heights to each other. You could get around this by uploading images that are all the same size as each other.

If you’d like some further tweaks to the carousel, then please contact the plugin’s author directly via their forum here:

https://www.ads-software.com/support/plugin/wp-slick-slider-and-image-carousel

Thanks!

Hi
Thanks so much for your advice. I haven’t actually used plugins for the carousel and slick slider, they are part of the Argent Theme, but perhaps that doesn’t make a difference (I’m a beginner).

So I understand the principle of loading up photos of the same height and adding your suggested CSS workaround but what about where photos appear to be stretched width wise such as on the Wonford Road example above?

Also what about the labels that fall off the images as in the examples above?

In answer to your question yes it’s just the carousel photos that are distorted, as I don’t have many other images. If you looked at the Church Terrace project on my mobile you’d also see the images are mostly stretched width wise. https://hdsarchitects.co.uk/?portfolio=church-terrace

Thanks so much for your assistance.

Hi @katehds: After a second look, I can see that the Slick carousel is built into Argent. Apologies for not noticing that beforehand! I’m going to report back to the theme’s author and will let you know what I hear from them.

I’ll work on some custom CSS to help you with the problem until we hear back from them too. Watch this space for that. ??

Brilliant, thanks so much.

I’ve reported the issue back to the team, as promised, and will post here when they get back to me.

For now, please try adding the following to your custom CSS:

.slick-slide img {
    width: auto !important;
    max-width: 100% !important;
}

The above should force the theme to respect the correct widths of your images. It’ll keep them the same heights but different widths in your carousel. Can you give it a try and let me know how you get on?

Thanks!

Thanks so much, I appreciate it. I’ll give that a go tomorrow.

I am so HAPPY – that worked a treat- the photos are no longer distorted. Thank you very much.

I do still have the problem of the photo labels on the carousel falling off the left edge of the image when viewed on the mobile, as seen in the mobile views I sent links of above. Any ideas?

Thanks!

I’m so glad that the images are no longer distorted. ??

I do still have the problem of the photo labels on the carousel falling off the left edge of the image when viewed on the mobile, as seen in the mobile views I sent links of above. Any ideas?

Could you try adding the following to your custom CSS in order to push the caption further to the left on mobile devices?

@media screen and (max-width: 480px)
.carousel-caption {
    left: 15px;
}

Let me know how that goes!

Hi

I’ve put that in, but everytime I “save stylesheet” the line “left: 15px;” disappears and there is a blank line left in lieu.

I actually need to push the caption to the right and tried substituting “right: 15px;” by retyping rather than just copy and paste but again that line just disappears on saving.

Thanks!