I am trying to target specific devices with media queries but I can not get the styles to work. An example I am trying in a test environment is targeting an iPhone 5 like this:
#media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) {
.our-aim, .freedom, .quote, .bullet-list {
font-family: "aktiv-grotesk-std-i3","aktiv-grotesk-std",sans-serif;
font-style: italic;
font-weight: 300;
font-size: 1.2em;
}
}
#media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (orientation : portrait) {
.our-aim, .freedom, .quote, .bullet-list {
font-family: "aktiv-grotesk-std-i3","aktiv-grotesk-std",sans-serif;
font-style: italic;
font-weight: 300;
font-size: 1em;
}
h2 {
font-size:1.5em;
}
}
Is this wrong?
Can anyone help?
Related
my image (640x 360)
my sclass
.auth-home {
background-image: ('./assets/img/auth-background.jpg');
background-size: 100%;
background-position-y: 50%;
}
i try set background-image:
background-image: ('assets/img/auth-background.jpg') no-repeat center center fixed;
background-image: ('../assets/img/auth-background.jpg') no-repeat center center fixed;
background-image: ('./assets/img/auth-background.jpg');
but ONLY device not display
In the page scss:
page-yourPageName {
ion-content {
background-image: url("../assets/img/auth-background.jpg");
}
}
Demo here: http://jsfiddle.net/z2mw3k0a/1/
It works fine on desktop. However, when I use iphone to test Addthis button. The share window will pop up and then hide immediately.
I debugged on safari, and can't figure out the problem,
I just found, for #at4m-menu element, there has a style
.at4-show {
display: block!important;
}
When you unchecked this style on safari inspect element tool and check it again, the pop up window will show.
Any help are appreciated.
This problem is fixed by addthis.
Find the problem related with slideInUp animation.
#-webkit-keyframes slideInUp {
0% {
-webkit-transform: translateY(1500px)
}
0%,
to {
opacity: 1
}
to {
-webkit-transform: translateY(0)
}
}
#keyframes slideInUp {
0% {
transform: translateY(1500px)
}
0%,
to {
opacity: 1
}
to {
transform: translateY(0)
}
}
.slideInUp {
-webkit-animation-name: slideInUp;
animation-name: slideInUp;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
}
.red{
position: fixed;
background: #ff0000;
top: 0;
left: 0;
right: 0;
bottom: 0;
font-family: helvetica neue, helvetica, arial, sans-serif;
font-size: 14px;
font-weight: 300;
display: block;
width: 200px;
height: 200px;
opacity: 0;
}
<div class="red slideInUp"></div>
It works fine in chrome, but not in safari.
I have made a webpage with a background:
<style>
#import url(http://fonts.googleapis.com/css?family=Mouse+Memoirs);
body {
background-image: url('Header.png');
margin: 0;
color: white;
font-family: 'Mouse Memoirs', sans-serif;
}
</style>
<div align="center">
<h2>ThePeopleHubProject</h2>
</div>
How can I prevent the background from distorting when zooming?
I don't want it to be able to do this: http://imgur.com/8NpvlV9
Only this: http://imgur.com/zmepCPi
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
That should get you pretty far...
Logo bere: San-Francisco-Family-Photographer.com
On the iphone, the image won't center.
.header-image #header #title-area {
background: url("http://www.san-francisco-family-photographer.com/wp-content/uploads/2013/04/Joey-Chandler-Photographer-square.png") no-repeat scroll center center transparent;
background-position: center;
height: 130px!important;
width: 180px!important;
}
.header-image #title-area, .header-image #title, .header-image #title a {
display: block;
margin-left: auto;
margin-right: auto;
}
Thanks.
You could place it in a div and center it.
div#image {
background: #282;
width:130px;
height:130px;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
}
I am having a rough time with responsive design on this one site. Don't know what is happening, and my code has kind of turned to crap as a result, this is a modified zurb foundation grid, however the client wanted left navigation. Once the design drops to an iphone for some reason the width of the top elements (logo, menu) has some margin, padding or is only approx 80% width. See http://eseamedia.com/lm
#media only screen and (max-width: 767px) {
.menu {
background: none;
padding: 0;
margin: 0;
height: auto;
max-width: 100%;
min-width: 100%;
position: relative;
display: table;
float: none; }
.menu nav {
height: auto;
margin :0 auto 26px auto;
width: 100% }
.menu ul li a {
margin: 0 auto;
width: 100%;
display: block;
text-align:center; }
.logo {
background-position: center center;
background-color: transparent;
margin 0;
height: 104px;
width: 321px;
padding: 0 }
.info {
position:relative }
.headline{
margin:0;
position:relative;
padding:0;}
.context, .wrap {
margin:0;
left:0;}
}
use meta tag
<meta name="viewport" content="width=device-width, maximum-scale=1.0" />