Hi
I have some issues with the font size on the full width slideshow. On mobile I fixed it with the code below, but I can’t get it right on tablet. The font size should be smaller. How do I fix this?
Thank you in advance
@media only screen and (max-width: 767px) {
.avia-slideshow-inner, .avia-slideshow-inner img {
height: 300px !important;
}
.avia-slideshow-inner img {
min-width: 1000px !important;
margin-left: 200px !important;
}
}
@media only screen and (max-width: 767px) {
.home .av-slideshow-caption .avia-caption-title {
font-size: 20px !important;
}
.home .avia-caption-content p {
font-size: 16px !important;
}
}
Hey Fitematrulle,
Try the following:
@media only screen
and (min-device-width: 834px)
and (max-device-width: 1112px)
and (-webkit-min-device-pixel-ratio: 2) {
.avia-slideshow-inner, .avia-slideshow-inner img {
height: 300px !important;
}
.avia-slideshow-inner img {
min-width: 1000px !important;
margin-left: 200px !important;
}
.home .av-slideshow-caption .avia-caption-title {
font-size: 20px !important;
}
.home .avia-caption-content p {
font-size: 16px !important;
}}
Best regards,
Jordan Shannon
Hey Jordan
Thanks. I tried it but as you can see, it makes no difference. Can we try something else?
Thank you and happy holidays!
Hi Fitematrulle,
Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
@media only screen and (min-width:768px) and (max-width: 989px) {
.home .av-slideshow-caption .avia-caption-title {
font-size: 20px !important;
}
.slideshow_caption {
width: 55%;
}
}
If you need further assistance please let us know.
Best regards,
Victoria