I have made a responsive webpage which has a logo in center position. I could do it using the css such as logo {width: 615px; margin: 0 auto} which works well in firefox and opera browser. But it doesn’t work well in chrome browser. It moves slightly left in chrome browser. I want that the logo always display in center position (Desktop and Mobile) on firefox, opera and chrome. How could I fix it? For your kind information, there has some contents in right side of this webpage.
Demo: https://dl.dropboxusercontent.com/u/211935016/mobile_responsive/index.html
Remove the overflow: hidden which you don't really need for the logo. That should solve the issue.
.fix{
overflow: hidden;
}
Related
I have a parralax scrolling CSS implementation which works perfectly well for Safari and Firefox, but not Chrome.
The style to achieve parralax scrolling:
#somediv {
background: url(../assets/img/someImage.jpg) no-repeat fixed;
background-position: center top;
}
This style is being applied to a el.
Strangely, when I refresh the page at a section where the fixed background image should be, it appears, only for that particular section. When I start scrolling to see where I have set the other fixed backgrounds, they don't show until I refresh.
I've noticed users having performance issues with their parralax scrolling on Chrome but I'm not at that stage, just need it to work.
Any help is greatly appreciated.
there's a small white strip displaying on the right side of my webpage when viewed on iPhone. this has been asked on SO before but after trying a handful of solutions and debugging i still can't work it out.
can anyone work out which element is the root of problem?
source is http://buildtrumpwall.com
screenshot: http://s23.postimg.org/tkofnnere/i_Phone_Screen_Shot.jpg
its the min-width css attribute on your banner element
#banner {
margin-top: -180px;
width: 40%;
min-width: 400px;
}
remove that and it'll stop pushing your screen out past the screen boundaries
I'm building a Grid with background images but things go wrong in Safari.
(Safari 7, 6 and 5, tested in Browserstack )
This is the website. As you can see in Chrome, FF or IE there's a grid with background image set inline.
http://fourseasonsrally.com/1
In Safari I sometimes see the background image but then it suddenly disappears.. I could not reproduce the error in other browsers.
This is what the grid looks like on chrome
UPDATE 1: Shorthand CSS
It seems that shorthand css is ignored by Safari, I removed all the shorthand properties but the problem persists.
Any idea what might be going wrong?
Thanks!
You mean header logo (FOURSEASONS RALLY) not visible in safari - changes the below css.
present css:
.header {
background: url("../img/logo.svg") no-repeat scroll center center / contain #111;
}
remove the " / contain"
.header {
background: url("../img/logo.svg") no-repeat scroll center center #111;
}
When using -ms-viewport in CSS then scrollabe div (overflow scrollable) cannot be scrolled anymore.
Issue happens only in Windows 8 phone. Tablet seems to be ok.
Does anybody know a solution for this problem?
Setting the width to auto (like below) instead of device-width seems to solve the scrolling issue.
#-ms-viewport {
width: auto;
}
I know questions like this have been asked here, but a lot of the existing questions have answers that are now outdated. What I am needing is the following: a web page with preferably only CSS and HTML that has a fixed and centered background image. The dimensions of the background image that I am using are 1024x1024 with the idea being that the image will cover the screen in landscape and portrait modes. The background image must also be fixed, meaning that if the content on the page is scrolled, the background image does not scroll with the content.
I have a solution that nearly works:
CSS:
#background {
background-image: url('background.jpg');
background-position:center;
background-repeat: no-repeat;
width: 100%;
height: 100%;
position: fixed;
z-index: 0;
}
HTML:
<body>
<div id="background"></div>
<!-- content here -->
</body>
This solution works fine in portrait mode; fixed and centered are both working fine. But when I turn the ipad into landscape mode, the background image does not immediately resize to fill the new width, insead it shows a white vertical stripe on the right-hand side. When I scroll the content, then the background image resizes and fills the width correctly.
Does anyone know why the resize of the background is only happening when the page content is scrolled and does anyone know how to get this working correctly? I am only interested in this working in iOS 5, so the answer does not have to take other browsers or iOS 4 into account.
I think I can help. I am also new to mobile design, but encountered problems with white-space in mobile Safari immediately...
Try using the CSS properties min-width and min-height at 100%, or the size of your background image in pixels. This should force the viewport (which is what renders the white space) to adhere to the size of your background image consistently (in landscape and portrait).
Additionally, you might also try applying margin: 0 to the HTML or BODY elements.
Hope it works!
P.S. You might require this tag as well in your HTML:
<meta name="viewport" content="width=device-width">
But again, I'm new to this so I'm not sure if it is necesary.