I have a button on my site that is a link to another page. It works fine on a desktop, but loses functionality when in mobile view. It is the APPLY button on this page. I’ve noticed the problem only happens when in a one column layout…
After some experimenting, I found what’s causing the problem:
The APPLY button is in the same SiteBuilder row as the text above the button. If I move the button to a separate row, the button works in both desktop and mobile layouts. But if I do that, than the layout styling is not what I want it to be…
Thanks for your help!
Hi Yuriy
Do you have a public URL where we can take a look at what’s going on? If you need to keep this URL private from other users, just select “Private Reply” on the bottom right of the comment box.
Yes, I had some text hyperlinked in my original post, but here it is again: http://www.choirandorch.com/
Sorry for missing that.
The problem is that the container below “Apply” is overlapping the button in mobile.
Try the following:
@media (min-width: 680px) { .entry-content div.panel-grid:first-child { margin-top: 0; } }If you don’t have a Custom CSS plugin installed, install SiteOrigin CSS and go to Appearance > Custom CSS to insert the above.
It worked (although I did a min-width of 780 px as that's the breakpoint after which it wasn't working…).
You're fantastic, man!
Awesome :) Glad that helped. All the best.