Is it possible to have an “outside frame” or to create not fullwidth page with flexbox?
Like this page (where the “frame” is the blue): https://s22.postimg.cc/rlivo4ooh/outside_frame.jpg
Thanks!!
Is it possible to have an “outside frame” or to create not fullwidth page with flexbox?
Like this page (where the “frame” is the blue): https://s22.postimg.cc/rlivo4ooh/outside_frame.jpg
Thanks!!
You could set a huge flex container that will contain everything (probably the body), then set it to justify-content: center
. Then that flex container will have a single div in it with a max-width and flex-basis.
Something like this:
<body>
<div class="content">
<h1>Hello World</h1>
<p>This is some text.</p>
</div>
</body>
body {
display: flex;
justify-content: center;
background-color: darkblue;
margin: 0;
}
.content {
background-color: #fff;
max-width: 1000px;
flex-basis: 1000px; /* or width: 100%; */
}
It’s entirely possible to do this without flexbox though
Thank you so much, I will try this!
Is there in your opinion a better way to do it without flexbox @kevcomedia?
You could drop everything flex-related in the CSS above, then add margin: auto;
to .content
.
I tried to integrate the flex css into the exisiting code by adding the .body section and adding max-width: 1000px; to .section, but it’s left aligned now. What am I missing?
Since you opted to set the body’s flex-direction
to column
, horizontal alignment is managed by align-items
, not justify-content
.
Also note that the sections will only take as much width as they need, up to 1000px. You’ll need to add width: 100%
as well
Thanks for your quick replies @kevcomedia.
Would I be able to hire you for 30-60 mins to get a couple of small things fixed on this page? I couldn’t figure out how to message you…
I won’t be available for the day… I’ll PM you when I got the time