I’m trying to get a table to center vertically on the page. It works fine in Chrome on a PC, but if I preview it on a device (by rt-clicking in Chrome and choosing Inspect), the vertical centering is off. It seems to me as though the HTML element that everything is inside of doesn’t scale the full 100% of the device’s height. Any ideas what’s going on? Here’s the link:
http://www.mickposch.com/test_javits.html
First of all, check your mark-up.
In the style section you have a typo, an errant <br>
That could be breaking the height setting for the body.
body {
width: 100%; margin: 0;<br>
height: 100%;
display: table-cell;
}
1 Like
Hi Mickmeister, welcome to the forums!
Perhaps a table isn’t the most appropriate to use to achieve the centering.
Could the centering be achieved using e.g. a div or is a table the only option?
You haven’t implemented the viewport meta tag which means that mobile devices will get an approximation of the design. They do this by assuming a width of 980px (approx) and then simply scaling the whole thing smaller until it fits the viewport width. Your css dimensions inside will have nothing to do with the mobile viewport as such.
If you want to display on mobile then you need the viewport meta tag.
<meta name="viewport" content="width=device-width, initial-scale=1">
Then you would need to style the page using media queries for smaller viewports in the most appropriate way.
Unfortunately your page is using a lot of deprecated tags so you probably need to start again from scratch if you want to do it properly and build a responsive site. Otherwise just live with what you have got now.
1 Like
The break doesn’t seem to be hurting anything…removing it doesn’t fix the issue.
I just went with a table because it’s what I’m most familiar with, and the project is pretty simple - just a portfolio for my 3d and illustration work. Although I did try another variation where I put the table inside a div rather than an outer table, and had the same issue.
I haven’t done site design in a long time, so I haven’t worked with media queries. Are you suggesting using media queries for different device sizes which would then cause the layout to re-shuffle itself accordingly? The example I linked to wouldn’t need to do that - it would just be a single image with a text blurb below it. So I’m really just looking for a way to have the content scale to fit the screen of a mobile device - as it’s doing now - but vertically centered.
Another question: You mention that the code contains deprecated tags. I’m using Dreamweaver CC; the code also contains some stuff I found online. Do you think the old version of DW is adding obsolete code, and maybe I shouldn’t be using it?
Unfortunately unless you use the viewport meta tag you cannot have any control how it will fit into a mobile viewport.
A mobile browser will look at the page and see it doesn’t have the meta viewport tag and then basically it takes a guess the page is 980px wide and will scale that 980px down and down until it fits in a 320px viewport or whatever phone you have. The width and height are scaled down proportionately just as if it were an image. That means the height will be based on the height it was at desktop size and scaled proportionately with the width. It won’t care if the mobile viewport is 100px tall or a 1000px tall. All it cares about is making the width fit in the viewport. Indeed your text would be unreadable for me using that method as it would be scaled very small and users would need to pinch to zoom to read anything.
i.e. this is your layout on a small screen.
As you can see it is unreadable.
The only way to match a viewport height on mobile is to use the meta tag and use media queries to style as required.
I did a quick demo of your code adding the viewport meta tag and a small media query and I get this result.
You can see the code here:
Here’s a second version with the arrows centred on the image and not the image and caption.
(Click the 'Edit on codepen link to see the full size page)
Yes that’s very likely You would be better off using a more modern editor. There are some good free ones such as brackets. I do most of my demos on codepen these days which is free also and good to practice with.
Going offline now and back tomorrow afternoon 
2 Likes
Ahh, very cool…that does the job! Clearly I need to update my techniques…I’m going to have to look into Codepen and Brackets before I continue the project. Many thanks, Paul!
1 Like
Good luck
PS: Don’t forget the viewport meta tag which goes into the head of the page.
<meta name="viewport" content="width=device-width, initial-scale=1">
1 Like
So I ditched Dreamweaver and I’m re-working your page in Brackets. I’ve added that Close Window icon (the “X” inside the rectangle), and I’m trying to get it so that its upper edge always aligns with the upper edge of the main image - so I tried using a grid to position it. (I’ve temporarily made your inner div red and my grid blue). So I need the grid to scale dynamically to the same height as the main image. I tried to get it to auto scale vertically to the boundaries of the red div, but no amount of messing with the height settings of the grid container or its rows seems to work. Any ideas?
Link:
Vertical scaling grid
Hi,
You will need ot change the alignment of the flex to stretch rather than center because you lose the equal heights when you centre like that. You can still centre the arrows using align-self.
Make these changes.
.inner{align-items:stretch;}
.arrow-left{align-self:center}
.grid-container{
grid-template-rows:50px auto 50px;
}
.grid-item:nth-child(2){
align-self:center;
}
Then it will look like this assuming I understood what you wanted
1 Like
That does the job! Thanks, you da man!
1 Like
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.