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!
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;}
}
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
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.
Use Css Class:
.neighbourhood-img img
{
display:block;
}
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).
Related
I am trying to make a site responsive, and when it scales down, I want to cancel out the images. All my images are in HTML and I am trying to make them not show up as the screen scales down.
For this you can use media-queries.
Example:
#media screen and (max-width: 768px) {
.image-1 {
display: none;
}
}
This will not display the image when the screen size (width) is smaller than 768px.
You can learn more about media-queries here.
CSS media queries are used for this
#media only screen and (max-width: 600px) {
/* anything here will have properties mentioned here
if you want to hide all the images, use "img", else, use your specified class, such as .myImage */
img {
display: none;
}
/* OR */
.images-to-hide {
display: none;
}
}
In (max-width: 600px), you put the maximum screen width after which the styles stop working - or rather - the minimum value needed for these styles to be applied
Here's a more detailed tutorial: W3Schools.com - Media Queries
I'm not sure if I will be able to explain it clearly and if this is possible. I only have a basic grasp of HTML/CSS. I'm looking for a way to have a floating element not float when viewed from a smaller screen (mobile device). I have an image floating on the left side of a paragraph, but when viewed from mobile, the image with the text side-by-side gets too crowded. Is there a way to make it float on the left side normally, but appear on top of the text when viewed in smaller screens? Thanks!
What you need is to define Media Queries. Media queries are like css triggers that defines in which resolutions certain rules will be applied.
.div img {
float: left;
}
/*This will cause the img receive float none rule when screen is smaller than 768px*/
#media only screen and (max-width: 768px) {
.div img {
float: none;
}
}
There is a complete guide you can check out right here.
Using media queries should be what you need.
For example.
#media only screen and (max-width: 768px) {
.content {
float: none;
}
}
Basically that says if the screen size is less then 768px then the class content won't have any float.
What you are looking for is called MediaQueries:
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
You will need something like:
#media screen and (max-width: 400px){
yourelementselector {
... your CSS...
}
}
We are developing a new UI for one our products and for a number of reasons have the need to toggle between two <div> tags depending on whether the device be mobile or desktop. Each <div> will contain appropriate content for either mobile or desktop, but because we only have a single HTML page, we need the ability to turn on one <div> while turning off the other one.
This question is something of a follow up to this SO question which is very similar to what I am asking here. To recap the solution found there, there are two <div>s:
<div class="visible-phone">
content for phone
</div>
<div class="visible-desktop">
content for desktop
</div>
and there are two CSS rules which employ either the maximum or minimum screen resolution:
.visible-phone{
#media (max-width: 480px) { more css }
}
.visible-desktop{
#media (min-width: 768px) { more css }
}
To get to the point, consider a device with a minimum width of 700px and a maximum width of 900px. This would fall through the cracks of the above CSS logic and would result in neither <div> being visible. As another example, a device ranging from 500px to 750px would also not be covered.
Can anyone suggest a full-proof approach to avoid the weakness in the referenced answer? CSS based solutions would be preferred here.
What you could use is display none within the media query. Use the different classes assigned to each div such as mobile and desktop then in the media query for desktop set .visiblephone{display:none;} and query for mobile set .visible-desktop{display:none;}
This will ensure that within your specified media query one div will always be hidden, then you just have to get your screen size values =)
if i understand you correctly you are trying to do:
CSS
#media screen and (max-width: 480px) {
.visible-phone{
display: block !important;
}
.visible-desktop{
display: none !important;
}
}
#media screen and (min-width: 480px) {
.visible-phone{
display: none !important;
}
.visible-desktop{
display: block !important;
}
}
Use Media Queries
/* If the screen size is 600px wide or less, hide the element */
#media only screen and (max-width: 600px) {
div.example {
display: none;
}
}
i have a question, so I would like to use #media tag, Is it possible to remove IMAGE
<img>
from the div after web resizing?
I mean something like that
#media (max-width: 600px){
#content{
remove Image from this div content
}
}
You're looking for display: none.
You switch the display property. Standard the image display property is inline. To remove it from that particular div you can use:
#media (max-width: 600px){
#content img {
display:none;
}
}
Consider two inline-block divs. Now, I want when the user decrease the browser size, that only one <div> will stay visible (and not one <div> to go to the next line...).
How can I implement that?
<style>
div {
display:inline-block;
}
</style>
<div id="first">this should dissapear on narrowing browser</div>
<div id="second">only this should be visible</div>
I use Polymer, so if there is some syntax sugar here would be nice :)
Try this! http://jsbin.com/bibuzu/1/edit
There's a breakpoint at 480px so any widths before then the first div is set to display none and the second div takes up the rest of the space.
#media screen and (max-width: 480px) {
div.first {
display: none;
}
div.second {
width: 100%;
}
}
Check out media queries. Two possible approaches to this problem:
Set display:none on the div to hide it at a certain screen resolution
Wrap the two divs in another one with overflow:hidden on the wrapper
You probably want to use a media query, e.g.:
Demo Fiddle
#media only screen and (max-width: 640px) { /* <--e.g. hide at 640px.. */
div:first-child{ /* <--selector to identify the div you want to hide */
display:none;
}
}