Problem with slider borders on mobile

  • I am developing a site and have everything almost perfect when I look on my laptop. However when I view the site in Chrome on Android there is a quite a gap between the green top and bottom borders above and below the slider. I have changed the slider height to 350px from 500px at my client’s request but it was doing it before the switch anyway. I’ve searched the CSS for borders, margins, padding etc and can’t figure anything out. Little help?

    https://wp.starbellydesigns.com

    Thanks!
    Tom

Viewing 1 replies (of 1 total)

  • You’ve already worked out that you need to play around with the

    .carousel .item {
    line-height: 350px;
    min-height: 350px;
}

    declarations. But you need to do it for every screen size that has been set in the original CSS. Each screen size corresponds to a “media query”. The original <colour>.css has the following settings:

    /*Base */
.carousel .item {
	line-height: 500px;
	min-height: 500px;
}

/* @media (max-width: 1200px) */
.carousel .item {
	line-height: 385px;
	min-height: 385px;
}

/*@media (max-width: 979px) */
.carousel .item {
	line-height: 309px;
	min-height: 309px;
}

/*@media (max-width: 767px) */
.carousel .item {
	line-height: 308px;
	min-height: 308px;
}

/*@media (max-width: 480px) */
.carousel .item {
	line-height: 190px;
	min-height: 190px;
}

/*@media (max-width: 320px) */
.carousel .item {
	line-height: 140px;
	min-height: 140px;
}

    More on media queries at the themesandco site.

Viewing 1 replies (of 1 total)
  • The topic ‘Problem with slider borders on mobile’ is closed to new replies.