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.
Related
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;
}
}
In my current responsive project I have the issue that when using my iPhone in landscape mode, the font-size is a lot bigger and introducing -webkit-text-size-adjust: none; didn't help (see JSFiddle below).
I use these definitions in my project:
<meta name="viewport" content="width=device-width, user-scalable=yes"/>
and the breakpoints
#media only screen and (max-width: 35em) and (orientation:portrait) {
...
}
#media only screen and (max-width: 47em) and (orientation:landscape) {
body {
-webkit-text-size-adjust: none;
}
}
#media only screen and (max-width: 35em) and (orientation:portrait),
only screen and (max-width: 47em) and (orientation:landscape) {
...
}
You can directly test it at the result page of my JSFiddle.
<div class="test">This is just a test</div>
<div class="test">This is just a test</div>
<div class="test">This is just a test</div>
<div class="test">This is just a test</div>
<div class="test">This is just a test</div>
and
#viewport {
width: device-width;
}
#media only screen and (max-width: 47em) and (orientation:landscape) {
body {
-webkit-text-size-adjust: none;
}
}
.test {
width:100%;
margin-bottom:2px;
height:2em;
font-size:3em;
}
.test:nth-child(2n+1) {
background-color:#eeeeee;
}
What can be wrong?
UPDATE:
Even without breakpoints it doesn't work, see JSFiddle
UPDATE 2015-07-15
I found a workaround: Disable the zoom for mobile phones would solve the problem. However, as tablets get the desktop version, zoom must be enabled for tablets. I achieved a working solution now by checking the screen size in javascript and if it is below 752px I modify the viewport definition to width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0
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 Have this simple media query to check resolution of browser and accordingly display or hide the image... But it works only on Chrome and does not work on firefox and IE. any idea whats wrong with my code? or any suggestions what can I do?
#media screen and (max-width: 1030px) {
#img{
display:none;
}
}
#media screen and (min-width: 1031px)
{
#img{
display:block;
}
}
Here is my HTML:
<div id="img"><img src="images/bg.png" height="575px" style="position:absolute; margin-left:6px;" style="z-index:100;"/></div>
Without seeing your html I will assume that you are attempting to hide an image with and id of image? If so I would do the following.
Change the id of img to be a class, for example we will use .image-class this will mean the style can be re-used on other images on the page as IDs have to be unique.
So your html should look similar to this:
<img class="image-class" src="http://placekitten.com/500/500" alt="kitten" />
And then for your CSS:
/* Mobile first strategy (no media query required) - images will not display when under 1030px)*/
.image-class {
display: none;
}
/* Images will display above 1030px */
#media screen and (min-width: 1030px) {
.image-class {
display: block;
}
}
See this fiddle
try display:inline-block;
#media screen and (max-width: 1030px) {
#img{
display:none;
}
}
#media screen and (min-width: 1031px)
{
#img{
display:inline-block;
}