Reputation: 69
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
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
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
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
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