I have added my media Queries and seems when i run under this site it does not displayed the right output i expected..This is the First test i did for this mobile
this is my media Queries
#media screen and (min-width: 768px) and (max-width: 1024px), (min-device-width: 768px) and
(max-device-width: 1024px) and (orientation : landscape) {
.wrap{
width:95%;
}
.box{
width:29.33%;
float:left;
margin:0px 42px 0px 0
}
html{
background-color:red;
}
}
I did a troubleshot on body and html however the background color not displayed
this is my site
My CSS
.wrap{
width: 90%;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
.box{
width: 29.33%;
float: left;
}
I have added my media Queries
But you've forgotten a key ingredient in media queries, which is the meta viewport element. E.g.
<meta name="viewport" content="width=device-width, initial-scale=1">
You need to place that in the head of your pages for media queries to operate.
In your html file you have
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
That's older, I would replace it with html5 doctype
<!DOCTYPE html>
BTW that place looks nice.
Related
I'm using the media screen query in my css but the problem is that it's not rendering for mobile. It renders for computer screen sizes but when it comes to mobile devices it doesn't work.
Here is my css
.featured-post-image{
position:absolute;
left:0;
right:0;
width:100% !important;
height:100%;
max-height:700px !important;
}
.wrap{
position:relative;
padding-top:37em;
}
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
.wrap{
padding-top: 5em !important;
}
}
With this in my header
<meta name="viewport" content="width=device-width, initial-scale=1">
What I am trying to do is change the padding on .wrap and it's not working. Can anyone tell me why it's not working?
#media (min-width: 320px) and (max-width: 480px){
.wrap { padding-top: 5em !important; }
}
You forgot the curly braces in #media.
For Mobile Responsive you have add these things :
In Header :
// Browser rendering properly
<meta charset="utf-8">
// Select device view port width
<meta name="viewport" content="width=device-width, initial-scale=1">
// for device touch gesture
<meta name="HandheldFriendly" content="true"/>
In CSS :
#media screen and (min-width:992px) and (max-width:1200px){
// css goes here
}
#media screen and (min-width:768px) and (max-width:991px){
// css goes here
}
#media screen and (max-width:767px){
// css goes here
}
On my website (www.wetter-goch.de) I'm showing current weather information. for mobile device i added the overflow-y css attribute to the div-container.
This is working like charm on iOS' Safari, but on Android the site does not allow to scroll through the content. additionally my background image is not scaled to the viewport-size of the mobile-device.
I'm creating the background by the following css
<style>
html {
background: url(<?= DataSource::getCurrentTimeLapsePath() ?>) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
HTML-Viewport Meta-Tag
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
Sidebar-CSS of the hole website...
.leftsidebar {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
overflow:hidden;
z-index:-1;
width: 280px;
height: 100%;
padding: 10px;
background-color: rgba(255,255,255,0.7);
overflow-y: auto;
}
Related media queries
#media only screen
and (min-device-width : 320px)
and (max-device-width : 1000px) {
.leftsidebar {
width: 100%;
}
.rightsidebar {
display: none;
}
.radar {
display: none;
}
.statistics {
display: none;
}
}
Hope anybody could help me solving this.
In order to use the media type that's specified you need to query the page to determine the style sheet to load. You'll need to added a media attribute to the style sheet that is for mobile "handheld". It'll then load the correct sheet on Android.
<head>
<link rel="stylesheet"type="text/css" href="theme.css">
<link rel="stylesheet"type="text/css" href="print.css"media="handheld">
</head>
.header {
background: #15181f url(images/bg-header.jpg) repeat;
color: #fff;
}
.footer {
background: #15181f url(images/bg-footer.jpg) repeat;
color: #fff;
}
Hey guys,
my header and footer background image not displaying correctly on mobile devices like android or iPhone, same goes for the iPad, the background image for header and footer is not getting displayed correctly, resulting in a cropped background image.
I tried with javascript and css, and technique after technique, but nothing works. It is neither one nor the other of these styles work on my WordPress website www.awebdesign.co.uk and I don't know what do with my mobile site anymore. I tried overflow-x: hidden; but did not want to do anything.
Tried these styles below
.header {
width:100%;
float:left;
height:100%;
display:block;
position:relative;
margin: 0 auto !important;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
z-index:10;
}
I also tired the following for the footer, but deleted it later because it didn't do anything good:
footer.footer {
width:100%;
float:left;
height:100%;
display:block;
position:relative;
margin: 0 auto !important;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
z-index:10;
}
Than I've implemented media queries,
#media only screen and (max-device-width : 480px)
#media only screen and (max-width: 768px)
#media only screen and (max-width: 1024px
and later changed to this,
#media screen and (max-width: 480px)
#media screen and (min-width: 768px) and (max-width: 979px)
#media screen and (min-width: 981px) and (max-width: 1024px)
However, it displays only the starting position of a background image on the left side. It doesn't display correctly across horizontal line, it displays vertically rather than horizontally. Please help me to find a solution to this problem and consequently learn how to apply CSS background image properties to both mobile and tablets (portrait or landscape).
I think my question is clear but if you have any questions, feel free to to ask, and I hope that others find this helpful too. Thanks in advance!
I deleted the CSS code above to clear my custom styles, the document structure, an HTML5 page, and classes will now look something like this:
<!doctype html>
<html>
<body>
<header class="header">
<div class="container">
<div class="panel_1"></div>
</div>
</header>
<section class="middle">
<div class="container">
<div class="full_width"></div>
</div>
<div class="clear"></div>
</section><!-- .middle -->
<footer class="footer">
<div class="container">
<div class="footer-nav">
</div>
</div>
</footer>
</body>
</html>
.container {
width: 940px;
margin: 0 auto;
}
.container:after {
content: "";
display: table;
clear: both;
}
.panel_1 {background:url(images/panel_0.jpg) left top no-repeat;
width: 940px;
height: 270px; /*border: 1px solid #09F;*/}
section.middle {background: #CCC; clear: both;}
.header {
background: #15181f url(images/bg-header.jpg) repeat;
color: #fff;
}
footer.footer {
background: #15181f url(images/bg-footer.jpg) repeat;
color: #fff;
}
footer.footer {padding: 36px 0; clear: both;}
.footer-nav {float: left;}
I think you mixed up the value cover with contain.
Contain will make your images snap to the width of the viewport and not scale them up until they meet the bottom of the element they are residing in.
Hope this helps. =)
I’m working on making stylized responsive classes for buttons. The text within the button should be the same size as the rest of the text on the page, and it works fine when resized on desktop, but when the pages are viewed on tablet/mobile, the size of the text in the button is much smaller than the normal text (its almost as though the em unit has changed sizes). This has happened in all tested mobile browsers—safari, chrome, and default android browser—and no matter the HTML element the class is being applied to (button, div, p).
I have another stylized class for a side menu that is experiencing the same text-shrinking effect (different class being applied to an ul). Interestingly, the shrunken text of the menu is the same size of the shrunken buttons’ text, so whatever text size transformation is happening to one is happening to another.
Any ideas on how/why this may be? Could it be related to the ‘auto-zoom’ of the mobile browser or something? I’m fresh out of ideas, and would love to hear any thoughts on the matter
.blueButton, .greenButton{
display: inline-block;
padding: .5em .5em .5em .5em;
text-align: center;
font-weight: bold;
color: white;
text-shadow: 1px 1px #636363;
border-radius: .3em;
box-shadow: .25em .25em .4em 0px #636363;
}
.blueButton a:link, .greenButton a:link, .blueButton a:visited, .greenButton a:visited{
text-decoration: none;
color: white;
}
.blueButton:hover, .greenButton:hover{box-shadow: .25em .25em .4em 0px black;}
.blueButton:hover{ background: #0b3a74;}
.greenButton:hover{ background: #9ec83d;}
.blueButton{ /*gradients for different browsers- 1)Safari 2)Opera 3)Firefox 4)Standard*/
background: -webkit-linear-gradient(left top, #3c78cc , #0b3a74);
background: -o-linear-gradient(bottom right, #3c78cc , #0b3a74);
background: -moz-linear-gradient(bottom right, #3c78cc , #0b3a74);
background: linear-gradient(to bottom right, #3c78cc , #0b3a74);
}
.greenButton{
background: -webkit-linear-gradient(left top, #caf170, #9ec83d);
background: -o-linear-gradient(bottom right, #caf170, #9ec83d);
background: -moz-linear-gradient(bottom right, #caf170, #9ec83d);
background: linear-gradient(to bottom right, #caf170, #9ec83d);
}
Media queries:
#media all and (min-device-width: 1101px)
#media all and (min-device-width: 768px) and (max-device-width: 1100px), (min-device-width: 1101px) and (min-width: 700px) and (max-width: 900px)
#media all and (min-device-width: 240px) and (max-device-width: 767px), (min-device-width: 768px) and (min-width: 240px) and (max-width: 699px)
#media all and (max-device-width: 239px), (min-device-width: 768px) and (max-width: 239px)
Add <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> in your <head> section.
I'm testing on both Nexus 4 - 4.1.1 - 768x1280 and Xperia Z - 4.2.2 - 1080x1920... In both cases, my site (which is responsive on desktops) is only partially responsive in android phones. WP8 works fine (surprisingly) - and iPhone 5 works - except the height is a little more than it should be (sticky footer isn't showing up). It's as if the CSS thinks there's an extra 100px or so - things are just slightly cut off when they shouldn't be. An example media query:
/* if device is less than 768px */
#media (max-width: 768px) {
.container{
width: auto;
max-width: calc(100% ~"-" 20px);
margin-left: 10px;
}
.banner-info{
padding-right: 15px;
width: auto;
max-width: 300px;
font-size: 13px !important;
}
}
In my header:
<meta content="True" name="HandheldFriendly">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
What's going on here?
Try adding target-densityDpi=device-dpi to your meta viewport. It's an Android specific value.
<meta name="viewport" content="width=device-width, target-densityDpi=device-dpi">
UPDATE:
I recently found out that target-densityDpi is no longer supported. I solved a similar problem by combining -webkit-min-device-pixel-ratio with max-width while also not using target-densityDpi in my meta viewport:
#media all and (max-width:360px),
screen and (-webkit-min-device-pixel-ratio: 3.0) and (max-width: 1080px),
screen and (-webkit-min-device-pixel-ratio: 2.0) and (max-width: 720px) {
// CSS HERE
}
http://caniuse.com/#feat=calc
The version on Android you are using does not support calc and you must provide a fallback. I suggest something like this:
width: 90%; /* fallback */
width: calc(100% - 20px);
But now your pixel-based margin is not going to result in a centered layout. At that point, I suggest you just forget the "calc" altogether and use plain 'ol css:
width: 90%;
margin: 0 auto;
Adroid phone like the nexus or Galaxy serie have a "retina desplay" mening the pixel ratio is 2 so you have to add this (-webkit-min-device-pixel-ratio: 2)
so
#media (max-width: 768px) and (-webkit-min-device-pixel-ratio : 2)
I used this code in header
<meta name="viewport"
content="target-densitydpi=device-dpi,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
it worked for me