This section was designed in such a way to ensure an ideal vertical positioning for most scenarios in a predefined container. Your specified content, such as images or text, will be automatically placed and resized, depending on the screen.
Sturdy Design. No wonky feeling
Basic8 website template was designed with attention to details, not like other templates that break easily in a lot of scenarios. While designing Basic8 website template we did our best to create a simple and robust template.
Responsive across devices
Build with intelligent responsiveness across a multitude of devices! Basic8 template and all its sections are designed to be responsive considering both the width and the height of various viewports such as mobile, narrow, wide horizontal, vertical, or retina viewports.
Dual typography available
Any section, such as intro sections (for example full height container), could be automatically styled with one of the two available typographic themes: professional or stylish.
To learn more about it visit the style guide.
Simple! Yet, exquisite look & feel
Intentionally our sections are designed to breath space and to harmoniously manage the available vertical estate. Thus, images, text and call-to-actions fit together easy. You just need to replace the content with your own text and media.
Easy HTML5 & CSS3
You will need minimal HTML and CSS3 knowledge for figuring out how to create a full height section. Just reuse the corresponding full-height section clearly delimited in the code by HTML comments. In most scenarios you won't need to deal with CSS.
How to fill the web page height
Use predefined full-height sections
If you want to fill the full-height of the web page viewport on various browsers and devices, you simply have to browse the predefined full-height sections, select one and customize it. 3
These full-height sections were designed to stretch and to adapt intelligently to the viewport height and width, considering even wild scenarios such as huge horizontal or vertical monitor screen. Therefore, in some scenarios, height limitations take precedence over stretching fully to the height of the webpage to prevent breaking the design.
How to test this: just go to your browser and click zoom out to emulate what it will happen on a huge monitor.