I'm having issues aligning a website to the center on mobile devices - it is currently left aligned.
The website can be viewed here†.
I have viewed this question but it has not helped; when <meta name="viewport" content="width=device-width, maximum-scale=1.0" /> the alignment does not change. The margin is set to 0 auto however the problem remains.
† The website no longer exists, link changed to Internet Archive but CSS not preserved.
You use a fixed width:
#unfloated-container{
width: 1000px;
}
You can use "CSS media query" (try googling for that) to set different size for smaller screens and keep the current size for screens you choose.
You may also need to set different margins (and even more different settings) when the page is viewed in smaller screens!
EDIT 1: My comment from an other answer, copied to describe the possibilities for changing floats, width and all other needed settings (styles) for specific screen sizes:
It seems the HTC tries to fit the browser to avoid horizontal scroller. But the problem remain in your CSS, so it seems better to try css media queries (as proposed in my answer) and adjust the style for mobile devices only! This way you can remove floats (float: none), set the width to "width: auto" and adjust margins where needed!
I believe this has better fixed your alignment issue but the banner image is still messed up a bit as it was in your original link:
#unfloated-container{
margin: -600px auto 0 auto;
padding: 0;
width: 80%;
height: 100%;
}
#container{
margin: 0;
padding: 0 0 0 0;
width: 100%;
}
/*~~~~~ Banner ~~~~~*/
#banner{
margin: 10px 0 0 0;
padding: 0 0 0 130px;
width: 100%;
height: 280px;
float: left;
text-align: center;
}
#banner-image{
margin: 10px 0 0 0;
padding: 0 0 0 0;
width: 100%;
height: 300px;
background-image: url(../images/banner.jpg);
background-repeat:repeat-x;
}
/*~~~~~~ Links Bar ~~~~~*/
#links{
margin: 300px 0 0 60px;
padding: 7px 0 0 5px;
width: 75%;
height: 100px;
font-size: 20;
}
/*~~~~ Content Area ~~~~*/
#content{
margin: 0px 0 0 0px;
padding: 104px 55px 0 80px;
height: 550px;
width: 865px;
float: left;
overflow: scroll;
overflow-x: auto;
overflow-y: auto;
}
You need to set BOTH the viewport width (as you suggested in your question) AND your CSS properties.
To have a mobile responsive website, you need all your css properties to be percentage based. For example, you currently have a css property named #unfloated-container set to 1000px.
That means that your site will always be 1000px wide. Try changing it to 80% instead (or any % you need).
Hope this helps!
Related
I struggled for some time with this issue. My landscape images looked great but I couldn't get my portrait orientated images to align properly. This is the code I had and the auto margin and padding seemed to have no effect at all and the image would always align to the left of the slider (parent element).
.slider img#portrait {
min-height: 100%;
width: auto;
margin: 0 auto;
padding: 0 auto;
}
I managed to find little snippets of what might solve the problem from different sources so I wanted to include all of the ones I used here in one place.
This is now what I have which works well:
.slider img#portrait {
height: auto;
width: 50%;
display: block;
float: none;
position: relative;
margin: 0 auto;
padding: 0 auto;
}
Images are by default displayed as inline-block elements. So change this to display: block;
If there is a float: left; then the rulemargin: auto; will have no effect either, so set float: none;
The margin auto will have no effect either unless the image has a set width so width: 50%;
And don't forget to set position: relative;
If you are not modifying the display property of images then you can use: .slider {text-align: center;}. (Only works if applied to parent element.)
I'm looking at a simple web page layout but I want to fix the 3 centred columns to an absolute maximum height.
I've created this FIDDLE, which is missing the images, but as you can see the first column is longer than the others as there more text in it.
This appears to be the css that is being used, but I'm not sure what to change.
.home_section_left{
width:270px;
height:auto;
float:left;
margin:0 14px 0 14px;
padding:0 10px 20px 10px;
background:url(images/home_block_bg.gif) no-repeat center bottom;
}
How do I fix the length of the columns regardless of the length of data/text entered ?
You can add a max-height and overflow: auto; to the tags you want to limit the height like this:
.home_section_left {
max-height: 300px;
overflow: auto;
}
This will limit the div height and apply scrollbars to it when necessary
Hope this will help as your needs,
.home_section_left
{
width: 270px;
height: 200px;
float: left;
margin: 0 14px 0 14px;
padding: 0 10px 20px 10px;
overflow: hidden;
background: url(images/home_block_bg.gif) no-repeat center bottom;
}
//sorry for the bad formating, i am on my phone...
When someone asks how to center a page, then the response is like:
margin-left:50%;
left:(-1/2 width);
I used this code on a site with a width of 1000px,so it comes to screens, where this site does not fit.
Now the site gets centered on the smaller screen and gets equaly pushet to left and right.
So lets say, our screen is 600px wide:
200px are left
600px are on screen
200px are right
You can scroll to the right, but the pixels on the left are unreachable...
How can i solve this to control, how much of my site gets dragged to the left in case of smaller screens?
This is especially important for mobile phones...
If you are worried about different screen sizes then I highly suggest using Media Queries but this is also a useful way of setting up centered elements. Just use a % width instead of a set width and followed by margin: 0 auto;
Look at fiddle for visual aid. (If this answer does not suit your needs at all then I'll gladly remove it)
div {
margin: 0 auto;
width: 80%;
height: 500px;
background: mediumSeaGreen;
}
JSFIDDLE
Your best bet (Ignore the CSS it's from my portfolio.
.subMenu {
display: none;
float: none;
width: 100%;
background: rgba(254, 126, 1, 0.5);
border-bottom: 5px solid rgba(0, 0, 0, 0.6);
font-size: 20px;
padding-left: 60%;
position: relative;
left: 0;
top: 3.85em;
list-style-type: none;
padding: 1.5em 0;
margin: 0;
overflow: hidden;
}
#media only screen and (max-width: 680px) {
.subMenu {
top: 4.9em;
font-size: 10px;
min-height: 100% !important;
padding: 0;
background: rgba(0, 0, 0, 0.5);
}
}
You can also use jQuery to dynamically find the width.
var width = $('div').width();
$('div').text(width);
You could try using margin: auto
http://jsfiddle.net/56N9w/
As you see there if you make the window too small for the content to fit it will left align by default
Use this:
margin: 0 auto;
width: 400px;
alternative:
margin: 0 auto;
width: 50%;
another alternative:
#outer-div {
margin: 0 auto;
width: 50%;
}
#inner div {
/* insert any CSS you want here */
}
NOTE 1: When using margin: 0 auto, you need to define the width otherwise it won't center.
NOTE 2: You should really put it inside another box, or make the page width 100% (or a width larger than the box).
NOTE 3: You can't center vertically with margin: auto auto. This simply won't work. See below for the solution to this:
Centered box both horizontally and vertically:
Working in jsbin:
http://jsbin.com/OSUViFi/1/
The code (same as the jsbin above):
page.html
<div id="outer-container">
<div id="inner-container">
<div id="centered-box">
</div>
</div>
</div>
style.css
#outer-container {
width: 100%;
height: 100%;
display: table;
position:absolute;
overflow: hidden;
}
#inner-container {
display: table-cell;
vertical-align: middle;
}
#centered-box {
margin: 0 auto;
height: 400px;
width: 400px;
background: #000;
}
Specific for your needs (not including vertical alignment which it looks like you don't need):
jsbin example:
http://jsbin.com/axEZOTo/2
The code (same as the jsbin above):
page.html
<div id="container">
<div id="centered-box">
</div>
</div>
style.css
#container {
width: 1000px;
margin: 0 auto;
height: 100%;
background: #999;
}
#centered-box {
max-width: 70%;
min-width: 200px;
height: 500px;
margin: 0 auto;
background: #000;
}
Here, the smallest it can go is 200px, this number you can change to the smallest amount that you want to allow your box to have.
NOTE:
I finally figured out what you were trying to say in your question, which was poorly worded.
You only used 600px as an example, but you really just want to have it be a fluid layout that changes with screen size.
I am building an web application .
I have added a footer to the page .
The footer become larger in Firefox ( horizontally ). Any possible reasons ?
The footer is a sticky div as mentioned here - http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
Container CSS -
.container{
background: #ffffff;
width: 90%;
min-height: 100%;
height: auto !important;
height: 100%;
background: #FFF;
margin: 0 auto -60px;
max-width: 1200px;/* a max-width may be desirable to keep this layout from getting too wide on a large monitor. This keeps line length more readable. IE6 does not respect this declaration. */
min-width: 768px;/* a min-width may be desirable to keep this layout from getting too narrow. This keeps line length more readable in the side columns. IE6 does not respect this declaration. */
}
Footer CSS -
#footer {
height: 60px;
background-color: #F0F0F0 ;
width: 90%;
margin: 0 auto 0;
-moz-border-radius: 2px;
border-radius: 2px;
}
Just add these two property of footer element as of container element
#footer
{
max-width: 1200px;
min-width: 768px;
}
remove -60px in margin in css to solve this issue of fixed footer UI design
http://talk.thegoodhumor.com/
As you can see here, the height just isn't continuous and I have no idea why.
I've toyed with it for quite a while now, and I am still baffled.
First of all , margin: 0 auto; is used to center elements , it is also not possible to make a page with infinite height , but you can maximize it's height by using
.body{
text-align:center; /* IE Center trick because margin:0 auto; will not work. Go go IE! :D */
}
.wrapper{
min-height: 1080px;
height: 1080px;
width: 100%;
/* DO NOT RESTORE THE ALIGNMENT HERE --- */
}
.wrapper .div {
margin:0 auto; /*center the elements */
text-align: left; /* restore the alignment */
min-height: 100%; /* maximize the height; make it 1080 pixels */
height: 100%; /* not necessary but i like to add it as well :) */
}
margin: 0 auto; 0 means that there will be 0 space between the division and the element thats right above it and auto will adjust the right spacing to be the same with the left one :)
It goes like this margin: top right bottom left;