Hey Enfold,
I’ve placed a short code button in layer slider, it look fine on desktops, laptop, tablets…but on a smartphone (iPhone) the button doesn’t resize, and looks huge. Is there a fix for this?
http://www.marsmarketing.com.au
Thanks,
Hi Marssolutions!
Thank you for using the theme!
You can adjust the css and use media query to resize the button on mobile devices. Add this on Quick CSS or custom.css:
@media all and (max-width: 767px) {
.avia-button.avia-size-small {
padding: 4px 5px 5px;
font-size: 11px;
min-width: 70px;
}
}
Cheers!
Ismael
Hey!
Thank you for the update.
I’m not sure why it is not centered but please add this inside the media query above:
div#layerslider_41 div.avia-button-wrap.avia-button-center {
margin-left: -20px;
}
Adjust the negative margin to center align the button.
Cheers!
Ismael
Hey!
Please try this:
div.ls-l .avia-button-center {
margin-left: -100px;
}
Adjust the margin value if necessary.
Best regards,
Ismael
Hey!
Please add following code to Quick CSS as well
@media only screen and (max-width: 768px) {
div.ls-l {
margin-left: -15px!important;
}}
You may need to adjust the value to center it perfectly
Best regards,
Yigit
Hey!
Please add following code to Quick CSS as well and adjust
@media only screen and (max-width: 480px) {
div.ls-l {
margin-left: -10px!important;
}}
Best regards,
Yigit
brilliant, thanks so much!