Wordpress SEO - What are you looking for?

If you're looking for answers to SEO or wordpress related questions, type in a phrase and wait for hints or click enter! The results also show links to external sources.

161 articles in the database

How to hide widgets on mobile devices ?

[ Article content is protected by Plagiashield ]

widget-wp

There are situations when the content we display on the computer version of our websites do not display correctly on mobile devices or we simply do not want them to appear there. In today's article I will show you like plain can be to deal with this problem.

Some time ago I showed how to hide or show widgets on particular subpages of / sections of the site. You can read about it here: https://www.seowordpress.pl/widget-logic-czyli-wyswietlanie-widgetow-tam-gdzie-chcemy/

But today we're going to hide widget for visitors to our pagesI'm using mobile devices. There are two ways to do this:

1. using css media queries

At the beginning it is worth mentioning that the first method, as opposed to the second, will allow you to hide this element rather than eliminating it from the code.

1.1 The first step will be to create an appropriate rule to allow concealment:

@media only screen and (max-width:480px) {
.hide-on-mobile {
display: none
 }
}

Powyższą regułę dodajemy w naszym ogólnym pliku style.css, w arkuszu stworzonym dla motywu potomnego lub w opcjach szablonu (który mostly gives the possibility of pasting additional css code). In this particular case, we have set a limit for mobile devices with screen resolution below 480px wide. To change this value we change the value of max-width.

1.2 The next step will be to give a class to the widget we want to hide. To do this, we will use the plugin Widget CSS ClassesGo to the widgets tab (Appearance => Widgets) and enter our class responsible for hiding the element - in our case hide-on-mobile.

css-class-widget

2. using only the plug-in

For this task we will use the plugin WP Mobile Detect. It has yet Some additional options such as hiding individual content elements in an entry/article or website using the appropriate shortcodes listed here: https://wordpress.org/plugins/wp-mobile-detect/faq/.

We, on the other hand, are interested in the functions placed below. That is:

  • wpmd_is_notphone() - displays when a computer or tablet
  • wpmd_is_nottab() - displays when the computer or phone
  • wpmd_is_notdevice() - displays only when the computer
  • wpmd_is_phone() - displays only if phone
  • wpmd_is_tablet() - displays only when a tablet
  • wpmd_is_device() - displays when phone or tablet
  • wpmd_is_ios() - displays only when an iOS device is present
  • wpmd_is_iphone() - displays only when iPhone
  • wpmd_is_ipad() - displays only when iPad
  • wpmd_is_android() - displays only if Android device
  • wpmd_is_windows_mobile() - displays only when the device is running Windows Mobile

Assignment of the abovementioned plugs do widget knocks us down Widget LogicIt should look like this picture:

mobile-detect-logic

To adjust the display using the first point (media queries) it is a good idea to familiarize yourself with the applicable resolution standards for specific devices: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Wojciech Wladzinski

O Wojciech Wladzinski

I have been dealing with SEO industry since 2008. At co day senior SEO specialist in the company Seogroup. I create and optimize large websites as well as smaller ones. I am particularly fond of the environment WordPresswhich, despite popular belief, is not just a blogging platform.
  • Internal Links and Sematics

  • Link building
  • Sematics
  • Link building has never been easier. Hundreds of link possibilities in one click.
  • See

[ Article content is protected by Plagiashield ]

SEMRush - the best tool for SEO and PPC.

en_USEnglish
Read previous post:
wp-automatic-10
[INOFGRAPHIC] 10th Birthday of WordPress

Wordpress is celebrating its 10th birthday this year with Automattic, the descendant company of Wordpress Foundation. It plays a significant role in...

Close