Return to previous page

Image carousel too big on mobile display

This topic has 8 replies, 4 voices, and was last updated 8 years, 7 months ago ago by Brian Johnson

danielpark

Participant

September 7, 2015 at 14:44

Hello,

On my homepage, I have one big picture following with image carousel of the menu.

It seems fine when viewed from the screen, but when it is seen from mobile devices, which means the the width of the page shrinks, the image carousel turns to be as big as the front picture of the page.

Can you offer me an advice how to shrink the image carousel proportional to the big front picture?

It might be better to take a look at my site on PC as well as on mobile device for your reference.

http://www.jwddm.co.kr

Thanks in advance.

#85079 Copied Theme version: legenda WooCommerce version: 4.3

7 Answers

Eva Kemp

Support staff

September 7, 2015 at 18:49

Hello,

Try to use Image Carousel element in Visual Composer editor.

Thank you.
Regards,
Eva Kemp.

#85152 Copied

danielpark

Participant

September 10, 2015 at 05:40

Hi Eva,

Thank you for your advice but image carousel has been created under Visual Composer editor already.

#85808 Copied

Jack Richardson

Support staff

September 10, 2015 at 07:42

Hello,

Are you talking about this carousel http://storage8.static.itmages.com/i/15/0910/h_1441867146_6837787_dfc9050880.png ?
As I see it’s added via text element http://storage3.static.itmages.com/i/15/0910/h_1441867291_6976558_a7ca786b01.png and not Image Carousel in Visual Composer.

Best regards,
Jack Richardson.

#85841 Copied

danielpark

Participant

September 17, 2015 at 12:11

Hi Jack and Eva,

I cloned the same page but separated single image with image carousels.

http://www.jwddm.co.kr/home-page-2/

The problem is the same. Size of image carousel is not shrinking when width of the browser is narrower.

Best regards,

#87507 Copied
Eva Kemp

Support staff

September 17, 2015 at 13:37
Hello,

I’ve added this code in custom.css file:
```
@media (max-width: 480px) {.sow-carousel-title a.sow-carousel-next, .sow-carousel-title a.sow-carousel-previous {
    display: block !important;
}}
```
and now carousel is shown this way on mobile:
http://storage5.static.itmages.com/i/15/0917/h_1442493361_3564021_e30859c1a5.png

Please check.

Regards,
Eva Kemp.
#87541 Copied
danielpark

Participant

September 18, 2015 at 04:15

Hi Eva,

Thank you very much for your help!

Can we have the carousel smaller than that? I tried modifying max-width from 480px to 280px but no visual change has been shown.

Best regards,

#87735 Copied
Brian Johnson

Member

September 18, 2015 at 05:14
Hello, danielpark
Please try this code in custom.css:
```
 @media (max-width: 480px){ 
.so-widget-sow-post-carousel{
width: 60%;
margin-left: auto;
margin-right: auto;}}
```
Regards,
Brian Johnson
#87741 Copied
Viewing 8 results - 1 through 8 (of 8 total)