I am using a button on my home page inside of the revolution slider.

I’m not sure if it is because I am using it inside of the slider, but it is being constrained when I size my screen down, to the point of being almost non-existent on mobile.

The “x-large” round button shortcode appears to remain responsive and maintain a height of 65px regardless of screen size. Is it possible to replicate that inside of the Revolution slider?

Thank you

Please add the following CSS under Customize -> Custom -> CSS :

@media (max-width:480px){
a.x-btn.x-btn-lightgrey.x-btn-rounded.x-btn-jumbo.x-btn-block {
width: 150px !important;
font-size: 12px !important;
line-height: 15px !important;
}
}

Hope it helps.

I adapted the above code to fit the button on my revolution slider. The objective is the same, i.e. to ensure it is of a larger size in the mobile screen.

My code is:

@media (max-width:480px){
a.x-btn.hero-btn.x-btn-real.x-btn-round.x-btn-small {
width: 150px !important;
font-size: 12px !important;
line-height: 15px !important;
}
}

Unfortunately, it doesn’t work…. What am i missing here?

Will provide URL and credentials below.

Thanks!

@media (max-width: 480px) {
.rev_slider_wrapper .x-btn {
    font-size: 1.2rem !important;
    padding: 0.863em 1.1em 0.913em !important;
}
}

Play around with the padding to adjust the width and height of the button.

Have a great day! 🙂