CSS display on mobile and desktop layout

Question

I had a hard time to fix it. Maybe I am just very noob on css. Basically, I want the icon to visible only in Mobile version of the site.

in above 767px I put this code to make i hidden. .neighbourhood-img img {display:none;}

My question is, how can I make it visible in below 767px width..

Thanks!

We need a bit more context to help you out here. – Mimo May 23 '15 at 07:15 — Mimo, May 23 '15 at 07:15

score 3 · Answer 1 · answered May 23 '15 at 07:18

3

hey check out this css

@media screen and (min-width: 768px) {
    .neighbourhood-img img {display:none;}
}

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

        .neighbourhood-img img {display:block;}

}

answered May 23 '15 at 07:18

Soundhar Raj

623
3
12
26

I think the second `media querie` is not necessary; The `display:none` style only appear when the specified condition is met. Aren't you agree? – tomloprod May 23 '15 at 07:28

tomloprod · Answer 2 · 2015-05-26T07:56:34.827

2

What you need is called media queries. Try with:

@media screen and (min-width: 768px) {
    .neighbourhood-img img {display:none;}
}

It will be hidden when the width of the screen is at least 768px

You can read more about media queries here:

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

edited May 26 '15 at 07:56

answered May 23 '15 at 07:15

tomloprod

7,472
6
48
66

score 1 · Answer 3 · answered May 23 '15 at 07:18

1

You can use media queries available in CSS to define the styles which meet certain conditions, in you case the condition will be screen width.

answered May 23 '15 at 07:18

Vikash Kesarwani

850
5
14

score 0 · Answer 4 · answered May 23 '15 at 07:15

0

Use Css Class:

.neighbourhood-img img 
{
display:block;
}

answered May 23 '15 at 07:15

Sagar

642
3
14

score 0 · Answer 5 · answered May 23 '15 at 07:24

I think I understand what you're asking. If you only want it to visible on mobile version then you could do the following:

Make a new CSS rule:

@media only screen and (max-width: 767px) {
    .m-show {
        display: block !important;
        max-height: none !important;
        overflow: visible !important;
    }
}

Then wrap your icon in a div tag as below, with the styling to hide it (but make its class the m-show class):

<div style="display: none; max-height: 0; overflow: hidden" class="m-show">
Your hidden content here...
</div>

This will hide it if it isn't in that max width of 767, otherwise it will show it. Hope this makes sense. I would also suggest making that inline styling in the div tag a separate CSS class (just because I don't like inline styling).

@tomloprod Do you mind me asking why not? -- Edit: I also see the upvoted answer makes more sense — adrian, May 23 '15 at 07:32

CSS display on mobile and desktop layout

5 Answers5