Change post carousel height in mobile view

Support
#1

I have used the custom css option to adapt the Ethos Post Carousel to my liking but I’m stuck with a last problem.

I’d like to reduce the height of the items on mobile and keep them square. When resizing the screen down to two items they get rectangular in shape.

the page is https://12mal12.com/

#2

Hey,

Thanks for using our theme!

I have checked your blog and you can decrease the carousel height adding following CSS under the code below to X > Launch > Options > CSS

      .x-post-carousel.unstyled .entry-cover {
          padding-bottom: 132px !important;
      }
      .h-entry-cover:before {
         height: 4em !important;
      }
}```
#3

This did the trick! Thank you.

Follow up question: How can I get rid of the unused white space in x-post-carousel unstyled slick-initialized slick-slider

Seems like I need to reduce its height.

Thank you!

#4

Hi There,

Please remove the max-width in this CSS:

.x-post-carousel.unstyled {
    max-width: 1250px;
    margin-left: auto;
    margin-right: auto;
}

It should be:

.x-post-carousel.unstyled {
    margin-left: auto;
    margin-right: auto;
}

Let us know how it goes!

#5

Hey, unfortunately not. I was talking about the whitespace between carousel & logo when downsizing/watching on mobile.

#6

Hi again,

To remove the gap between carousel and the logo, add the following code in your Customizer:

.x-post-carousel.unstyled {
    height: auto !important;
}

Cheers!

1 Like
#7

That did the trick. Solved!

#8

Glad it’s solved.

Cheers!