Hi all,
many thanks for creating Enfold theme, we’re making good progress with it.
The Medical demo:
is not responsive. Specifically when you get down to phone size (either using a real phone or browser tools) the two buttons “Learn more” and “Make an appointment” disappear.
We discovered this because we are using the Medical demo as a basis for our site. At first we though it was our changes but I checked the vanilla demo and it has the same issue. Can you provide a fix please?
Just to be clear this is not an issue with our site, the problem exists on the demo http://kriesi.at/themes/enfold-medical/.
Many thanks for your time.
Adrian
Hi akriga!
Thank you for using Enfold.
It can be easily fixed with css. You can either increase the height of the slider itself or move the first column downwards.
@media only screen and (max-width: 767px) {
.flex_column_table.av-equal-height-column-flextable {
margin-top: -50px !important;
}
}
Please turn on the custom css class field which will enable you to apply unique selectors to the elements such as columns.
// http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/
Cheers!
Ismael
Hi Ismael,
thanks so much for your response.
The fix almost works, unfortunately it fails at phone (portrait) sizes where the Learn More button disappears.
Is it possible to update your fix to handle this please?
Cheers!
Adrian
Hi,
Try adding this code below Ismael’s code:
@media only screen and (max-width: 479px) {
#full_slider_1 ul.avia-slideshow-inner {
min-height: 240px;
}
#full_slider_1 ul.avia-slideshow-inner li img {
min-width: 600px;
position: relative;
left: -65%;
}
}
Hope this helps :)
Best regards,
Nikko
Hi Nikko,
this definitely helps, thank you very much indeed :-)
Regards,
Adrian