CODEWITHSUNDEEP
htmlcss
Abs Duls
Abs Duls

Reputation: 69

CSS display on mobile and desktop layout

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!

Upvotes: 4

Views: 14643

Answers (5)

tomloprod
tomloprod

Reputation: 7890

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

Upvotes: 2

adrian
adrian

Reputation: 2846

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).

Upvotes: 0

Vikash Kesarwani
Vikash Kesarwani

Reputation: 850

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.

Upvotes: 1

Soundhar Raj
Soundhar Raj

Reputation: 633

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

}

Upvotes: 3

Sagar
Sagar

Reputation: 647

Use Css Class:

.neighbourhood-img img 
{
display:block;
}

Upvotes: 0

Related Questions