Return to previous page

Image resize depending on device & mobile swipe…

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

UcaseLtd

Participant

March 12, 2018 at 08:20

Hi there,

I would like to make my 1st image on homepage take up about 3/4 of the screen regardless of the device used (you can see this in action on noths.com).

The problem is that i need the image resize depending on device..

Desktop – Around 700px height
Tablet – Around 700 (landscape) / 500 (portrait)
Phone – Around 300px (landscape) / 500 (portrait)

1) Is there any way to make image resize in this way?

Also…
When using product slider on mobile there are no indicators that show visitor a swipe is available.
I tried setting “number of items on mobile” to 1.5 so they could see there were more products but this prevent swipe from working properly.

2) Is there a way to add visual swipe indicators (like you see on desktop hover)?

#187827 Copied Theme version: 4.2

9 Answers

Olga Barlow

Participant

March 12, 2018 at 17:26

Hello,

1) What element do you plan to use to add the image? Image VC element or Revolution slider and Hero Scene slider type https://www.themepunch.com/revslider-doc/slider-setup/#slidertype ?
If you plan to use default VC element – Image – it does not have the option to set the height of the image, height is auto depending on the width of the image.
If you plan to add that image using Revolution Slider and make it like slide bg then you’ll be able to set layers grid size https://www.themepunch.com/revslider-doc/slider-setup/#layers-grid-size for different devices and set even min-height.

2) What would you like to add: arrows(prev/next) or dots below the slider?

Regards

#187946 Copied

UcaseLtd

Participant

March 13, 2018 at 08:29

Hi Olga,

Thanks for your reply.

1) I would rather not use a slider as in the past they seem to really slow down my website. I have been using VC element but if it’s the only way? I’ll have to give slider another go.

2) Next to – Doesn’t work because when using full width on mobile it makes it too wide (so you get horizontal scroll). Ideally I would have an overlay but if that’s not possible then arrows underneath would be O.K.

Thanks.

#187987 Copied
Olga Barlow

Participant

March 14, 2018 at 09:38
Hello,

1) Image element does not have the option that allows you to change height depending on screen size.
Like workaround, you can use row and choose the background image. Also, set padding for your row using vh units then it will depend on screen height.

2) Add the following custom CSS to Theme Options > Custom CSS

@media only screen and (max-width: 768px){ .carousel-area .owl-nav { display: block; } .carousel-area .owl-nav .owl-prev { top: auto; bottom: 0; left: calc(50% - 50px); } .carousel-area .owl-nav .owl-next { top: auto; right: calc(50% - 50px); bottom: 0; } }

Regards
#188140 Copied
UcaseLtd

Participant

March 15, 2018 at 11:20

Hi,

1) – Thanks very much, I’ll give it a try.

2) – Unfortunately that’s not made any changes at all. I cleared my iPhone cache and tried it. I also checked at http://quirktools.com/screenfly/.

Please, contact administrator
for this information.

#188281 Copied
Rose Tyler

Support staff

March 15, 2018 at 14:57
Hello,

Please change the previous code to this one:

@media only screen and (max-width: 768px){ .carousel-area .owl-nav { display: block !important; margin-bottom: 40px; } .carousel-area .owl-nav .owl-prev { top: auto; bottom: -20px; left: calc(50% - 100px); } .carousel-area .owl-nav .owl-next { top: auto; right: calc(50% - 100px); bottom: -20px; } }

Regards
#188328 Copied
UcaseLtd

Participant

March 15, 2018 at 16:44

Really sorry but still can’t see any change.

#188359 Copied

Rose Tyler

Support staff

March 15, 2018 at 16:56

Please clear cache and check one more time http://prntscr.com/irmtaq

Regards

#188362 Copied

UcaseLtd

Participant

March 16, 2018 at 09:03

Fantastic!

Thanks very much!

#188425 Copied

Rose Tyler

Support staff

March 16, 2018 at 09:18

You’re welcome!
Have a nice day.

Regards

#188427 Copied
Viewing 10 results - 1 through 10 (of 10 total)