I'm trying to have a specific class of hr display when the screen width goes below x pixels. I'm fine with the media query side of things, I'm just unsure what the display property of a hr element should be to have it display as a standard 100% width horizontal line.
I have a class currently to hide the hr element which will be used if screen size is >1080px
.hrHide {display: none;}
If your media-query just hides the HR when the screen is greater than 1080px, then by default, when its less its going to take the default display with 100% width, no need to override it. Just
#media screen and (min-width: 1080px) {
.hrHide {
display: none;
}
}
If you want to make sure, you can use display: initial so the browser gives the HR its default display
#media screen and (min-width: 1080px) {
.hrHide {
display: none;
}
}
#media screen and (max-width: 1079px) {
.hrHide {
display: initial;
}
}
If you want to be explicit, the way to set an object to ocupie all its horizontal space is with display: block (which btw is the default display that browsers like firefox give it)
#media screen and (min-width: 1080px) {
.hrHide {
display: none;
}
}
#media screen and (max-width: 1079px) {
.hrHide {
display: block;
}
}
Related
know if there is any css property to resize the elements of a web page according to the height/width of it? i tried with the nowrap property and setting the height to 90vh but i failed
height: 90vh;
white-space: nowrap;
that is, if I resize the browser window, all the elements are still displayed but reduced
You can do this using media queries
e.g.:
#media screen and (max-width: 500px) { ... } to style elements when the width of the browser or device is below 500px
#media screen and (min-width: 500px) { ... } to style elements when the screen is at least 500px or bigger
You can also use min/max height. Read more about media queries here: https://www.w3schools.com/howto/howto_css_media_query_breakpoints.asp
div {
width:300px;
height:300px}
#media screen and (max-width: 500px) {
div {
background-color: blue
}
}
#media screen and (min-width: 500px) {
div {
background-color: red
}
}
Make your browser window smaller to see the div change color
<div></div>
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 text (in a div) which shows on desktop and mobile screens.
Expected
I want the text to only show in #media only screen and (max-width: 768px)
How to
hide the div with display:none or
is there any other solution?
Use media query.
Set display:none to div and then apply display:block for mobile using max-width media query.
Stack Snippet
div {
display: none;
}
#media only screen and (max-width: 768px) {
div {
display: block;
}
}
<div>Text</div>
or you can use the min-width media query. Less code here
Stack Snippet
#media only screen and (min-width: 768px) {
div {
display: none;
}
}
<div>Text</div>
<style>
#media screen and (min-width: 0px) and (max-width: 400px) {
#my-content{ display: none; } /* show it on large screen */
}
#media screen and (min-width: 401px) and (max-width: 1024px) {
#my-content{ display: block; } /* hide it small screens */
}
<style>
<div id="my-content">
This code works but I want to add a button for show/hide this "my-content" on small device. I don't want to show this button in large display. This button only show on small screen. I want to use this code with a bootstrap site.
You just did the opposite of what you wanted to. Here is a quick fix:
#media screen and (min-width: 0px) and (max-width: 400px) {
#my-content{ display: block; } /* show it on smaller screen */
}
#media screen and (min-width: 401px) and (max-width: 1024px) {
#my-content{ display: none; } /* hide it on larger screens */
}
<div id="my-content">
Shows only on screens having max width of 400px.
Resize your browser's width to see changes
</div>
Bootstrap already has classes to hide things/make them visible. Check to see if these are in your style sheet. http://getbootstrap.com/css/
.visible-xs-, .visible-sm-, .visible-md-, .visible-lg-
.hidden-xs, .hidden-sm, .hidden-md, .hidden-lg
I am trying to use #media query to hide a span for tablet screen only like this:
#media screen and (max-width: 600px){
.tablet-screen {
display: none;
}
But it seems to be not working. Can someone correct me that i have to use max-width not min-width to hide span right ?
You have to use both. Under 600px it's not tablets, but smartphones.
You have to say it's min-width: 600px and max-width: 1280px. I will let you define your own breakpoints ;)
Demo : https://jsfiddle.net/Zetura/453gh680/
#media screen and (min-width: 600px) and (max-width: 1280px){
.hide-tablet {
display: none;
}
}
If you use min-width then increase it from top to bottom. Sequence matters!
#media screen and (min-width:220px) { ..... }
#media screen and (min-width:500px) { ..... }
#media screen and (min-width:700px) { ..... }
#media screen and (min-width:1000px) { ..... }
CSS reader stops reading the styles in the particular block when the current screen size is more than given in particular block.
And you don't need to use both at same time.
max-width is just opposite in sequence, biggest width first. But limits the biggest screen width supported. (Why? -> Just think like CSS reader.)