CSS, Mobile Sites and display:none

Maybe you looked at the title of this post and thought, what is she talking about? This is way too technical for me, and I’m going to tune this out. Or maybe you looked at the title and thought, oh, responsive websites are hot, maybe she has a good tip on creating mobile sites.

Explanation of CSS and Display: None

magic hat display: none

For those of you that were about to stop reading this post because you didn’t even understand the title, here’s the explanatory section. CSS stands for Cascading Style Sheets. In the olden days, when HTML was just a little pup (that was the 1990’s), we used style code with tags like <font>. Well, pages of code got littered with these crazy tags, and it became difficult and timely to change how a page looks. In came the clever invention of Cascading Style Sheets (CSS), and content got separated from styling. If you want to gain control over how your site looks, CSS is important to learn. And for someone with visual inclinations, it can be a lot of fun as well.

So what is display:none? It is a declaration one can use in CSS. It means, don’t show this element. Why in the world would you have some element in your HTML code that you don’t want to show? That will be explained in the next section.

Ways of Presenting on Mobile Platforms

Here are three basic ways of building websites for mobile platforms: 1) you can build a site separate from your main site, using software specific to each mobile platform. So a mobile site for the iPhone would be build using iOS. 2) you can use what’s called a switcher (typically done with javascript) that detects what platform the user is on and switches to the appropriate type of site OR 3) you can use media-queries, a type of CSS, to determine the size of the browser and based on browser size, create your website. This final method is called Responsive Web Design, and it is one I used to make this blog appear on mobile, for example. Learn more on Google’s Recommendations for smartphone-optimized websites.

display: none – what does this have to do with mobile?

Getting back to the CSS declaration of display: none, this is a handy declaration to use when building a responsive website. Let’s say you have a menu that appears in one manner on a desktop browser. Very often, these desktop length menus are long, and they look awkward when bunched up on a mobile screen. How does one solve this problem? If you created two different types of menus, one for mobile and one for desktop, you can then choose by using display:none where each of those appear. You would have display:none for the mobile menu on your desktop site (which would be in your basic style.css in WordPress) and display:none for the desktop menu in the part of media-queries.css that has declarations for the small mobile browser width. When you do want the menu to appear, you mark the declaration as display: inline or display: block.

Of course, if you want to implement two different menus, you do need to learn a fair amount of CSS to do so. However, if you can learn as much as I’ve taught you thus far, you can then communicate this to your web developer that you would like to have the two different sorts of menus for the two platforms. And it doesn’t have to be menus. It can be images, video, a footer, a section, whatever one needs to display in different manners.

Your Turn, Please

Have you ever edited your CSS? Is the idea of CSS all new to you? Have you looked at your blog on a mobile phone to see how it looks? If you wanted to tell someone to convert your blog or website so it looks good on mobile, how would you say it?

Please share:Pin on PinterestTweet about this on TwitterShare on FacebookShare on Google+Share on LinkedIn

22 thoughts on “CSS, Mobile Sites and display:none

    1. Catarina, it’s good you at least use WPTouch to set up your site for mobile. If you were running a business that needs to capture the attention of those on the go, you might want more control than WPTouch offers on how to set up your site’s appearance on mobile. CSS and media-queries offers those possibilities (and it doesn’t have to be you doing the coding, but it helps to understand what you are asking the coder).

      I’m glad you feel comfortable enough to say it’s “far too technical” – that’s one reason I only sometimes write technical posts, even if those are truly my favorite kind to write.

    1. Jeri, I’m glad learning to code captures your interest! Often, if you have one thing you want to change or do differently, that will motivate you to go through the puzzle of figuring out how. That’s all coding really is – a puzzle to be solved.

  1. Hi Leora,

    I have made changes to CSS but only following what someone has told me and not really understanding the jargon. Luckily with my theme it is a responsive design and I also use WP touch. I also learned this week that I can just click on things in the theme and there is no need for any coding re margins or padding. Makes life so much easier.
    Susan Oakes recently posted…Substitution Makes A Difference For Your CustomersMy Profile

    1. Susan, it’s good you have someone to help you with a change that you want to make. If your theme is responsive, then you don’t need WP Touch. You only need one or the other (WP Touch or responsive). Once you have the WP Touch activated, it is no longer using the responsive design for mobile. Responsive design means your site can look more like your desktop site, adding a branding touch.

      At this point, Google recommends responsive over a plugin like WP Touch. The argument is that responsive is better for SEO.

      1. Susan,

        I would try turning it off (but not deleting it yet), then check your mobile site. Make sure your theme works the way you like. You can then turn WP Touch back on if you aren’t yet satisfied with how the mobile looks. In other words, take your time making decisions on this.

  2. Ok, you got me. I had not idea what an CSS stood for. I feel a bit our of my element with this stuff. The good news I have someone who’s does know what their doing and that makes all the difference. However, there will be a time when I will need to have an understanding of how this all goes together and I am grateful that I have you as a resource. 🙂
    Susan Cooper recently posted…Trinchero Family Estates: Ménage à Trois Red WineMy Profile

    1. My advice is even if you aren’t the one touching the code, it’s always a good idea to understand the basics and what is needed to make format changes. This is sort of like understanding how the engine of a car works without actually fixing it yourself.

      Now, can someone teach me how the inside of my car works?

  3. I am not very good in CSS but I have the working knowledge 🙂 so I was not intimated by the headline lol.

    The best use of display:none for me is when I want to send some information from server to the webpage and want to hide it. Then using Javascript I just change the display:block just to make it appear. It makes website fun and responsive :).

    Thanks for such a good article on “display” css.

  4. My goodness! I think the last time that I ever touched a CSS file was back in college when I was making this website with my thesis partner. Although I still can pretty much understand and do the coding, I have to admit that my CSS skills are so basic. During that time, there were no mobile sites yet. I’ve been actually considering on having a mobile version done for my site, and availing the services of a company to do that. Do you think this is an okay decision? Love to read your thoughts on this.
    Adeline Yuboco recently posted…4 Must-Have Online Business ToolsMy Profile

    1. Adeline, and when I was in college, there was no web at all, just mainframes and vaxes and big sorts of computers!

      Of course, it makes sense to have a mobile version of one’s site. I do that work (creating mobile versions) for my clients. I read a lot of blogs on my mobile phone, and if the blog isn’t set up properly for mobile, I am apt to skip reading the site.

  5. Leora, Thanks for presenting this highly technical information in such a friendly, accessible way. Knowing the language is so important when communicating with website designers. This is very helpful.

    1. Natasha, I’m glad you found this useful. I realize that code can be intimidating to many, but if you break it down into pieces and understand each one individually, it’s just like understanding a bit of a language.

Please leave a comment.

Your email address will not be published. Required fields are marked *

CommentLuv badge