My footer and other container divs seem unaligned in iPhone Safari (it looks OK on Android):
Nothing had worked so far. What could be the cause?
CSS:
html,
body,
#wrapper {
height: 100%;
}
body > #wrapper {
height: 100%;
min-height: 100%;
}
#content {
clear: both;
padding-bottom: 36px;
}
#header,
#content,
#footer {
padding-left: 20px;
padding-right: 20px;
}
.container {
margin: 0 auto;
width: 960px;
}
#footer {
background: url(images/footer_bg.png) repeat-x 0 0;
margin: -65px 0 0;
padding: 15px 0 14px;
position: relative;
clear: both;
height: 36px;
}
Live site:
http://www.pixelmatic.com/index-2/
You haven't really defined clear wrappers for your content sections, which makes this a bit harder to get everything to align. You could put some left padding on the left footer element if you wanted to move it over a bit, as it doesn't look great right up against the edge of the screen.
Anyhow, the section with the quote marks (top pink arrow in your image) is moved right by 4px because of the left margin of 4px on the latest-news div. You'll see the same thing by narrowing your desktop browser.
First I think it's the difference between the android and ios browser that will explain the difference between the browsers. Mobile browsers use zooming to fit a website to the device screen. Source: http://davidwalsh.name/zoom-mobile-browsers
<meta name="viewport" content="user-scalable = yes">
I think it's better to change it, so that the browser zooming is removed.
<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1">
Second: there is an extra css rule that overrides your .container:
.page-template-front-page-2-php .container {
width: 971px !important;
}
Maybe the css rule is forced to fit the screen.
The .container contains floating elements. De #content .container uses a overflow: hidden, but the #home-feed and #footer .containers doesn't have this declaration. The overflow: hidden will force the parent div to "see" that there is content inside. There are some disadvantages, but maybe it will do the trick.
Extra tip: why don't you use a css framework with a grid system like Twitterbootstrap, Foundation or Groundwork ?
Related
I've looked and looked for what should be a simple answer, and for some reason I can't find it.
I'm experimenting with this amazing slider gleaned from the example here. I'd be happy if mine looked like this, considering that my slider has larger images.
When I reset the code to accommodate the larger images I lost the entire thumbnail panel and its black background. Obviously I also lost the thumbnail navigation.
You can see from my page that I've added a border. Regardless of the container size, the thumbnails have disappeared either way.
I would be grateful if someone points me to the code or js that deals with this. I would also appreciate if someone gave me some idea about the many selectors such as .jssora05r and .jssora05rdn, none of which have any html equivalent and leave me wondering what purpose they serve or whether they can just be omitted.
Please use class name to define css for slider1_container.
.slider1_container {
position: relative;
width: 960px;
height: 628px;
/*border: 20px solid #E1D9CC;*/
overflow: hidden;
/*margin: 90px auto 0;*/
margin: 0 auto;
padding-bottom: 0;
}
And remove the following codes,
#media only screen and ( max-width: 1152px ) {
.slider1_container {
max-width: 92%;
border-width: 15px;
}
}
#media only screen and ( max-width: 800px ) {
.slider1_container {
margin-top: 10px;
border-width: 10px;
max-width: 90%;
}
}
#media only screen and ( max-width: 640px ) {
.slider1_container {
border-width: 5px;
}
}
And also, jssor.js is missing in your code. Please replace
<script src="../js/jssor.slider.js" type="text/javascript"></script>
with
<script src="../js/jssor.js" type="text/javascript"></script>
<script src="../js/jssor.slider.js" type="text/javascript"></script>
Edit
<div id="slider1_container" class="slider1_container" ...
Move thumbnails
Slides are always in slides container. If you make slides container smaller than slider1_container, then you have rest space to place your thumbnail navigator. You can use css to set position of your thumbnailnavigator, for example
<div u="thumbnavigator" class="jssort01" style="left: 0px; bottom: 0px;">
Reference:
http://www.jssor.com/development/tip-arrange-layout-adjust-size.html
http://www.jssor.com/development/reference-ui-definition.html
I have been having some real issues with CSS!
I have the following set up to centre the #Box div, which works perfectly on everything but mobile browsers. Because the screen size of the mobile browser is so narrow the left hand side keeps getting cut-off. I asked something similar previously and have tried to no avail to adjust it.
I have put the container and layout divs in since last time, but still the same problem occurs. Is there any way that I can adjust the code so that the left hand side doesn't keep getting chopped off?
.pageContainer {
margin-left: auto;
margin-right: auto;
width: 100%;
height: auto;
padding-left: 1.82%;
padding-right: 1.82%;
position:relative; }
#LayoutDiv1 {
clear: both;
margin: auto;
width: 100%;
display: block;
text-align:center;
position: relative; }
#Box {
width: 487px;
height: 181px;
position: absolute;
left: 50%;
top: 236px;
margin-left: -244px;
z-index:6; }
The html:
<body>
<div class="pageContainer">
<div id="LayoutDiv1">
<div id="Twitter">
<img src="images/TwitterNORMAL.png" onmouseover="this.src='images/TwitterHOVER.png'" onmouseout="this.src='images/TwitterNORMAL.png'"/>
</div>
<div id="Facebook">
<img src="images/fbNORMAL.png" onMouseOver="this.src='images/fbHOVER.png'" onMouseOut="this.src='images/fbNORMAL.png'"/>
</div>
<div>
<img id="Box" src="images/BOX.png" width="487" height="181">
</div>
</div>
</div>
</body>
The smarter way in 2012 to do this is to use Media Queries, some inspiration here
You basically create another style sheet which is loaded only for smaller screens. It might seem like an overkill now, but as your website grows, you will thank me for suggesting this (or you cannot ;))
Also, don't do margin-left: -244px;, its hacky and can cause cross browser issues. Show us some HTML and we shall show you a cleaner way.
Are you including a viewport meta tag? It should eliminate any scaling issues you may be having in mobile.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
To you CSS: <div>s are block elements, and their default behavior is to expand the width of their parent (100%). Those CSS declarations aren't necessary.
From your code, and layout, it doesn't look like you need #LayoutDiv1 or to use positioning.
This simpler code takes care of the left-side-cutoff (here's a fiddle):
.pageContainer {
margin:0 auto;
}
#LayoutDiv1 {
margin: auto;
text-align:center;
}
#Box {
width: 487px;
height: 181px;
top: 236px;
margin:236px auto 0;
}
And like a prev poster mentioned, you could add a #media query to load a smaller image for #Box on mobile (you can simply add a line or two [or 200] to your existing CSS file):
#media only screen and (max-width: 767px) {
#Box { background:url('imgs/mobile-hero.jpg'); }
}
I'm trying to make this website: http://501commons.org render the same on iPhone as on other browsers. On Android it works just fine. I have already added the -webkit-text-size-adjust: 100%; to the body style, which helped a little. What is still not working are the following pieces, and I can't figure out why mobile safari is not displaying them properly:
the top left logo just plain won't show up
the search box in the top right is way too far to the left
the red slogan in the header "A Resource for Nonprofits etc" is too large, too low, and extends beyond the right border
the font of the three nav menu items (Explore the Commons, Volunteer, Invest) is too large
Everything else seems ok, at least on the home page. What's weird is that all four problems above occur in the header.
Any help would be hugely appreciated!
Thanks!
I figured it out:
Top left logo
The logo not showing up was due to a strange non-cascading issue. The logo is an <img> tab inside an <a id="portal-logo" ...>. The #portal-logo has a display: inline-block; rule in the next-to-last stylesheet that applies to it, but not in the last one. In other words, this is what we have:
#portal-logo { /* in the last CSS file */
margin-bottom: 0;
}
#portal-logo { /* in the next-to-last CSS file */
display: inline-block;
margin: 1.375em 0;
}
Adding display: inline-block; to the last stylesheet magically makes the logo appear. Then I had to also fiddle with margins, position, top, etc to make it appear in the right place, but all these are in a CSS file that is loaded conditionally only on mobile browsers, so it's ok. It's just really strange that Safari on iOS does not cascade the display: inline-block; style!
Search box
I made the search box be rendered in the proper place by adding text-align:right; to its container, even though an earlier rule for the same container with text-align:left; makes it work just fine in every other browser.
Slogan
The slogan required the most tweaking. It's contained in a <div id="slogan">. Here is the old rule:
#slogan {
color: #EE3524;
float: right;
font-size: 110%;
font-weight: bold;
margin-right: -190px;
padding-top: 60px;
position: relative;
z-index: 1;
}
And here is the new rule that works on mobile safari:
#slogan {
-webkit-text-size-adjust: 100%;
clear:right;
color:#ee3524;
font-size:17.6px;
font-weight: bold;
float:right;
margin-right:0px;
padding-bottom:50px;
padding-top:0px;
position:relative;
text-align:right;
z-index:1;
}
One of the key differences is the absolute font-size in px, instead of as a % value.
Menu Items font
Likewise, specifying the font-size in px instead of % seemed to be the key here:
Old:
#portal-globalnav li a {
background-color: transparent;
color: #FFFFFF;
font-size: 1.2em;
font-weight: bold;
min-width: 3em;
padding-bottom: 11px;
}
New:
#portal-globalnav li a {
background-color:transparent;
color:#fff;
font-size:15.4px;
font-weight:bold;
padding-bottom:11px;
min-width:3em;
}
YMMV!
should be center-aligned website
I have built a website as above link, with wrapper center aligned properly in PC/Mac browsers. However, when running in iphone safari, it is left aligned, but not center aligned.
the wrapper code is:
#wrapper {
width: 939px;
background-color: #fff;
margin: 40px auto 5px auto;
padding-bottom: 50px;
}
Any ideas on it?
Thanks.
have you tryd:
#wrapper{
text-align: center;
}
#wrapper <yourChildrenId/yourChildrenClass/yourChildrenTag>{
display: inline-block;
//or
display: inline;
}
Mini hack, but if you set meta content width to the widest centered div it forces the iPhone screen to be that wide and doesn't mess the div centering up.
<meta name="viewport" content="width=[widest centered div];"/>
#wrapper{
width: 939px;
background-color: #fff;
margin: 0 auto;
padding-bottom: 50px;
}
Should do it. I dont know why you need the margin-top.? The provided link doesn't seem to work.
If you only need to support iPhone Safari or CSS3 compatible browsers, here's an elegant approach: http://www.html5rocks.com/en/tutorials/flexbox/quick/#toc-center
I have a construction that works well in all browsers except iPhone Safari, it sticks to left side though it's not supposed to.
.home{width: 980px; margin: 0px auto 0px auto;}
any advice?
Anyway I don't think IPhone screen width is more 980px ^^
In my case it wasn't working because the parent element was a flex div that wasn't properly prefixed. Here follows the solution if you fall into the same situation:
.parent {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.child {
margin: 0px auto;
}