How To Make A Fullscreen Responsive Website

How To Make A Fullscreen Responsive WebsiteRyan CullumBlockedUnblockFollowFollowingJan 5IntroductionIf you’re beginning with CSS or are even an experienced vet you’ve probably figured out that positioning elements to get them in the right spot hasn’t always been easy.

Maybe you’ve experienced trouble in sizing your content on a website.

Whatever the case may be, creating a fullscreen website consists of using the appropriate units and a technology called CSS FlexboxIn this tutorial, we’ll be focusing on Flexbox and the vh unit to create a beautiful minimalist website.

An example of our finish product is below.

[codepen_embed height=”436" theme_id=”0" slug_hash=”wRPoXQ” default_tab=”html,result” user=”racullum”]See the Pen Full Paged HTML Sections by Racullum (@racullum) on CodePen.

[/codepen_embed]So let us break up our website into three parts:Step #1: Create HTML skeleton.

Step #2: Style HTML skeleton.

Step #3: Enlarge our HTML sections to full screen.

Step #1: Create HTML SkeletonFirst, we need to figure out what the structure is going to look like.

I’ve opted for each color to be under its own section.

In reality, you could wrap your “About” page in one section and your “Mission” page in another.

For example purposes, we’ll just stick to our 7 colors of the rainbow.

For each color, we will start with a section that wraps a div and two header classes, one for the color name and the other for the color attributes.

 Like so …<html> <body> <section style=”background: #f44336;”> <div class=”red”> <h1>Red</h1> <h3>Excitement.

Energy.

Passion.

</h3> </div> </section> </body></html>Create six more sections for the next six colors of the rainbow.

You should end up with something that looks like this …Step #2: Style HTML SkeletonNow that we have the general structure of our HTML document we need to give it a little style.

First I’ll give you the style sheet and then explain what I’ve done.

Let’s take this element by element …body { margin: 0; padding: 0;}Setting both margin and padding to 0 ensures that the background color for each section can take up as much room as possible!h1 { font-size: 10vw; color: #ffffff; padding-left: 7vw; margin-bottom: 0; }Just adding some padding to the left hand side of the color name and eliminating the margin at the bottom so we can have a clear sub-title under the color name.

Font Size is a product of the width of the view port.

A great way to make the header elements responsive.

h3 { margin-top: 0; padding-left: 7vw; color: #ffffff; }Same as our h1 element, just moving it over a bit and making sure the text is nice and cozy next to our color nameStep #3: Enlarge our HTML Sections To FullscreenSo now we come to the meat of our tutorial.

Currently, we only have the section elements taking up as much space that is needed for its content and that’s it.

What we need to do is utilize CSS Flexbox.

Flexbox will allow us to lay out the sections in order much like stacked books.

Using the ‘display: flex’ option in our style sheet we can force the elements within the section to follow the philosophy of CSS Flexbox.

Follow this guide to get an in-depth look at Flexbox.

Adding ‘display: flex’ like so …section { display: flex;}will now eliminate all white space on the document.

We’re not done yet though!.We need to add in one more attribute to the style sheet so our color sections take up the entire screen.

For that, we will use the relative length unit ‘vh’ .

‘vh’ stands for viewport height and it is relative to 1% of the viewport’s height.

So if we add ‘height: 101vh’ to the section element in our style sheet we should now see our color sections take up the entire screen …One More Thing …Fullscreen web pages are cool and all, but let’s take this one step further and make our website responsive!Responsive design should always be in the back of your mind, especially now that we live in a mobile-first world.

Our website might look good on a desktop, but does it look great on a mobile phone?With media queries, we can ensure that we have a thoughtful design for all types of devices.

Think of a media query as a breakpoint almost like the height test for fair rides.

If you are over a certain height you get one experience while the shorter kids got another.

Let us add a media query that says if a device has a width up to say 600px rearrange the elements in a more readable way …@media only screen and (max-width: 600px) { section { align-items: center !important; } h1 { padding-top: 0 !important; } }Once you add that to the style sheet you now have your finished product …Congratulations!Alright!.Hopefully, you now have the knowledge to implement fullscreen pages within your own website.

I hope this tutorial has been beneficial to you and you got something from it.

Leave any comments or suggestions for this tutorial you have!.

. More details

Leave a Reply