Mixing
CSS to keep content in portrait or square mode
CSS to keep content in portrait or square mode
What would be the proper way to ensure that a webpage's square content is displayed "tall"? For example, if your phone or monitor is in portrait mode, then the content would take the full width, but if it's in landscape mode, then you'd get sidebars on the side of the content, so that the main body is a square, filling up the full height.
I've done this with JavaScript, by handling the resize event and checking the container's height and width, and manually calculating widths and margins. But I'm sure there's a better way, maybe even a pure CSS3 solution.
Looking at Google's responsive guide, I'm guessing maybe a custom stylesheet would do it, but I can't figure out how to always make the content always fill up either the height or width.
So here's what it would look like in portrait and landscape modes, where the red section is the main body, and the blue is extra filler space:
I'm currently trying Angular Material, so if there's a solution specific to that framework, that would work too.
Here's what the layout would be inside the body - the Angular material grid tiles are each square, so the grid is 2x2 with 4 equally sized squares, meaning the full body would a square - and I want that 2x2 grid to be as big as possible without scrolling:
<body>
<!-- if necessary -->
First square
Second square
Third square
Fourth square
<!-- if necessary -->
</body>
Is the red item variable in size or static?
– staypuftman
Jun 29 at 16:07
@SvenvandeScheur Thanks, edited with a simple sample - a 2x2 grid with square elements, forming a big square, where I want the big square to be as big as possible without scrolling, regardless of orientation.
– Joe Enos
Jun 29 at 16:13
@staypuftman The red item is a square made up of equal-sized square tiles, but the actual size is dynamic - I want the tiles to grow and shrink so that they take up the entire width or height of the device/monitor.
– Joe Enos
Jun 29 at 16:14
Would you need the same rules to follow for tablet devices as well, or just for mobile? Reason I'm asking is difference in device widths. Would you need the portrait mode on tablet devices to display a full width square, or since it's closer in size to mobile landscape would the square have padding?
– ghostdivider
Jun 29 at 16:26
3 Answers
3
You can use the following CSS:
body {
margin: 0;
background-color: blue;
}
#wrapper {
margin: 0 auto;
max-width: 100vh;
background-color: red;
}
ContentIn portrait mode the wrapper will have 100% width, in landscape mode the wrapper width will be same as screen height.
For completeness, here is an example that matches the screenshots in OP:
body {
margin: 0;
background-color: blue;
}
#wrapper {
margin: 0 auto;
max-width: 100vh;
background-color: red;
}
/* landscape mode: the wrapper is full height */
@media screen and (orientation: landscape) {
#wrapper {
min-height: 100vh;
}
}
/* portrait mode: the wrapper is same height as width */
@media screen and (orientation: portrait) {
#wrapper {
min-height: 100vw;
}
}
Content"vh" is exactly what I needed - that 100vh seems to be perfect. I suppose I need to study up on some CSS.
– Joe Enos
Jun 29 at 17:04
You can use some of the CSS grid defaults with the vh unit and get pretty close to this layout. Make a 2x2 grid, set the grid children to have a 50vh height, center the grid container.
vh
50vh
This works because vh will dynamically size to the height of the viewport automatically while display:grid takes over the horizontal positioning and makes the layout responsive automatically.
vh
display:grid
(Note: I put a max-width on the container and a tall height on <main> to show what's going on, but you don't necessarily need those).
max-width
height
<main>
HTML:
<main>
<section class="container">
</section>
</main>
CSS:
main {
height: 500vh;
}
.container {
display: grid;
grid-template-columns: 1fr 1fr;
margin: 0 auto;
max-width: 800px;
width: 100%;
}
.item {
background-color: lightblue;
border: 1px solid black;
height: 50vh;
}
Demo: https://codepen.io/staypuftman/pen/JZwvMQ
I had no idea that "vh" existed. Thanks!
– Joe Enos
Jun 29 at 17:02
Something like this?
body {
margin: 0;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: flex-start;
background: blue;
}
mat-grid-list {
display: grid;
grid: repeat(2, 1fr)/repeat(2, 1fr);
width: 100vmin;
height: 100vmin;
background: red;
grid-gap: 2px;
}
mat-grid-tile {
border: 1px solid #888;
}
<body>
First square
Second square
Third square
Fourth square
</body>
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
Please provide some code and context. It might be that you're looking for object-fit but it's hard to tell without any actual code.
– Sven van de Scheur
Jun 29 at 16:04