I'm using a nectar slider for my home page header with a call-to-action button.
It looks great on a laptop. But when I check it on the mobile, the button moves and covers the words.
I've attached screenshots of:
The desktop view
A mobile view
My nectar slider settings
My column / responsive options settings
It won't let me upload any more files, but the row settings are 'Full width background' 'Full height - off'.
One of the many things I tried was to manually set the slider height in the Nectar slider settings. It would fix it, sort of, for the mobile, but then look weird on the desktop.
Is there a way to edit the formatting for where the button sits for just the responsive settings?
Hi!
I'm using a nectar slider for my home page header with a call-to-action button.
It looks great on a laptop. But when I check it on the mobile, the button moves and covers the words.
I've attached screenshots of:
It won't let me upload any more files, but the row settings are 'Full width background' 'Full height - off'.
One of the many things I tried was to manually set the slider height in the Nectar slider settings. It would fix it, sort of, for the mobile, but then look weird on the desktop.
Is there a way to edit the formatting for where the button sits for just the responsive settings?
Thanks so much for your help.
Attached files: Column settings.jpg
Desktop view.jpg
mobile view.jpg
Nectar slider settings.jpg
Hi Katherine,
Thanks for choosing Salient.
Please try this css, paste it in css custom code under Salient > General Setting > CSS/Script Related:
@media only screen and (max-width: 690px){.nectar-slider-wrap[data-fullscreen="false"] .swiper-slide .button a {
top: 42px;
} }
Thanks.
That fixed it! Thanks so much, Judith! 😄