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?

score 200 · Accepted Answer · edited Dec 23 '22 at 08:15

200

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.

edited Dec 23 '22 at 08:15

starball

20,030
7
43
238

answered May 14 '13 at 21:28

Matt

2,500
1
16
26

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 http://amazewebs.com ...mobile menu will show when width<768px – josh.thomson Sep 04 '14 at 15:20
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; } – gnganapath Jan 23 '16 at 12:32

score 9 · Answer 2 · answered May 14 '13 at 20:27

9

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%;
    }
}

answered May 14 '13 at 20:27

Phil Sinatra

419
3
11

That's the wrong way round. The div won't display on browsers that don't support media queries. – MMM May 14 '13 at 20:43
respond.js https://github.com/scottjehl/Respond will solve this on older browsers that don't support media queries. Media queries are the solution for responsive sites. – Phil Sinatra May 15 '13 at 00:05
1

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. – MMM May 15 '13 at 09:08
5

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. – Phil Sinatra May 15 '13 at 11:44
1

@MMM That's actually how mobile-first design is: from the bottom up. – SepehrM Apr 19 '16 at 19:18
1

@SepehrM 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 – MMM Apr 20 '16 at 16:06
2

@MMM Oops, I thought it was 2015. Anyway I'm just against "you never build your css from the bottom up" – SepehrM Apr 20 '16 at 19:18

score 8 · Answer 3 · answered Aug 02 '17 at 22:15

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>

score 5 · Answer 4 · edited Aug 13 '16 at 05:10

5

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

edited Aug 13 '16 at 05:10

Munawir

3,346
9
33
51

answered May 14 '13 at 18:46

Scarecrow

205
1
7

That didn't work. It wiped out all the CSS for the mobile layout. – KoldTurkee May 14 '13 at 18:51
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 – Scarecrow May 14 '13 at 19:16
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. – Angel Aug 03 '15 at 14:41

score 3 · Answer 5 · answered Apr 19 '17 at 21:20

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>

score 2 · Answer 6 · answered Nov 28 '19 at 16:18

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.

score 1 · Answer 7 · answered Mar 15 '18 at 23:07

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>

score 0 · Answer 8 · answered May 14 '13 at 21:20

0

try this

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

answered May 14 '13 at 21:20

Alejandro Ruiz Arias

249
2
11

hide div tag on mobile view only?

8 Answers8

Linked

Related