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>
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'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;
}
}
We have our website in wordpress, below is the link for your reference.
https://timesandtrendsacademy.com/
There is one foobar which is shown at the bottom of every page of our website in sticky and scrolling mode.
I have put some custom css for the same for full width look, below for your reference,
.foobar-container-left{display:none;}
.foobar-container-right{display:none;}
#foobar-message-0{width:100%;}
#media only screen and (max-width:500){
#branches{width:100%;}
}
It's working perfect on desktop, but when we resizing our screen or when we open on mobile devices that width is not taking a full-width.
It is showing in a 150px width size that is not looking good in mobile devices.
we have to add some css or media query to reflect proper on all the devices.
Please advice us.
Thanks,
Gopal
That's because there's a style with a !important that overwrites your styles.
#media only screen and (max-width: 800px) and (min-width: 320px) {
#foobar-message-0 {
margin-top: 10px;
width: 150px!important;
}
}
Remove the !important, edit the style, or use a more specific selector with !important.
Example:
#media only screen and (max-width: 800px) {
#foobar-message-0 {
width: 100%!important;
}
}
These styles should be after the styles to overwrite.
Add this css in style editor
#media only screen and (max-width: 767px){
.foobar-container-inner {
margin-left: 0important;
width:100%!important;
margin-top: -40px!important;
}
#foobar-message-0 {
width:100%!important;
}
}
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.)
I have some problems with my responsive design.
I have 20 boxes like this
I want to do responsive with mediaqueries
#media screen and (max-width:960px) {
}
#media screen and (max-width: 783px) {
}
#media screen and (max-width: 524px) {
}
But I can't control the boxes in my design. JSFiddle
Try some solutions like these:
http://purecss.io/grids/
http://semantic-ui.com/
Or try adding a specific width to each box for each media query.
I just put these lines of code into the CSS area and it worked outstandingly:
#media screen and (max-width:1500px) {
.block {width: 250px}
}
#media screen and (max-width: 700px) {
.block {width: 100px}
}
If only the width needs to be responsive you can work with max-width and width in percentages. Like so: http://jsfiddle.net/bbwkc/3/
.block_main {
max-width:750px;
width: 75%;
}
And so on.