I am using Media Queries given bellow for responsive in Thesis framework in wordpress. But it is not working. I also get help from these stackoverflow answers but still not working.
Responsive site works on desktop but not mobile
responsive media query not working
When I check this query at this http://www.responsinator.com/?url=http%3A%2F%2Fwww.lvticketattorney.com%2F it is working. But when I check it at mobile device it is not working.
Media Queries
#media (max-width: 569px) {
.menu a{font-size:10px;}
.list-left, .list-right{ width:100%; float:left !important;}
.custom #header{ background-size:95%;}
}
#media (max-width: 415px) {
.menu{ border:0 !important;}
.menu li{ width:95%; border-bottom:solid 2px #fff;}
.menu .current a{ border:solid 1px #000;}
#content_box #content{ width:100%;}
#content_box #sidebars{ width:100%;}
.teaser_right, .teaser{ float:left; width:90%;}
.gform_wrapper{ width:100%;}
#attachment_661{ width:100% !important;}
.gform_footer{ width:50%; }
}
#media (max-width: 385px) {
.format_text h1{ font-size:18px;}
.custom #header{ height:90px;}
#box{ width:95%;}
#box img{ height:auto;}
.menu{ margin-top:-10px; border-top:solid 1px #000;}
.format_text p span{ font-size:14px !important;}
.headline_area h1, .headline_area h2, #archive_intro h1{ font-size:18px;}
.wp-image-167, .wp-image-207{ width:100px;}
}
I use this media query #media only screen and (max-width: 740px) { ---- Style--- }. Now it is working. only screen and was missing.
Related
I want red colour when my screen resolution is between 1250px to 1350px .
Below is my code:
<style>
#media screen and (max-width: 1250px){
.navigation .menu .sub-menu .sub-menu {
background-color: red;
}
}
</style>
Not much magic. You pretty much just write down what you want to do:
<style>
#media screen and (min-width: 1250px) and (max-width: 1350px){
.navigation .menu .sub-menu .sub-menu {
background-color: red;
}
}
</style>
First of all you have write this in external stylesheet, and you can mention
#media screen and (min-width:1250px) and (max-width:1350px)
Request you to trying using this
<style>
#media only screen and (min-width:1250px) and (max-width:1350px){
.navigation .menu .sub-menu .sub-menu {
background-color: red;
}
}
</style>
I cannot figure out why my bootstrap dropdown menu seems to have an extra line on top and line on the bottom--with nothing in them. Granted, I have made my navbar 150px for all resolutions but that doesn't explain the extra padding on the bottom. This is my first bootstrap project and I have searched high and low for an answer to this. You have to narrow the window to less than 767 pixels for the dropdown option to appear.
This is the page: http://www.ashlandlockandsafe.com/index3.html.
In the CSS, I have tried to address it with the following:
#media screen and (max-width: 767px) {
.navbar-header{
height:150px;
}
.navbar-brand, .navbar-nav > li > a {
line-height: 30px;
height: 45px;
padding: 0px;
margin-top:0px;
margin-left:10px;
}
.well {
font-size:2.5em;
text-align:center;
text:#000;
padding:0;
border:#000 solid 4px;
background-image:url(../images/metal.png);
background-image:no-repeat;
background-size:contain;
background-position:center;
}
.carhelp {
margin-top:15px;
}
h1 {
text-align: center;
font-size: 30px;
}
.phonetxt {
font-size:36px;
text-align:center;
}
But it still has what appears to be an extra row on the top and bottom. Any ideas how to address the dropdown itself?
In website, fixed header has a padding .navbar-fixed-top .nav{60px 0px} causing the problem.
so solution is media queries
#media (max-width: 480px) {
.navbar-fixed-top .nav {
padding: 0px 0px;
}
}
so on devices like mobile, it will over-ride the default .navbar-fixed-top .nav selector property.
More information about media-queries
Does anyone know the proper use of media queries for IE? I tried using media queries in my page and in my call to the css file but i still do not see the media query being referenced.
#media only screen and (min-width : 768px) and (max-width : 1024px) {
#logoBig{
display:none;
}
#logoSmall{
display:block !important;
}
.logo{
width:200px !important;
}
.fields{
margin: 32px 0 0 0px;
width:62% !important;
}
ul li .submenu{
display:none;
}
ul li:hover .submenu{
display:block;
}
Where is the best place to put this media query and what guidelines do i need to follow?
IE 11 and here is my meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
You are missing a closing bracket at the end of your query
#media only screen and (min-width : 768px) and (max-width : 1024px) {
#logoBig{
display:none;
}
#logoSmall{
display:block !important;
}
.logo{
width:200px !important;
}
.fields{
margin: 32px 0 0 0px;
width:62% !important;
}
ul li .submenu{
display:none;
}
ul li:hover .submenu{
display:block;
}
}
but this would be an issue with all browsers, please update your html with your div's if this syntax error is not your issue.
Hello I am new with CSS
I think I have broken the CSS on my page
the logo runs off the page on mobile devices
if anyone could point me as to why this is not responsive?
thanks
check the site here http://finddaytrips.com/dev
Paul
---------------------------css below ------------------
.logo-wrap {
background:url(images/bg-header.png) repeat-x;
min-height:89px;
position:relative;
}
.logo-wrap:before {
content:"";
display:block;
height:100%;
left:-100%;
position:absolute;
top:0;
width:100%;
}
.logo-wrap:after {
content:"";
display:block;
height:100%;
right:-100%;
position:absolute;
top:0;
width:100%;
}
.logo-wrap:before { background:url(images/bg-header.png) repeat-x; }
.logo-wrap:after { background:url(images/bg-header.png) repeat-x; }
.logo {
position:absolute;
top:15px;
left:25px;
text-align:center;
}
#media (min-width: 768px) and (max-width: 979px) {
.logo { width:100%; }
}
#media (max-width: 767px) {
.logo {
position:relative;
top:0;
margin:20px 0;
}
.logo.pull-left { float:none;
}
}
.logo a {
filter:none !important;
background-color:#393939;
background-image:-moz-linear-gradient(top,#434343,#292929);
background-image:-webkit-gradient(linear,0 0,0 100%,from(#434343),to(#292929));
background-image:-webkit-linear-gradient(top,#434343,#292929);
background-image:-o-linear-gradient(top,#434343,#292929);
background-image:linear-gradient(to bottom,#434343,#292929);
background-repeat:repeat-x;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff434343', endColorstr='#ff292929', GradientType=0);
display:block;
padding:14px 11px 12px 11px;
border-radius:6px 6px 0 0;
}
#media (max-width: 767px) {
.logo a { text-align:center; }
}
.logo p {
background:#8ec63f;
border-top:1px solid #fbde02;
font:italic 34px/1.1em 'Orbitron', sans-serif;
font-weight:900;
text-align:center;
padding:0 5px 5px 0;
color:#2c2c2c;
margin:0;
border-radius:0 0 6px 6px;
}
#media (min-width: 768px) and (max-width: 979px) {
.logo p { font-size:16px; }
}
.logo .logo_h__txt { text-align:center; }
.logo .logo_h__txt a { padding:5px 15px 5px 5px; }
.logo .logo_h__txt a:hover, .logo .logo_h__txt a:active {
color:#fff;
text-decoration:none;
}
Your image is responsive! There is other parts of your code that are affecting the logo.
Unfortunately I will add that you should improve our skills in responsive design, even after I give you these changes to fix your logo, your site is just not working at certain sizes, your site needs some serious work for virtually every phone in landscape mode. Not only are there duplicate media queries, there is also media queries in your code for 760px (as well as 767px shown in your example) which doesn't look good if re-sizing a window and not good practice in general.
To fix the logo problem,...
You do not require the pseudo elements ::before and ::after on .logo-wrap.
You need to completely remove the absolute positioning of .logo as well as top and left.
You also need to remove margin from the .logo class in the media query "max-width: 767px".
To replace this spacing I would add padding: 10px; to the class .span4 on your page (which is not listed in the code above)
I do not believe you require <div class="spacer"> either! (also not in the code above)
Good luck in your site building.
Just add img-responsive to your logo image class like this
<img src="logo.png" class="img-responsive">
but use bootstrap
put the links on the header and the script source on the footer
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
See reference
http://getbootstrap.com/css/#images
My first time using media queries. Any changes to div size and other style changes work great. But the font is too small on mobile devices (tested on iPhone 5s and a Samsung Galaxy 3).
When I compare the site on a mobile device to the site in a narrow browser window, the font does not look like it's scaling proportional.
Sample:
The page in question can be viewed Here:
Code Sample:
#media only screen and (max-width: 30em) and (orientation: portrait),
only screen and (max-device-width: 30em) and (orientation: portrait)
{
body {
-webkit-text-size-adjust: 100%;
font-size:100%;
}
#wrapper {
width:100%;
}
#horz-menu {
width:100%;
background-color:#828282;
background-image:none;
}
#menu-list {
float:none;
width:100%;
padding:18px 5px 5px 0px;
margin:0px;
font-size:1.3em;
text-align:center;
}
#menu-list li {
display:inline;
border-right:1px solid #ECECEC;
padding-right:5px;
margin-left:5px
}
#topper {
display:none;
}
.footer-inner {
width:100%;
margin:0;
}
.customize {
width:100%;
text-align:center;
border-right:none;
border-bottom: 1px solid #6B6B6B;
padding-top:15px;
float:none;
}
.customize img {
width:100%;
}
#customOptions {
text-align:center;
width:100%;
}
#customOptions .acc-custom,
#customOptions .acc-custom-last,
#customOptions .acc-custom-last-off,
#customOptions .acc-custom-off{
width:23%;
}
#accessories {
width:100%;
float:none;
text-align:center;
padding-top:15px;
}
.acc-option {
float:left;
width:49%;
text-align:center;
font-weight:bold;
color:#545454;
margin-top:15px;
margin-bottom:15px;
}
}
I'm still working on the site but I need to get the text to look the same on mobile as desktop. If I make it bigger in the mobile media query, the font looks huge on a small desktop window.
Why don't the fonts in mobile seem the same size as in a small window on the desktop?