[SambonimParticipant]

Dear support,
I’m having an issue with the buttons created on the layers of revolution slider, I think that they are assuming the styles of the slider instead the style of X.

The main problem happens on the mobile view, the button will decrease his size, becomes very very tiny.

Wordpress: Latest version
Theme: Latest version
Shortcode: Latest version

I can pass the URL later.

Regards!

[SambonimParticipant]

This reply has been marked as private.

[Paul RModerator]

Hi,

Thanks for writing in!

You can add this under Custom > CSS in the Customizer.

body .rev_slider .tp-caption a.x-btn {
	display: inline-block;
	position: relative;
	border: 1px solid #ac1100;
	cursor: pointer;
l	ine-height: 1.3;
	text-align: center;
	vertical-align: middle;
	transition: all 0.15s linear;
}

body .rev_slider .tp-caption a.x-btn.x-btn-rounded {
      	border-radius: 0.225em;
}

body .rev_slider .tp-caption a.x-btn.x-btn-small {
	padding: 0.429em 1.143em 0.643em;
	font-size: 14px;
	font-size: 1.4rem;
}

Hope that helps.

[SambonimParticipant]

Hello,
Thanks for your feedback, but unfortunately your solution didn’t work.

You can try to put the code in the customizer, without any problem.

Thanks once again.

[John EzraMember]

Hi there,

Thanks for updating us.I’m not entirely sure what you want to happen from this point. Your CSS seems fine. If you are wanting to show the text then you would need to adjust the size manually as well. However it’s not that easy as this is one of the limitations with rev slider. It resizes dynamically and therefore has limitations when we need to customize. as you can see by adding the following to you already present CSS:

@media screen and (max-width:767px){

.tp-caption.tp-fade.tp-resizeme.start form {
    position:relative;
    top:50px;
}

h2.h-feature-headline.center-text.h4 span{
   font-size:12px!important;
}

h2.h-feature-headline.center-text.h1 span{
    font-size:28px!important;

}
}

It will show the text but it’s still too small, you would need to either write CSS that would cause the text to do multiple layers, at different media query breakpoints or create different layers that you add classes to and then show and hide with media queries.

I hope I am making sense and if this is what you wanted.

Hope this helps!

[RadModerator]

Hi there,

With responsive slider, all elements inside will resize in relative to the slider’s grid size.

Example, if your grid size is 800×400, and resized to 400×200 then it has 50% decrease on size. And if your button has 90px width, then 90px * 50% is of course 45px which is really small.

The slider will fill it’s container with the background, but with not the elements. So it’s okay not to use the actual screen size to your slider’s grid size. With responsive slider, only use the slider size that match the dimension of elements you wish to show.

Like find the total width of your text box and button, then that’s your grid size width. Or if you have long text than other elements, then use its width as grid width.

It’s best to leave the sizing to the slider than control it with css. Well, if it’s coloring and other stuff then you need to apply styling.

Cheers!

[Author]

Posts