Text and images not displaying properly on mobile devices

[technofleur]

Hi,
I installed Atelier and the Convoy demo and have been setting up our new online shop. I have a few issues that I hope you can help resolve.

1) My Swift Sliders don’t seem to resize properly on mobile devices. I used the demo content for the home page and simply edited the home page and the matching Swift Slider to suit our site. For the home page Swift Slider, I replaced the image and edited the caption and then changed the setting for the Horizontal Align Caption from left to right. Checking the site on mobile devices, I see that the caption text does not resize down to a smaller font. Also the image scales down but does not resize properly to suit the viewport screen size – especially on iphones – portrait. This is the same for the hero images on product category pages – they don’t scale down correctly and the sides are not visible. Also the home page takes a long time to load and once loaded there is often still the loading icon/wheel showing, even though the products have loaded.

2) I have set the product name, tags and Add to Cart box to be left justified under the product image. However, when you view site on a phone the text is centered but the Add to cart box is left justified.

Thanks in advance 🙂

[David Martin – Support]

Hi,

1) I am looking at this on the homepage, one issue is the height of the slider is relative to the width, the background image will fill this space as best it can, you can change this to resize the image perfectly for the width, however it will not be responsive for the slide content and slide height. Example CSS for you to test the difference:

.swiper-slide {
    background-size: contain!important;
}

2) Could you add a screenshot, I do not see this? – What device are you using?

Thanks,
David.

[technofleur]

Hi David,
Thanks for your reply! I finally got some time to try the css you provided and take some screen grabs from my iphone 5.

1) Images and Text in Swift Sliders for Convoy theme not scaling / not responsive
a) The css you provided affected the home page slider image only – not the text or button. Text and button are still huge when viewed on a phone. Also, the button is no longer on the image when in portrait mode and the image is smaller than the display width when in landscape mode. See screenshots: home_iphone5_portrait.png and home_iphone5_landscape.png to see issues.
b) The original issue of the hero images not scaling to fit the width of the device still exists for Swift sliders on other pages. Please see the Shop page ( http://purenaturesbaby.com/motherandbabyproducts/shop/ ) as an example. The smaller the mobile device, the less of the image is visible. I have attached screenshots: shop_iphone5_landscape.png and shop_iphone5_portrait.png

Your help with these would be much appreciated as I am keen to have the site fully responsive and mobile optimised.

2) Styling of product name, description and “Add to Cart” box not consistent. I set the product name, tags and “Add to Cart” box to be left justified under the product image. However, on the iphone the text is centered but the “Add to Cart” box is left justified. See screenshot called: shop_products_iphone5_landscape.png

Thanks,
Iris

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Hi Iris,

1)

The image height is relative to the width. The image cannot perfectly scale down with the content it has overlayed.

Please remove the CSS I provided that was illustrate the above.

To change the slider text size for small screens, you can use this:

@media only screen and (max-width: 767px) {
.swiper-slide .caption-content h2 {
    font-size: 18px!important;
    line-height: 34px!important;
}
a.sf-button {
    font-size: 10px;
}
}

2) Where have you added the code to make the button left justified? I do not see anything added?

Thanks,
David

[technofleur]

Hi David,
Thanks for your help so far. I tried the css you suggested but the home page banner still does not look good and the css does not affect the banners (hero images) on the other pages.

I need to find a solution so that the banner images on home page and other pages of the site scale down and look good on phones and tablets. Can you please advise if the revolution slider plugin which came with the theme is fully responsive and optimised for mobile devices? Should I use that instead of the Swift Slider?

Any other suggestions would be most welcome.
Thanks,
Iris

[David Martin – Support]

Hi Iris,

Sure, the Rev’ Slider is responsive.

The code I posted was specifically for small screens such as iPhone sizes.

An issue you have is because your image and text are the same thing, really you just need to have a background image, then the text should be overlayed content not part part of the image.

Thanks,
David.

[technofleur]

Hi David,
I have had exactly the same issue with the other pages for which there is only a background image. The images end up getting cropped at the sides of the smaller devices. I have already started using the Rev Slider and fixed the Home Page which is now optimised for mobile devices. But I don’t know how to add a rev slider to the woocommerce pages for different product categories. For example, can you please look at the Shop page ( http://purenaturesbaby.com/motherandbabyproducts/shop/ ). How would I go about adding a rev slider there?
Thanks, Iris

[David Martin – Support]

Hi,

Unfortunately, you can only add Swift Slider to the shop page currently. I’ll pass your feedback on though for future consideration.

Are you looking to get the embedded image text into the viewport on small screens? – Shrinking the image down like this would only be possible with this, however it would not look good:

@media only screen and (max-width: 767px) {
.fancy-style .page-heading.fancy-heading {
    height: auto!important;
    background-attachment: scroll!important;
    -webkit-background-size: contain!important;
    background-repeat: no-repeat!important;
}
}

Thanks.

[technofleur]

Hi David,
Thanks for all your help. I ended up adding a whole lot of custom css (using media queries) to scale the banner images and adjust widths, depending on the device viewport being targeted. Now the site looks good on all devices.

I have to say I am disappointed that the Swift Slider is not responsive and you cannot use the revolution slider on any of the woocommerce generated pages. It means that if you are using the Atelier theme for an online shop (as I am) the banners cannot be optimised for mobile devices and therefore the theme is not really fully responsive. I do hope Swift Ideas can address this issue in a future update, soon.

Regards,
Iris

[David Martin – Support]

Hi Iris,

Thanks for the feedback, I’ll pass this on – the theme is designed to be fully responsive within the boundaries of the content you are using.

Do you have any specific demo pages/or pages from your site that still use the Swift Slider? If you setup a test page, it will help me gather constructive feedback to passback to the team for future improvements.

Thanks.

[technofleur]

Hi David,

I have created a page with Swift Slider (login and preview the “Page with Swift Slider” page). You can see the images in the sliders are not responsive and do not scale down. However, the title text over the background images does scale because of the custom css I have added to the theme. Without my custom css, the text remains big on smaller devices and so overlaps the images and content of sliders or hero images. To get a better idea, you should review all the screen grabs I sent you (as attachments to previous posts for this topic).

Regards,
Iris

[David Martin – Support]

Hi Iris,

I can no longer login with the supplied details.

Thanks.

[technofleur]

This reply has been marked as private.

[technofleur]

This reply has been marked as private.

[David Martin – Support]

Hi Iris,

Thanks – if you add this CSS, then re-test the page. I’d suggest though you may need a larger height image to go with this CSS:

.swiper-slide {
    background-size: 100%!important;
}

Thanks.