Hello, I have a Theme with flex-slider.
On desktop it looks great, but on mobile the image is too small for the text overlay, as you can see in the image below.
The website is https://homeoffice4us.com.
How can I change the image and container in the mobile view to display just a portion of the image (crop),
and have enough room for the text overlay to be shown correct?
I guess I can somehow make the changes in
flex-slider.css.liquid
Does anyone have an idea?
here is the code for flex-slider.css.liquid:
/* slideshow-homepage-------------------------------------------------------------------- */
.home-slideshow{position: relative;}
.home-slideshow .slider-content{
position: absolute;
top: 50%;
left: 0;
right: 0;
width: auto;
margin: auto;
text-align: center;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
max-width: 80%;
visibility: hidden;
opacity: 0; width:100%;
}
.home-slideshow .slick-active .slider-content {
z-index: 9999;
visibility: visible;
opacity: 1;
}
.home-slideshow .slick-slide img:hover{opacity: 1;}
.home-slideshow .slick-slider .slick-arrow {
position: absolute;
top: 50%;
z-index: 50;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
outline: none;
}
.home-slideshow .slick-dots{display:none!important}
.slick-arrow {height:60px;line-height:60px;}
.home-slideshow .slick-next {
right: 3%;
}
.home-slideshow .slick-prev {
left: 3%;
}
.home-slideshow .slick-arrow {
font-size: 0px;
background: none;
border: none;
}
.home-slideshow .slick-next:before {
content: “\f105”;
}
.home-slideshow .slick-arrow:before {
font-family: FontAwesome;
color: #fff;
}
.home-slideshow .slick-prev:before {
content: “\f104”;
}
.home-slideshow .slick-arrow:before {
font-family: FontAwesome;
font-size: 60px;
}
.slick-slide img{ margin: auto;}
.slick-arrow:before, .slick-arrow:before{opacity: 0;}
.home-slideshow:hover .slick-arrow:before, .home-slideshow:hover .slick-arrow:before{opacity: 1;}