hide div tag on mobile view only?

Question

I'm creating a fluid layout for a site. I'm trying to hide the contents of a <div> or the whole <div> itself in the mobile view, but not the tablet and desktop view.

Here's what I've got so far...

#title_message {
    clear: both;
    float: left;
    margin: 10px auto 5px 20px;
    width: 28%;
    display: none;
}

I have the display set to 'none' for the mobile layout and set as block on the tablet/desktop layouts... Is there an easier way to do that, or is that it?

Garrote

Answer 1

You will need two things. The first is @media screen to activate the specific code at a certain screen size, used for responsive design. The second is the use of the visibility: hidden attribute. Once the browser/screen reaches 600pixels then #title_message will become hidden.

@media screen and (max-width: 600px) {
  #title_message {
    visibility: hidden;
    clear: both;
    float: left;
    margin: 10px auto 5px 20px;
    width: 28%;
    display: none;
  }
}

if you are using another CSS for mobile then just add the visibility: hidden; to #title_message.

Actomyosin

When you come to StackOverflow... there's always going to be a solution to your query..... Except, most of the time I seem to come across slight alternatives. ...This answer is exactly what I was looking for! ...Thank you Dude. (p.s. used for a custom mobile menu on my site amazewebs.com ...mobile menu will show when width<768px – Montane

It's working for me. Have to display only mobile pages@media screen and (min-width: 700px) { .mobile-title { visibility: hidden; } } div.mobile-title h1 { text-align: center !important; font-size: 20px; font-weight: bold; padding: 5px; } – Pants

Answer 2

The solution given didn't work for me on the desktop, it just showed both divs, although the mobile only showed the mobile div. So I did a little search and found the min-width option. I updated my code to the following and it works fine now :)

CSS:

    @media all and (min-width: 480px) {
    .deskContent {display:block;}
    .phoneContent {display:none;}
}

@media all and (max-width: 479px) {
    .deskContent {display:none;}
    .phoneContent {display:block;}
}

HTML:

<div class="deskContent">Content for desktop</div>
<div class="phoneContent">Content for mobile</div>

Housefather

Answer 3

Set the display property to none as the default, then use a media query to apply the desired styles to the div when the browser reaches a certain width. Replace 768px in the media query with whatever the minimum px value is where your div should be visible.

#title_message {
    display: none;
}

@media screen and (min-width: 768px) {
    #title_message {
        clear: both;
        display: block;
        float: left;
        margin: 10px auto 5px 20px;
        width: 28%;
    }
}

Safelight

That's the wrong way round. The div won't display on browsers that don't support media queries. – Headwards

respond.js github.com/scottjehl/Respond will solve this on older browsers that don't support media queries. Media queries are the solution for responsive sites. – Safelight

Of course they are the solution, but you're doing this the wrong way round. Unless your website is mostly used for mobile, you never build your css from the bottom up. – Headwards

I don't consider mobile and desktop as separate websites. It is much easier to scale a project up as the browser gets bigger than it is to trim down as the browser gets smaller. In this case, KT is building responsive site, regardless of if it is "mostly" used for mobile or simply optimized for all browsers. A mobile first approach saves the mobile browsers from having to load additional CSS styles that never are actually applied. This approach is not the wrong way, it's simply not the way you suggest building your css. – Safelight

@Headwards That's actually how mobile-first design is: from the bottom up. – Timothy

@Timothy look at my first comment and note that was 3 years ago when we still had to worry about browsers that don't support media queries – Headwards

@Headwards Oops, I thought it was 2015. Anyway I'm just against "you never build your css from the bottom up" – Timothy

Answer 4

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { #title_message { display: none; }}

This would be for a responsive design with a single page for an iphone screen specifically. Are you actually routing to a different mobile page?

Bench

That didn't work. It wiped out all the CSS for the mobile layout. – Garrote

Can you provide a small sample of your css then? I'm not seeing the whole picture here but that shouldn't have wiped out your layout – Bench

This work better, because visibility: hidden only hide the element but still there (the place remains). Instead display: none; really hide it and completely removing it. – Serieswound

Answer 5

You can be guided by this example. On your css file:

.deskContent {
    background-image: url(../img/big-pic.png);
    width: 100%;
    height: 400px;
    background-repeat: no-repeat;
    background-size: contain; 
}

.phoneContent {
    background-image: url(../img/small-pic.png);
    width: 100%;
    height: 100px;
    background-repeat: no-repeat;
    background-size: contain;
}

@media all and (max-width: 959px) {
    .deskContent {display:block;}
    .phoneContent {display:none;}
}

@media all and (max-width: 479px) {
    .deskContent {display:none;}
    .phoneContent {display:block;}
}

On your html file:

<div class="deskContent">Content for desktop</div>
<div class="phoneContent">Content for mobile</div>

Lekishalela

Answer 6

Well, I think that there are simple solutions than mentioned here on this page! first of all, let's make an example:

You have 1 DIV and want to hide thas DIV on Desktop and show on Mobile (or vice versa). So, let's presume that the DIV position placed in the Head section and named as header_div.

The global code in your CSS file will be: (for the same DIV):

.header_div {
    display: none;
}

@media all and (max-width: 768px){
.header_div {
    display: block;
}
}

So simple and no need to make 2 div's one for desktop and the other for mobile.

Hope this helps.

Thank you.

Gon

didn't work like this – Lorielorien

Answer 7

i just switched positions and worked for me (showing only mobile )

<style>
 .MobileContent {

     display: none;
	 text-align:center;

 }

@media screen and (max-width: 768px) {

 .MobileContent {

     display:block;

 }

}
</style>
<div class="MobileContent"> Something </div>

Aegospotami

Answer 8

try this

@media handheld{
    #title_message { display: none; }
}

Daliladalis