When i reduce the page width to 1500 the code works and the about is taken away. However the code is ignoring the original about small display none. When i load the page the about small image is displayed.
https://gyazo.com/813b8470136d3b68c4bece744a5dec9e
.aboutsmall{
display: none;
}
#media only screen and (max-width: 1500px){
.about{
display: none;
}
.aboutsmall{
display: all;
}
I think you mispelled something...
.aboutsmall{
display: none;
}
#media only screen and (max-width: 1500px){
.about{
display: none;
}
.aboutsmall{
display: block;
}
}
I'm getting really frustrated by this...
MDN example media query:
#media (max-width: 600px) {
.facet_sidebar {
display: none;
}
}
My media query:
#media (max-width: 1000px) {
.nav-content {
width: 90%;
margin-left: 5%;
}
}
It's not working...
Things I have checked for:
Query is after original .nav-content declaration
The class is the right name
Spelling is correct
The original CSS
.nav-content {
width: 80%;
margin-left: 10%;
display: inline-block;
}
Here's a link to a codepen: http://codepen.io/sbhenrichs/pen/ZOjyrm
But when I shrink the browser down to less than 1000px, nothing is happening!
PLEASE HELP
You have this CSS rule in a style tag inside your (HTML) head:
.nav-content {
width: 75%;
margin-left: 12.5%;
}
This overwrites the rules in all external style sheets...
I would like to edit a couple things in the media queries of LENSA, a Wordpress theme. My edits do not work.
For example, I want to change this class:
.left {
width: 70%;
float: left;
}
So I write it like this:
#media only screen and (max-width: 480px) and (min-width: 320px){
.left {
width: 100%;
float: none;
}
}
There is no change when the screen is 480px....
Site: www.karaokesharksf.com
I think that #media statement might be over-complicating it. Why not try just this?
#media (max-width:480px) {
.left {
width:100%;
float:none;
}
}
I'm creating a fluid layout for a site. I'm trying to hide the contents of a <div> or the whole <div> itself in the mobile view, but not the tablet and desktop view.
Here's what I've got so far...
#title_message {
clear: both;
float: left;
margin: 10px auto 5px 20px;
width: 28%;
display: none;
}
I have the display set to 'none' for the mobile layout and set as block on the tablet/desktop layouts... Is there an easier way to do that, or is that it?
You will need two things. The first is #media screen to activate the specific code at a certain screen size, used for responsive design. The second is the use of the visibility: hidden attribute. Once the browser/screen reaches 600pixels then #title_message will become hidden.
#media screen and (max-width: 600px) {
#title_message {
visibility: hidden;
clear: both;
float: left;
margin: 10px auto 5px 20px;
width: 28%;
display: none;
}
}
if you are using another CSS for mobile then just add the visibility: hidden; to #title_message.
Set the display property to none as the default, then use a media query to apply the desired styles to the div when the browser reaches a certain width. Replace 768px in the media query with whatever the minimum px value is where your div should be visible.
#title_message {
display: none;
}
#media screen and (min-width: 768px) {
#title_message {
clear: both;
display: block;
float: left;
margin: 10px auto 5px 20px;
width: 28%;
}
}
The solution given didn't work for me on the desktop, it just showed both divs, although the mobile only showed the mobile div. So I did a little search and found the min-width option. I updated my code to the following and it works fine now :)
CSS:
#media all and (min-width: 480px) {
.deskContent {display:block;}
.phoneContent {display:none;}
}
#media all and (max-width: 479px) {
.deskContent {display:none;}
.phoneContent {display:block;}
}
HTML:
<div class="deskContent">Content for desktop</div>
<div class="phoneContent">Content for mobile</div>
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) { #title_message { display: none; }}
This would be for a responsive design with a single page for an iphone screen specifically. Are you actually routing to a different mobile page?
You can be guided by this example. On your css file:
.deskContent {
background-image: url(../img/big-pic.png);
width: 100%;
height: 400px;
background-repeat: no-repeat;
background-size: contain;
}
.phoneContent {
background-image: url(../img/small-pic.png);
width: 100%;
height: 100px;
background-repeat: no-repeat;
background-size: contain;
}
#media all and (max-width: 959px) {
.deskContent {display:block;}
.phoneContent {display:none;}
}
#media all and (max-width: 479px) {
.deskContent {display:none;}
.phoneContent {display:block;}
}
On your html file:
<div class="deskContent">Content for desktop</div>
<div class="phoneContent">Content for mobile</div>
i just switched positions and worked for me (showing only mobile )
<style>
.MobileContent {
display: none;
text-align:center;
}
#media screen and (max-width: 768px) {
.MobileContent {
display:block;
}
}
</style>
<div class="MobileContent"> Something </div>
Well, I think that there are simple solutions than mentioned here on this page! first of all, let's make an example:
You have 1 DIV and want to hide thas DIV on Desktop and show on Mobile (or vice versa). So, let's presume that the DIV position placed in the Head section and named as header_div.
The global code in your CSS file will be: (for the same DIV):
.header_div {
display: none;
}
#media all and (max-width: 768px){
.header_div {
display: block;
}
}
So simple and no need to make 2 div's one for desktop and the other for mobile.
Hope this helps.
Thank you.
try this
#media handheld{
#title_message { display: none; }
}
I have this CSS:
#media only screen and (max-height: 500px) {
body{
display: none;
}
}
This hides the page when it gets to 500px (just to test it), works fine in my browsers on windows PC, when I try on my MacBook Pro in Safari it doesn't seem to detect it, how can I get this to work properly? I cant find much on it on google
I tested it and it's working fine on Safari(Mac) as well.
div{
background: #ddd;
width: 300px;
height: 300px;
}
#media only screen and (max-height: 500px) {
div{
display: none;
}
}
Here's the screenshot. Though there's a bug with Safari(iPad/iPhone). You might love to read this.
That works in safari, I just tested it to make sure.
The only thing that is missing in your question is the position of that query in regards to the properties/class you would like to change.
In other words, place it at the end and it will work.
Example:
This tells the browser to hide the body when the browser height is smaller than 500px:
body {
display: block;
}
#media only screen and (max-height: 500px) {
body{
display: none;
}
}
If you had it the other way around the last body definition would make the media query useless.
#media only screen and (max-height: 500px) {
body{
display: none;
}
}
body {
display: block;
}