Page Elements Not Displaying On Mobile

Mobile hiding using CSS Media Queries

Pinned Note Responsive Media Queries
Areas of the webpage like the sidebar, footer or menu buttons are not showing on smartphones or other small screen devices.

See Also…

Before you make changes
Make backups of any files (indicated below) that you plan to edit that are using css to hide webpage elements. And see Testing Media Queries Responsive CSS Code. Webpage elements are usually hidden for better smartphone viewing.

How mobile hiding works
In responsive website templates, areas like the sidebar, full footer and menu buttons may not display on mobile. This is done intentionally using "Media Queries" css code because smartphones, having a small screen, can not fit as many elements on the viewing screen as desktop, tablet and laptop computers. This is the function of a responsive website.

  • Code that hides the sidebar and footer will be in the "media-queries.css".
  • Code that hides menu buttons will be in the "media-queries.css" or at the bottom of the menu .css file.
  • The css code will generally use "display: none;" to hide webpage elements, and there may be a class named ".hidemobile" in the css file(s).
  • Test the Media Queries after any changes.

Un-hiding the sidebar:
In most responsive templates you can un-hide the sidebar and it will stack under the main page text area. In the "media-queries.css" find the following class (your class may be slightly different).

#sidebar-content { display: none; }

Edit the above to the following...

#sidebar-content { display: block; }

Un-hiding a menu tab:
Menu tabs can be more tricky to unhide. If you unhide the wrong tab your webpages may become too wide on mobile. Code for hiding menu tabs may be in the "media-queries.css" or at the bottom of your menu .css file.

Choose your menu style from the list below for mobile hiding info:

  • See your template "help.html" for the correct menu info and support links.
  • Mega Menu Style
  • Responsive jQuery Dropdown Menus
  • Mobile "click" Menus
  • Other Menu Types: See the "help.html" included with your download for specific details and the correct support links.
  • The menu file included with your template may include a class "hidemobile" on the specific tab to make it not display on mobile. Search in the css file(s) for "display: none;"
  • Collapsing Menus: In many responsive templates, the full menu will collapse into a mobile 3 bar click menu. Code for the menu will be included at the bottom of your "style.css", and the code to make the menu collapse is in the "media-queries.css".

Un-hiding the contact form:
Some templates may hide the contact form on smartphones. To un-hide the form edit the "media-queries.css" and find the following class (your class may be slightly different).

.contact-page .content-pad { display: none; }

Edit the above to the following...

.contact-page .content-pad { display: block; }

jQuery slideshow buttons:
For hidden next and back arrows and layered button tabs.
Other elements hiding on smartphones:
If some element is not showing on smartphones and you are not sure what is causing this, it is most likely "display: none;" css code in the "media-queries.css" or at the bottom of the menu css file or at the bottom of one of the other css files. It will be code with notes that start like the following:


In most cases changing the "display: none;" to "display: block;" will allow the element to display on smartphones, however, these elements are usually hidden for a reason (see "Before you make changes" above on this page).

Also search for "hidemobile" in the template HTML pages and .js files. Removing this class will allow the element to display.

Keeping the site responsive for mobile:
See also Editing Responsive and Mobile Templates for some tips on how to edit this style of website code and keep the webpages compliant.

RWD Webpage Layouts