feature image slider mobile optimisations

Hello,
first of all I want to say, that I’m really happy with the sparkling theme! Good work!

Nevertheless, I was not happy with the slider image sizes on mobile view. I’m using the recommened image size of 1920x550 (see https://colorlibsupport.com/t/featured-image-size-main-page/#post-108371) but on mobile devices the image has a very small height due to the given aspect ratio (1920x550). I would prefer a larger height even if the image is cropped left and right and I wanted to show the caption and description also on mobile screens.
I didn’t found a solution in the forum yet, so I tried to solve it myself:

My solution only uses custom css, no need for php-code changes or anything else.
These are the css-adjustments which I put under custom css-section of theme:

/* ----- Mobile optimisations ----- */
$fi-height-mo: 300px;
@media (max-width: 768px){
.flex-caption {
    display: block;
    font-size: 12px;
    top: 10%;
}
#page .flex-caption h2.entry-title{
  font-size: 16px;
}
/* change image height */
.top-section .flexslider {
	height: $fi-height-mo !important;
}
.top-section ul.slides {
	height: $fi-height-mo;
}
.top-section img {
	height: $fi-height-mo;
	max-height: $fi-height-mo;
	object-fit: cover;
}
.top-section a {
	height: $fi-height-mo;
}
.top-section li {
	height: $fi-height-mo;
}
.top-section div .flex-caption {
	height: $fi-height-mo;
	margin-top: -20px;
}
}

I’m using sass preprocessor to support variables, so please ensure to also enable it at the bottom of the additional css-page or replace the $fi-height-mo with your preferred height.

The trick to crop the image is done by “object-fit: cover;” which is supported on all most popular mobile browsers (http://caniuse.com/#feat=object-fit). I tested it on a Nexus 5X with chrome and there it works as a charm.
See attached image for the final result or see it live on my blog under: http://blog.guppyware.net.

Yours, Martin

Hi @guppy81,

I hope you are well today and thanks for helping out here in this forum by sharing the solution.

Your help here is really appreciated.

Best Regards,
Movin

I had the same problem, can’t solve it using the method because my hosting doesn’t support sass preprocessor and i am a newbie with css.

I contacted the @guppy, and this guy is amazing, help me quickly.

SOLUTION:

replace every occuring “$fi-height-mo” variable with 300px (or any value your need)

My code working:

/* ----- Mobile optimisations ----- /
@media (max-width: 768px){
.flex-caption {
display: block;
font-size: 12px;
top: 10%;
}
#page .flex-caption h2.entry-title{
font-size: 16px;
}
/
change image height */
.top-section .flexslider {
height:350px;
!important;
}
.top-section ul.slides {
height: 350px;
}
.top-section img {
height: 350px;
max-height: 350px;
object-fit: cover;
}
.top-section a {
height: 350px;
}
.top-section li {
height: 350px;
}
.top-section div .flex-caption {
height: 350px;
margin-top: -20px;
}
}

Thank you for sharing your solution :slight_smile: