Solution to excluding content on mobile.

[shiftymcnab]

Hey bros,
This particular problem is for Wordpress.

I’m using widgets that I exclude from rendering when loaded on mobile. Pretty easy fix and many solutions to this. Using css and a true/false check box on each widget independently.

However, I’m having a hard time doing the same for page content.

I was thinking about adding some functionality to allow me to include ‘html’ widget to the page and then blocking it on mobile. But it’s clunky at best and requires another plugin. (All of which are bloated that I can find)

Any ideas or solutions you’ve stumbled across?

 

[BoxF]

I suppose the simplest solution to exclude that content is to either make a custom widget so its not included in the source, or alternatively just attach the same css class to that div element to hide its internal content for different viewports.

 

[ryandiscord]

What is different about it on the page content? Are you manually dropping html into your page content?

If you're sticking with the css hiding route, you could add a class used in a media query. So that the class is only used when the screen size is within a certain pixel range. (BoxF beat me to this point)

@media (max-width: 768px) {
.mobile-hide{display:none}
}

If you're looking to add or remove this ability with a checkbox, you could build this "html widget" in ACF. Add a checkbox field named like "hide on mobile" then when checked add your css class to hide it.

 

[Ryuzaki]

CSS media queries are the correct way of handling this, including widgets and post content. You can restrict them from being visible and taking up any space in the flow of the content this way.

They’ll still be encountered by the browser and crawlers in your HTML though. And any PHP in the widgets will still be processed. If PHP processing is what you’re trying to avoid, you should be using server side caching anyways to prevent that on each page load

 

[shiftymcnab]

Thanks guys. I am using the css method above for widgets.

I’ve worked it out now. Assigning elements individually and @media blocking them. I was looking for a catch all solution like the widget and over thinking it.

I’m pretty much a novice so have to grind my way through these problems until I work it out.

I have now stumbled across another issue now tho. I’m using a TOC plugin that is now breaking complex elements css..

Think I’m just gonna list up the issues and pay someone to fix the code conflicts. Any takers? Lol

 

[Ryuzaki]

I'd take the time to discover all of the issues, describe them the best you can, and create a thread in the Human Resources section, detailing what you're willing to pay. Someone will likely bite after Thanksgiving goes by.

If you're willing to hunt down the issues yourself, it sounds like a problem with 'CSS specificity' and certain rules being overwritten by others. You can learn the reasons why this happens, determine which CSS classes or ID's are the problems, and investigate exactly what's happening. Fixing this kind of thing on Wordpress typically requires a child theme installed if you're using a pre-built theme, or the fixes will get overwritten when you update the theme.

 

[BoxF]

Conflicts are always a pain in the ass, could always just update your media class in your child to .hidethisstuff001a (something arbitrary) which will prevent any css restrictions, as well use !Important if it still persists to circumvent any environment restrictions.

Another good 'ol greasy way is to SSH and use:

grep -nr '.cssclass*' .

or if unfamiliar with Bash/SSH you can download a copy of your WP and use Notepad++ to "find in folder" and list out any conflicting references to assist in updating your class name or to better debug any conflicts.