Carousel 1 visible slide on mobile

I have:

– full width row
– information box carousel with 6 info boxes

On mobile instead of a single info box I get 2 and those get squished so much that they take almost 100% vh.

How to display a single carousel item on mobile?

There should be this option in the future updates

Hello,

Please deactivate all the plugins not related to the theme and switch the parent theme, check the issue, if the problem remains, leave the plugins not activated and provide the site admin access to the private area

Best Regards

Just did that. Problem still there. Could you please check it out?

Hello,

I cannot reach your site https://prnt.sc/rrckal

Best Regards

Hi Elise,

Which country are you accessing from? so I can unblock it

Hello,

My country is Ukraine. My IP is 5.248.118.5

Best Regards

Check now please. Ukraine is unblocked

Hello,

I cannot login. https://prnt.sc/rrs95t

Best Regards

I enabled all ips and all countries Elise. Sorry for the inconvience, please try now.

The carousel addon(s) is so weakly made that it shouldn’t be part of the theme.

I get 1/1 width on mobile only if I have 4 slides and 4 elements to display. Anything else generates 1/2 + 1/2 slides on mobile.

On certain breakpoints the slides get so thin they destroy the layout of the page. You should set a min width for the elements.

Attachments:

You must be logged in to view attached files.

Hello,

I cannot enter the site. What do you mean saying ” it shouldn’t be part of the theme.”? Do you mean third parties Information box?

Best Regards

Hi Elise,

I am talking with the hosting company about what is hapenning.

The carousel is simply poorly written and it was rolled out too soon.

See the attachment from my prevoius post. Also is producing two columns on mobile.

Hi Elise,

The hosting company said that now you can access 🙂

Hi Elise,

I think you’ve pasted the wrong link?

I barely can read cyrillic, but from what I can see there is some talk about SEO Yoast, which I suppose is not my case 🙂

Hello,

Your Infobox carousel is displayed as one block on mobile: https://prnt.sc/rsavxn

Best Regards

sure. as I’ve written before. When I set 4 infoboxes per 4 slides displayed.

Check now and you will see 2 columns.

Hello,

I am checking and I see one block https://gyazo.com/6208bc2bb04ec02da5f8b4dccfee327b

Best Regards

You are checking the wrong page:

Hello,

You can customize the carousel. Add this code to the functions.php file of the child theme:

add_filter(
   'woodmart_info_box_shortcode_custom_sizes',
   function() {
      return array(
         'desktop'          => 4,
         'tablet_landscape' => 4,
         'tablet'           => 3,
         'mobile'           => 2,
      );
   }
);

This code would apply to all the Infobox carousels.

Best Regards

I will do that. Hope you solve in the next update.

Where I can post suggestions / bugs?

Hello,

There is the topic “Feature Request” you can send you suggestions. When there is a bug occur, deactivate all the plugins not related to the theme check the issue, if the problem remains, leave the plugins not activated and create a separate topic here.

Best Regards

Hi Elise,

I’ve installed the child theme and edited functions.php file, yet there are still 2 columns on mobile intead of one. It stays the same even if change

‘mobile’ => 2,

to

‘mobile’ => 1,

Hello,

Your site is not workable now. I can not check.

Best Regards

Should be working. Probably server a server uptime issue.

Hello,

No, it does not work. I checked several times.

Best Regards

Hi Elise,

I’ve pasted the code in functions.php, no changes. Made 2 carousels instead, one for mobile and one for desktop.

I thought that this solution would fit, but no…

On smaller desktop screens the elements still get become way too narrow. I think it’s an waste of time to be making a third version for tablets. Also making 3 carousels for each viewport seems a bit too much…

Hello,

Now you have 1 item on mobile https://prnt.sc/sbq116

Please clarify the issue.

Best Regards

Yes because I have one carousel for mobile and one for desktop and I exclude them in the column visibility options in Visual Composer. For smaller desktop sizes and tablets the rows get still too narrow.

Your carousel element is seriously flawed.

So basically If wanted to get rid of it I have to make a 3d for tablet/ small desktop viewports.

C’mon guys,

This is happening because you haven’t specified a min-width for the carousel elements.

Check the video: https://drive.google.com/file/d/1r5OK9XdB7vjeyeU0C_Hh9fy_uoD1oYX1/view

Hello,

We have 4 breakpoints for responsiveness: desktop, tablet landscape, tablet, mobile.

Here is the code, it will change all the infobox carousels items number per row, you just need to specify number for each breakpoint.

add_filter('woodmart_info_box_shortcode_custom_sizes',
   function() {
      return array(
         'desktop'          => 6,
         'tablet_landscape' => 4,
         'tablet'           => 3,
         'mobile'           => 1,
      );
   }
);

Unfortunately, it is not possible to set different items number in a row for each infobox carousel individually. The code can change all carouses.

Alternatively, you can create a separate carousel for each breakpoint.

Best Regards

[Author]

Posts