Hello!
We’ve used the page builder plugin to create a fantastic layout on our Vantage theme site, however on mobile browsers it looks crazy because the 3 column rows now stack below each other.
Is there a way to disable particular widgets in the page builder for the mobile theme? A checkbox with “Disable on mobile theme” would be a lifesaver! (One of our other page layout plugins on another of our sites offers this option)
If there’s some CSS for this please let me know. Very frustrated with our mobile site :(
Thanks in advance.
Hi DogCare
Thanks for running Vantage.
What you’re seeing is a standard design pattern in responsive design. Left floated elements get vertically stacked once the screen size drops below a certain point. There is at this stage no easy way to hide elements on mobile. You’ll need to use Appearance > Custom CSS to do this manually.
Here is our Custom CSS tutorial: https://siteorigin.com/basics/modifying-theme-design-with-custom-css/
You’d need to insert something like this under Appearance > Custom CSS:
@media screen and (max-width: 680px) { }Within the breakpoint you’ll need to add the selectors you want to hide. So for example to hide the Tell Me More button, your Custom CSS would look as follows:
@media screen and (max-width: 680px) { #pgc-28-3-0 { display: none; } }Basically the row ID followed by display none;