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
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
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?