I'm trying to disable a part of my HTML, this code:
<div class="right">
with Media Queries when it gets to a certain screen size, but I'm not sure how to do it. Any suggestions?
Thanks
If by disable you mean "disappear". Then you can use media queries to make that happen by setting the display property to none. Like this:
/* A bit of color */
.right {
height: 200px;
background-color: crimson;
}
/* Hide the <div> with class "right" when the screen width is 600 pixels or lower */
#media (max-width: 600px) {
.right {
display: none;
}
}
<div class="right"></div>
Tip: Click "Run code snippet", then click "full page" and resize the screen of the browser until it disappears.
Learn more about media queries here.
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 have a little problem with my website. If the screen of the device smaller than xyz px the slideshow doesn´t work anymore. And I want to be there a picture instead of the slideshow.
The slideshow that I am using is Owl Carousel
How can I do this?
You can use the CSS media rules.
CSS3 #media Rule
Both elements (image and carrousel) must be in your HTML code.
Without the appropiate CSS media query, both would be displayed, but if you provide the correct rules, you can hide/display the desired element, under each diferent screen size.
.my_carrousel{ display: block; }
.my_image{ display: none; }
#media screen and (max-width: 480px) {
.my_carrousel{ display: none; }
.my_image{ display: block; }
}
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).
I've a question, I'm trying to structure a site so that when it is in desktop mode a particular div which contains an img element is set to display:none;
When the screen size gets to 450px or less I would like to set the div to display:block and show it.
However, I'm having an issue doing so as the display:block never get's applied. I can do the reverese (display:block to display:none) . I'm guessing my issue is that I'm trying to apply a style to an element which does not exist on the page, if that is the case is there a way I can hide it, so that it takes up no space and show it when the screen is less than 450px?
Any help is much appreciated.
This is my CSS
#toplogo{
display: none;
margin-left: auto;
margin-right: auto;
}
This is my Media Query
#media screen and (max-width: 450px){
#toplogo{
display: block;
}
}
This is the HTML
<div id="toplogo">
<img src="/images/myimage.png"/>
</div>
Any help is much appreciated.
Your code seems just fine right now.
But I'd suggest mobile first approach, so the global style is aimed at mobile devices and later altered for bigger screens. Be sure to check what are you altering with your css media queries and check your code order so you are not overwriting media queries with your styling later in the 'global' css code
This snippet below wont work as intended if my media query will be placed at the top of css file, as it will be later overwritten - example of badly organized css media query
Working example
/* mobile first approach */
#toplogo {
display: block;
margin-left: auto;
margin-right: auto;
background-color: blue;
}
.hey {
display: none
}
#media screen and (min-width: 450px){
/* hide block when window width is at least 450px */
#toplogo {
display: none;
}
.hey {
display: block
}
}
<div id="toplogo">
<img src="http://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png">
</div>
<div class="hey">Hey, I'm bigger than 450px!</div>
http://jsfiddle.net/gfuunyak/4/
No need to apply any js.
Your css & media query are perfectly written; It works in my end; if not work in your end; then just add !important after display: block;
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;
}
}