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.
Related
I have a problem, that when i view my site from mobile devices, it shows the default logo of the theme, I have updated the mobile logo in theme options, but also the logo is not changing..
So is there any way to find the default logo in theme coding and then replace it with my custom logo in mobile devices...or any other way!
I tried to hide the deafult logo and use custom logo for mobile devices by this code:-
#media (max-width: 480px) {
.site-title a {
background: transparent url("http://logo.png") no-repeat scroll 0 0 !important;
overflow: auto;
}
}
}
#media (min-width: 480px) and (max-width: 768px) {
.site-title a {
background: transparent url("http://logo.png") no-repeat scroll 0 0 !important;
display: block;
}
}
The above code does not work..
In desktop devices the logo is working fine, only problem with in android devices..
Wordpress does create a lot of problems.
I would suggest clearing cache for a proper update of the website. If you are using wordpress and any page builders, you can create the header in your Elementor Theme Builder and in there you can change from the Responsive tab anything you want to show in the Mobile and not in the Desktop.
Try This:
#media (max-width: 480px) {
.site-logo {
background: transparent url("http://logo.png") no-repeat scroll 0 0 !important;
background-size: cover;
padding: 0px;
margin: 0px;
width: 150px;
height: 50px;
}
.site-logo img
{
display:none;
}
}
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.
.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 am trying to add following mobile specific header but it's not taking effect
#header{
width:100%;
padding:25px 0 20px 0;
border-bottom:1px solid #ddd;
position: fixed !important;
overflow: visible;
top: 0;
left: 0;
margin:0;
z-index: 99;
}
/* Diable border bottom on Mobile Devices */
#media only screen and (max-device-width: 480px) {
#header {
border-bottom:none;
}
}
+++ ADDED +++
I am trying to remove a line displaying underneath Home Services Portfolio on mobile devices (screenshot: http://imgur.com/Q4pTNMG), which works well on computer screens. The website is: modcansolutions.ca
The line isn't just being caused by the border-bottom attribute, but also the boxshadow class which is giving a box-shadow, looking much like a border.
Simply assign box-shadow: none along with border-bottom: none into your css code and it this should fix it.
#media only screen and (max-width: 480px) {
#header {
border-bottom: none;
box-shadow: none;
}
}
Edit: try to remove -device:
/* Diable border bottom on Mobile Devices */
#media only screen and (max-width: 480px) {
#header {
border-bottom:1px solid #ddd;
}
}
Edit #2:
You're actually not assigning anything new. Your styling is the same as the original. border-bottom:1px solid #ddd; is also in the original CSS.
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