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">
Related
i'm newbie and i have a site, i want to make a responsive design, it is responsive for mobile but not responsive on tablet, i want create tablet design like pc layout not mobile, can you help me how solved this problem? maybe meta viewport and css wrong code, how many px to create min or max media width?
this is my dummy site
http://silanycorp.com/a
and this site for check responsive layout
http://ami.responsivedesign.is/#
meta viewport
<meta name="viewport" content="width=device-width, initial-scale=1">
CSS code
#media (max-width: 768px) {
.container{
padding:0;
}
.logo{
padding-left:0;
}
.hide-on-desktop{
display:block
}
.header-wrapper{
padding: 0;
}
.header-outer{
}
thanks for your help :)
You can have multiple stylesheets loaded based on the width of the viewport the user has.
This can be accomplished with the following tag:
<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />
You can also set it in the stylesheet with something like this:
#media all and (max-width: 699px) and (min-width: 520px) {
#sidebar ul li a {
padding-left: 21px;
background: url(../images/email.png) left center no-repeat;
}
}
Here is a good article on the process: http://css-tricks.com/css-media-queries/
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 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.
I'm just getting into media queries, but this first issue is driving me crazy I've spent hours on it.
I've tried to following:
#media screen and (max-device-width: 480px) {
div.logothingy {
z-index: 100;
display:none !important;
}
}
#media (max-device-width: 480px) {
div.logothingy {
z-index: 100;
display:none !important;
}
}
#media screen and (max-width: 480px) {
div.logothingy {
z-index: 100;
display:none !important;
}
}
I load it at the end of my head file and when i look at it in firebug it's there.
Then I go to an object .logothingy and it is not even getting the styling when i reduce my window size down small. That is to say it's not even getting it and then being overwritten, it's just not getting it at all. Going insane. Please help.
Ok I'm even doing this:
.logothingy {
border:1px solid;
}
#media screen and (max-width: 480px){
.logothingy {
z-index: 100;
display:none !important;
}
}
and it's putting the border and not doing the rest of it.
I have this in the head
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Update2: I changed it to 780px and it works, but when it's at 480px it can shrink all the way down to nothing without getting the styling.
I had the same dramas and noticed that i had missed this:
<meta name="viewport" content="width=device-width">
in the head of my index page. Added it and media queries all kicked in.
This is the correct one
#media screen and (max-width: 480px){
}
Try to put inside only .logothingy instead of div.logothingy and let us know if worked
The website that I'm working on has a background image and a separate header image, and I'd like to use media queries to get them as well the text on the header image to resize appropriately for different screens. I've played around with a lot of options based on different tutorials, but I still don't think my stylesheet is working as it should be. Here's an example of my css:
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
img {max-width: 90%;}
#wrapper { max-width: 90%; }
#wrapperbg { max-width: 90%; }
#header { max-width: 90%; }
#navlist { max-width: 90%; font-size: 80%; font-family: agency,
sans-serif; }
#navlist2 { max-width: 90%; }
#navlist li {max-width: 10%; font-size: 1.5em; font-family: sans-serif; }
}
I've included the line in the header as well:
<meta name="viewport" content="initial-scale=1.0, width=device-width"/>
I'm fairly new to trying to use media queries for a responsive design, so I know I'm making some ignorant mistake. Any help would be very appreciated. Thank you.
I think it should be
#media screen and (min-width:768px) and (max-width:1024px) and (orientation : portrait)
{
//...
}
For more see this.
I had problems using media queries with a wordpress theme, and I fixed it by downloading a special plugin for mobile phones and creating style sheets that way. It is just called "mobile css". I actually created media queries within the plugin for things like landscape vs. portrait on the iPad, etc.