I'm in a bit of a fix. I'm working on a project and the method div style="margin:0 auto;" works perfectly fine of a desktop, but gets messed up on mobile devices.(information getting randomly aligned as opposed to horizontal center). Strangely enough, on an earlier website , I used the "center" tag and that seems to work like a charm. It even aligns itself beautifully in the landscape and portrait modes perfectly on mobile devices.
I'm reluctant to use the 'center' tag as I'm told this tag will be eventually weeded out. Any suggestions?
Sorry, I should have said this. I did use an external style sheet (just mentioned div style to convey the point). What about the center tag? Is it okay to use it or have I been correctly informed that it will be weeded out?
And you might have to fix your layout with media queries for mobile devices.
.divouter2{width:100%; text-align:center;}
.divinner2{width:990px; margin:0 auto;}
....... and so on
And then place them one below the other(the inner div within the outer div of course, and then divs 1,2,3, one below the other). I hope this is the right way to code.
You set the width to 990px which won't work on mobile as it's much wider than a typical mobile viewport. You could try max-width but I would use media queries.
just to confirm what you've heard, the center tag IS deprecated in html5.
Thanks. Strange though that it does seem to re-size the web page even on mobile devices ( at least the one I made). Will have to go with chrisburton's suggestion, I think.
I Did have a problem design for mobile once, where are give a white space on the right side of the device, to solve the problem I've used the meta declaration for view port from H5BP.
For mobile devices, I tend to set divs to width 90% / 95% and then margin: 0 auto; them. But yea, don't forget the meta viewport which will sort everything out for you :)
For mobile devices, > I tend to set divs to width 90% / 95% and then margin: 0 auto; them
What difference does that give over specifying the width in px and then setting the margin to 0 auto? Because I know that my method doesn't work. I'll try the meta viewport today. If not, I'll have to check media queries.
Hello,
I'm in a bit of a fix. I'm working on a project and the method div style="margin:0 auto;" works perfectly fine of a desktop, but gets messed up on mobile devices.(information getting randomly aligned as opposed to horizontal center). Strangely enough, on an earlier website , I used the "center" tag and that seems to work like a charm. It even aligns itself beautifully in the landscape and portrait modes perfectly on mobile devices.
I'm reluctant to use the 'center' tag as I'm told this tag will be eventually weeded out. Any suggestions?
Use a stylesheet, not inline css. And you might have to fix your layout with media queries for mobile devices.
Sorry, I should have said this. I did use an external style sheet (just mentioned div style to convey the point). What about the center tag? Is it okay to use it or have I been correctly informed that it will be weeded out?
Will try that. Thanks. Anyway, this is how I code
.divouter1{width:100%; text-align:center;} .divinner1{width:990px; margin:0 auto;}
.divouter2{width:100%; text-align:center;} .divinner2{width:990px; margin:0 auto;} ....... and so on
And then place them one below the other(the inner div within the outer div of course, and then divs 1,2,3, one below the other). I hope this is the right way to code.
P.S I am a novice
just to confirm what you've heard, the center tag IS deprecated in html5.
You set the width to 990px which won't work on mobile as it's much wider than a typical mobile viewport. You could try
max-widthbut I would use media queries.Thanks. Strange though that it does seem to re-size the web page even on mobile devices ( at least the one I made). Will have to go with chrisburton's suggestion, I think.
That's what I would do. Thanks.
I Did have a problem design for mobile once, where are give a white space on the right side of the device, to solve the problem I've used the meta declaration for view port from H5BP.
Inside my Head tag. Try it out, if don't work let us know, and if possible host the code somewhere (on your host or codepen, gist, you know).
Sure. Thanks.
For mobile devices, I tend to set divs to width 90% / 95% and then margin: 0 auto; them. But yea, don't forget the meta viewport which will sort everything out for you :)
What difference does that give over specifying the width in px and then setting the margin to 0 auto? Because I know that my method doesn't work. I'll try the meta viewport today. If not, I'll have to check media queries.