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