So, I'm trying to use #media in CSS on my rails project.
I have a text which needs to be displayed only on mobile Heres the code
a.html.erb
<div class="A__b--c-d">
<%= link_to .......
....
</div>
b.scss
div.A__b--c-d {
display: none;
}
#media only screen and (min-width: 200px) and (max-width: 900px){
.A__b--c-d{
display: inline-block;
}
}
I cannot seem to get the text displayed on mobile.
Heres what ive tried so far.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Pasted this in Chrome inspect element
All the names are right
You need to remove the .div and just select the max-width in your media query.
.A__b--c-d {
display: none;
}
#media only screen and (max-width: 900px){
.A__b--c-d{
display: inline-block;
}
}
You made a mistake in your media query. Try this
.A__b--c-d {
display: none;
}
#media only screen and (max-width: 900px){
.A__b--c-d{
display: inline-block;
}
}
Related
I have sass code that generates a negated media query as follow (based on Exact NOT(Inverse) of CSS Media Query):
#media not screen and (max-width: 420px) {
.phone {
display: none;
}
}
#media not screen and (min-width: 421px) and (max-width: 992px) {
.tablet {
display: none;
}
}
Why doesn't this work for the last div with combined classes?
<div class="phone">visible on: phone</div>
<div class="tablet">visible on: tablet</div>
<div class="phone tablet">visible on: phone and tablet</div>
The reason I'm inverting the logic is because if I would do it the other way around (showing instead of hiding). I wouldn't know what display type each element would be (block, inline, etc) and I can't set it back to it's previous value.
Example and source.
<div class="phone tablet"/> cannot be visible any time, because all time at least one of your 2 media queries are matched, so this div gets a display: none from at least one of those.
One solution would be
#media not screen and (max-width: 420px) {
.phone:not(.tablet) {
display: none;
}
}
#media not screen and (min-width: 421px) and (max-width: 992px) {
.tablet:not(.phone) {
display: none;
}
}
Update to your Fiddle.
If you also want the div in question be hidden if both, .phone and .tablet are hidden, add
#media not screen and (max-width: 992px) {
.phone.tablet {
display: none;
}
}
Another update to your Fiddle.
Let me start over, as I clearly didn't post my question correctly.
I have a site with media queries and none of my queries are working. This is a Wordpress site build on the Genesis platform.
Header:
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
CSS with query:
#media only screen
and (min-device-width : 775px)
and (max-device-width : 1024px) {
#header {
float: none;
}
.another_site_inner-wrap {
float: none;
}
}
I'm not sure what else you would need to see to help guide me in the right direction. I'm a bit of a newbie, so please excuse my lack of knowledge.
OPTION 1
#media only screen and (max-width: 775px) and (min-width: 1024px) {
#header, .another_site_inner-wrap {
float: none;
}
}
OPTION 2
#media only screen and (max-width: 1024px) {
#header, .another_site_inner-wrap {
float: none;
}
}
If you want the #header, .another_site_inner-wrap to float: none; in 1024px You don't need to re-declare the same CSS on 775px. All CSS under 1024px will be used from 1024px below.
321px is too small try 700px to test it first, if you are trying to change it when you shrink the window then use max-width.
Try changing the border and color of a div on a certain with of the page (best way to test and see the media query in action). the media query should work so the problem is how you are implementing it
Example:
#media only screen and (max-width: 700px){
div{
border-color:red;
border-width: 10px;
border-style: solid;
}
}
Read this and play with different querys :
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
Set this at your <head>
<meta name="viewport" content="width=device-width, initial-scale=1">
I'm in the process of creating my website. the url is: http://bvanlieshout.com
It's far from done but I want to finish the home page first before I even start looking at the other pages.
So what I've tried is making everything with %. Using:
#media only screen and (max-width: 768px) {
.frontImage{
display:none;
}
}
#media only screen and (max-width: 320px) {
.frontImage{
display:none;
}
}
#media only screen and (min-width: 769px) {
.navigation ul li {
display: inline;
width: 100px;
padding-left: 10px;
}
.nowWhat{
width:800px;
}
}
that works , sorta, when i check my mobile phone and open the page it doesn't hide the images. I'm guessing because the page width is still beyond 320/768 px. So basicly what im asking is some pointers, tips. Any help would be appreciated!
Thanks
Place this <meta name="viewport" content="width=device-width, user-scalable=no"> inside of your <head></head>
I got a problem with website.
It's a jquery mobile framework, and the responsive design works well in Chrome and Firefox, but it does not in Safari on the mobile view.
i inspect it and looks like thet the media queries bellow 600px doesnt work.
Could you give me any help?
i wanna try whit some hacks but i dont know how to use it in media queries.
#media screen and (max-width: 320px){
.mi-slider {
text-align: center;
height: auto;
}
.mi-slider ul {
position: relative;
display: inline;
bottom: auto;
pointer-events: auto;
}
*/much more styles*/
}
Sorry for answer my own question, but i could fixed it, was easy, just making a new .css for hacks:
<link rel="stylesheet" href="css/webkit.css" media="screen and (-webkit-min-device-pixel-ratio:0)" type="text/css" />
and there put the media queries
#media screen and (max-width: 1024px){
#text_biblioteca {
margin-left:24.553954%;
}
#image2_biblioteca {
margin-left:24.165918%
}
#box2_biblioteca {
margin-left:7.57416%
}
}
and done!!!
I am customizing bootstrap for 3>>2>>1 columns display on browser resize or small devices. I have used css3 media query which is working on all browser except Safari. Following is css i have used. It's always using the first media query and because of that it is causing issue on Safari. I have tested both Mac and Window Safari and faced same issue. Please help.
Viewport Added in HTML head section
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
CSS3 Used:
/*Apply different margin based on media size*/
#media (min-width:1632)
{
.two-column .row-fluid [class*="span"]:nth-child(3n+1)
{
margin-left:100px;
}
}
#media (min-width: 981px) and (max-width: 1631px)
{
.two-column .row-fluid [class*="span"]:nth-child(2n+1)
{
margin-left:100px;
}
}
#media (min-width: 982px) and (max-width: 1155px)
{
.two-column .row-fluid [class*="span"]:nth-child(2n+1)
{
margin-left:10px;
}
}
#media (min-width: 545px) and (max-width: 981px)
{
.two-column .row-fluid .span6
{
margin-left:5%;
}
}
#media (max-width: 546px)
{
.two-column .row-fluid .span6
{
margin-left:5px;
}
}
Bootstrap explicitly do not support Windows Safari as stated in their browser support docs.
It looks like you are missing the 'px' after #media (min-width:1632)
#media (min-width:1632px)
This should fix it.