Return to previous page

Slider image is cropped in mobile view, but visible in desktop view.

This topic has 9 replies, 3 voices, and was last updated 2 years, 4 months ago ago by Rose Tyler

Saira

Participant

July 4, 2022 at 07:24

Slider image is cropped in mobile view, but visible in desktop view. How can I adjust the image in mobile view only.
https://snipboard.io/psDUnI.jpg

#328228 Copied Theme version: 0.0.1

8 Answers

Rose Tyler

Support staff

July 4, 2022 at 07:42

Hello,

Do you mean background image of slide? I found the following guide that might help you: https://www.sliderrevolution.com/documentation/slide-background https://www.sliderrevolution.com/documentation/responsive-setup
And https://prnt.sc/KZm09LLij1my read more https://www.sliderrevolution.com/documentation/module-layout/

Regards

#328231 Copied

Awais Ahmed

Participant

July 4, 2022 at 07:46

Hello, @Saira,

If you use the image as the BG image for the slider + background-size “cover” you need to understand that image will be cropped on different devices because background-size “cover” works in this way https://cssreference.io/property/background-size/

You are using Slider Revolution on your site, so you have to go to Slider Revolution and edit the particular slider and then you have to go to Slide Option and under it change the BG fit as per your requirements: https://postimg.cc/TyqDpxF2

Regards 8Themes Team.

#328233 Copied

Saira

Participant

July 4, 2022 at 07:56

Hi,
On changing this option for mobile view, the desktop view is also changing and the background image is changing. How can I set the option only for mobile view.

#328234 Copied

Awais Ahmed

Participant

July 4, 2022 at 08:36

Hello, @Saira,

You can set an option for each layout in the slider revolution plugin settings. Here is complete documentation for it: https://www.sliderrevolution.com/documentation/responsive-settings/ also here is the detailed video for a better reference to understand: https://www.youtube.com/watch?v=IPaUF8UEdz8&t=173s

Regards 8Themes Team.

#328238 Copied

Saira

Participant

July 8, 2022 at 09:54

When I switch from Desktop to Mobile view, I can see the grid layer (the small blue dots) becoming smaller and the background image being cropped. Except that the grid layer I get doesn’t focus on the part of the background image I want. How can I make the image centred or without getting cropped.
https://snipboard.io/cW0N9X.jpg

#329202 Copied

Awais Ahmed

Participant

July 9, 2022 at 06:58

Hello, @Saira,

To show the background image without cropping and appear center. Always set the background image to contain not cover. As you can see in the screenshot: https://postimg.cc/N9gY5dG0 there is an option to set the background to contain.
Simply set it and then check the results I hope your issue will be resolved.

Regards 8Themes Team.

#329242 Copied

Saira

Participant

July 11, 2022 at 06:39

On setting this option, white space is appearing on top and bottom of the slider.
https://snipboard.io/541tRQ.jpg

#329310 Copied

Rose Tyler

Support staff

July 11, 2022 at 14:00

Hello,

Yes, because you need to change size of the slider for mobile – https://prnt.sc/XmCNHUVTFg0e

Regards

#329348 Copied
Tagged: crop, desktop, image, mobile, slider, templates, woocommerce, wordpress
Viewing 9 results - 1 through 9 (of 9 total)