Hi guys,
I am starting this as its own thread since the other has apparently fallen off the radar. If you take a look at http://codelessme.com/casey/abstracts/ and /figures, on tablet and smartphone, the 4th row center image is displaying with a different height than the others. This is causing 2 white spaces to appear on tablet and smartphone. Ismael helps resolve on desktop, but these two issues still exist.
I was provided with
@media only screen and (max-width: 767px) and (min-width: 480px) {
#top div .avia-gallery img {
max-height: 132px;
}
}
on the 21st by Ismael, but it did nothing. Any more help would be greatly appreciated. This is the only speed bump keeping this project from completion.
Thanks,
David
Hey David!
The code above target the mobile screens like iPhone etc. Please add this below:
@media only screen and (max-width: 989px) and (min-width: 768px) {
#top div .avia-gallery img {
max-height: 217px;
}
}
Best regards,
Ismael
Hey Ismael.
Have now added the new snippet and getting the same results. It is that single image on both galleries for some strange reason.
This is now what I have in total for this image ordeal
#top div .avia-gallery img {
max-height: 333px;
}
@media only screen and (max-width: 767px) and (min-width: 480px) {
#top div .avia-gallery img {
max-height: 132px!important;
}
}
@media only screen and (max-width: 989px) and (min-width: 768px) {
#top div .avia-gallery img {
max-height: 217px;
}
}
Please don’t create duplicates like this. We are getting an abnormal spike in support requests so things will be delayed.
I’m closing this one so the other can be picked up where it was left off.