• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 140
  • Last Modified:

remove element from displaying on mobile devices

I am trying to remove the "Since 1950" in the header (header right widget) on cell phones.  I am not sure what I did wrong.

@media only screen and (max-width: 320px) {
  .site-header h1 { display:none;}

Open in new window

2 Solutions
Terry WoodsIT GuruCommented:
Works fine for me in Chrome; it disappears when I resize below 320px wide.

By the way, I'm assuming you're looking at the same site you linked to in a previous question, with a dev copy currently at http://36a.ed7.myftpupload.com/
Kim WalkerWeb Programmer/TechnicianCommented:
Many mobile devices mimic much larger screens unless the page contains a meta tag to override their natural behavior. Be sure to include the following meta tag in the head of your document.
<meta name="viewport" content="width=device-width, initial-scale=1.0">

Open in new window

Also be sure to view the page in the portrait orientation as many modern mobile devices have a width of 480 pixels in landscape orientation.
nsitedesignsAuthor Commented:
How do I add this to the header in wordpress?
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now