Hi,
Please add this Custom CSS in Appearance -> Customize -> Additional CSS,
.main-slider .hero-caption {
display: block !important;
}
If this isn’t solve the issue,
Let us know,
Thanks,
laranz. ,
Thread Starter
freatz
(@freatz)
Hi!
Thank you very very much for your answer!!
It worked, and I used some Aditional CSS to display them as I wanted in smaller screens.
As people often have the same questions, here is my aditional CSS for centering those buttons as the screen gets smaller:
.main-slider .hero-caption {
display: block !important;
}
@media (max-width:899px){
.main-slider .hero-caption {
top:1% !important;
}
}
@media (max-width:749px)and (min-width:520px){
.main-slider .hero-caption.right{
right:1% !important;
}
}
@media (max-width:519px){
.main-slider .hero-caption {
width: 120px !important;
margin:0 auto;
}
.main-slider .hero-caption .btn-group a:last-of-type {
margin-left: -13px !important;
}
}
@media (max-width:380px) and (min-width:305px) {
.main-slider .hero-caption .btn-group a:last-of-type {
margin-top: 10px !important;
}
}
@media (max-width:304px) {
.main-slider .hero-caption .btn-group a:last-of-type {
margin-top: 2px !important;
}
.main-slider .hero-caption {
margin-top:-1px !important;
}
}
(I’ll apreciate very much if you correct me if I’m making a mistake)
Thank you very much!
Hi,
If that works, then it is not wrong, you’re doing a great job 😉
Let us know if you have any other questions,
Thanks,
laranz.