At some point I was working on a website for a client and wanted to hide a row, section or module, to be viewed only on specific device type. It was very, very frustrating to see that even if checked the box it wasn’t working as intended.
I’ve search the internet for a solution but i’ve found that no one had this issue (or no one posted on this subject).
But actualy there is a solution that can resolve the issue with just adding a little bit of custom CSS to the child theme. The code works with Divi or any other theme that you might use for your website.
If you use a Divi child theme as I do, go to your Custom CSS. It’s located under Dashboard>Divi>Theme Options>Custom CSS
Go ahead and add the following code to Custom CSS
1 2 3 4 5 6 7 8 | @media screen and (max-width: 599px) { .mobileoff {display: none;} } @media screen and (min-width: 600px) { .desktopoff {display: none;} } |
Now go to the row section or module and add to the CSS class field settings the specific class that you need. For example use mobileoff if you’d like to hide a module on devices smaller then 599px or desktopoff if you’d like de hide a modul on devices larger then 600px.
Remember that you can rename the css class with whatever you want/ and you can change the max/min width to fit your needs.