Jack Jack - 3 months ago 15
CSS Question

Hide DIV sections on mobile and Google search and translate

I am trying to convert my site to mobile friendly. The easiest way I believe is to hide certain sections when in mobile view and just show the MAIN CONTENT. The site is general divided up like this:

<div class="main">
<div id="header_holder">
HEADER CONTENT
</div>
<div class="side">
<cfinclude template="menu.cfm">
<div class="sidebot">Title 1</div>
<div class="space10">image 1</div>
<div class="space10">image 2</div>
<div class="space10">image 3</div>
<div class="sidebot">Title 2</div>
<div class="lineG2"></div>
<div class="sidebot">Title 3</div>
</div>
<div class="content">
<div class="cLeft">
MAIN CONTENT
</div>
<div class="cRight">
right content 1
right content 2
<cfinclude template="ads.cfm">
</div>
</div>
<div class="footer">
footer content
</div>
</div>


The CSS:

.main{width:960px;margin:0 auto;overflow:hidden;zoom:1}
.side{
float:left;
width:110px;
margin-right:10px;
}
.sidebot{float:left;width:110px;padding-top:20px;font-weight:bold;}
.content{width:840px;float:left}
.content .cLeft{float:left;width:530px;margin-right:10px;}
.content .cRight{float:left;width:300px;margin-bottom:10px;}
.lineGrey {
border-top: 1px solid #C1C1C1;
list-style-type: none;
padding:20px 0px;
overflow: hidden;
width: 100%;
height: 220px;
}
.space10{float:left;margin-top:10px;}


I want to hide the left side ("side") and right side ("cRight") leaving the MAIN CONTENT intact when in mobile view. According to instructions I am supposed to be able to do so by using @media for example like this:

@media screen and (max-width: 530px) {
.side{
visibility: hidden;
clear: both;
display: none;
float:left;
width:110px;
margin-right:10px;
}
}


Well, it does hide the "side" in mobile mode i.e. when it is less than 530. However, it messed up the original desktop format. The "side" menu is displayed properly on the left, but the rest of the "side" content:

<div class="sidebot">Title 1</div>
<div class="space10">image 1</div>
<div class="space10">image 2</div>
<div class="space10">image 3</div>
<div class="sidebot">Title 2</div>
<div class="lineG2"></div>
<div class="sidebot">Title 3</div>


went to the top of the left main content "cLeft". Similar issue with the "cRight" when in desktop mode when I wrap it with:

@media screen and (max-width: 530px) {
.content .cRight{
visibility: hidden;
clear: both;
display: none;
float:left;
width:300px;
margin-bottom:10px;
}
}


some of the cRight content

right content 2
<cfinclude template="ads.cfm">


went to the bottom of the left main content "cLeft". I am at lost as to what happened. Why would it mess up the desktop mode format?

Q2. If we solve this will this work with older version of CSS? i.e. in older browser IE 7?

Any help is appreciated.

Answer

I'm not 100% sure what your question is but if you're trying to get rid of content, cRight and side div , then just paste this code here below your Desktop CSS.

CSS is read by the browser top to bottom so if you add all that other code below your display:none, then you're gonna have some different outcomes than display:none because CSS is read top to bottom.

Hope this helps

@media screen and (max-width: 530px) {
.side{
visibility: hidden;
clear: both;

float:left;
width:110px;
margin-right:10px;
display: none; 
}
.content .cRight{
visibility: hidden;
clear: both;

float:left;
width:300px;
margin-bottom:10px;
display: none; 
}
}
Comments