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.
Amazing!!! Thank You! I was looking for this forever. This should be the first thing anyone does when making a hidden module for either desktop or mobile on DIVI.
Usually you can make this just with enable/disable options on any section,row or module. From time to time you get issues like this.
For me was after updated the theme’s core files…
Nice to see the above solution worked for you.
I suspect this is great advice, but what exactly do we put in the CSS section of the module, because I am trying hard (as a novice at this stuff), and I cannot get it to stop screaming at me with red error messages….. So while the first half of the instruction is clear and great…. how do I do the second bit???
Hi Letitia,
After you add the first part in your custom CSS of the theme, add to the CSS Class the same name you used in the custom code.
Ex: I used .desktopoff {display: none;};
Now to go to to the page i want modify, and select the gear icon of the row, section, module (whatever you want to hide) then click on> Advanced> CSS ID and Classes> and in the filed CSS Class I add “desktopoff” (no quotes).