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" />
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...
I am having difficulty with my menu on my website www.callumritchie.com
When I load the website the menu at the top of the page is already expanded and then when you click the menu icon it hides it.
I want the menu to be hidden when the page is loaded, requiring the visitor to click the menu icon to reveal/expand the menu.
HTML
Home
Work
Contact
About
jquery
$("#menuicon").click(function () {
$("#sitemenu").show("fast");
});
CSS
#switch {
cursor: pointer;
float: left;
position: relative;
z-index: 2;
background-color: #6ea9ca;
border-left: 15px solid #6ea9ca;
border-top: 15px solid #6ea9ca;
border-bottom: 15px solid #6ea9ca;
}
#switch img {
transition: transform .25s linear;
-moz-transition: -moz-transform .25s linear;
-webkit-transition: -webkit-transform .25s linear;
-o-transition: -o-transform .25s linear;
}
#menu nav {
font-family:'DroidSans';
margin-top: 23px;
display: inline-block;
position: relative;
height: 36px;
z-index: 1;
transition: all .25s linear;
-moz-transition: all .25s linear;
-webkit-transition: all .25s linear;
-o-transition: all .25s linear;
}
#menu.active nav {
left: -20em;
opacity: 0;
}
#menu.active #switch img {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
transform: rotate(90deg);
}
Try:
$(document).ready(function(){$("#sitemenu").hide()});
edit in response: just swap out #sitemenu for the id of the element you want hidden.
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;
}