My three columns are not aligning properly with everything else? My header, footer, featured is all aligned but that's because it's a single div and not multiple.
demo: http://jsfiddle.net/Zevoxa/3LDUd/
<body>
<div id="header">
<h1>LOGO</h1>
<div id="nav">
<ul>
<li>Home</li>
<li>Products</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
<div id="content">
<div id="feature"><div style="text-align:center">
<p>Feature<p>
</div>
<div class="article column1">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="article column2">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
<div class="article column3">
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.</p>
</div>
</div></div>
<div id="footer"><div style="text-align:center">
<p>© Copyright 2013</p>
</div></div>
</body>
</html>
http://jsfiddle.net/persianturtle/3LDUd/1/
You had the width set to 33.3px instead of percent.
.column1, .column2, .column3 {
background-color: #efefef;
width: 30%;
float: left;
margin: 10px;
display: inline-block;
}
I've made the widths of the articles 33% and instead put the 10px margin around the tag within it. Also added a clearer div, check it out here:
http://jsfiddle.net/dzHgX/
.column1, .column2, .column3 {
background-color: #efefef;
width: 33%;
float: left;
display: inline-block;
}
.column1 p, .column2 p, .column3 p {
margin: 10px;
}
Related
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
margin: 0 auto;
}
.header {
padding: 2.5rem 0;
margin-bottom: 1rem;
background-color: #c8bfbf;
}
.content {
display: flex;
flex-direction: row;
}
.navbar-list {
display: flex;
flex-direction: row;
list-style: none;
}
.list-item {
margin-left: 1rem;
}
.footer-list {
display: flex;
flex-direction: row;
list-style: none;
}
.footer-content {
display: flex;
flex-direction: row;
list-style: none;
justify-content: space-between;
}
.main-container {
width: 1200px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<title>CSS Assignment</title>
</head>
<body>
<nav>
<ul class="navbar-list">
<li class="list-item">Home</li>
<li class="list-item">About</li>
<li class="list-item">Service</li>
<li class="list-item">Contact</li>
</ul>
</nav>
<div class='header'>
<h2>We Provide the best IT Services</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum, assumenda distinctio. Fugit, quam veritatis
officia mollitia ex fugiat beatae temporibus.</p>
Know more...
</div>
<div class="content">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Amet ex itaque voluptates facilis earum quis
similique, quasi quisquam nesciunt nulla ab esse veritatis molestias. Sapiente dolore molestiae error, quos
pariatur minima omnis, ipsa quis et a porro dignissimos totam officiis ad quo eos quae natus dicta ullam
cupiditate tempore? Omnis labore exercitationem eaque asperiores illum praesentium nobis, a velit molestias?
</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Amet ex itaque voluptates facilis earum quis
similique, quasi quisquam nesciunt nulla ab esse veritatis molestias. Sapiente dolore molestiae error, quos
pariatur minima omnis, ipsa quis et a porro dignissimos totam officiis ad quo eos quae natus dicta ullam
cupiditate tempore? Omnis labore exercitationem eaque asperiores illum praesentium nobis, a velit molestias?
</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Amet ex itaque voluptates facilis earum quis
similique, quasi quisquam nesciunt nulla ab esse veritatis molestias. Sapiente dolore molestiae error, quos
pariatur minima omnis, ipsa quis et a porro dignissimos totam officiis ad quo eos quae natus dicta ullam
cupiditate tempore? Omnis labore exercitationem eaque asperiores illum praesentium nobis, a velit molestias?
</p>
</div>
<footer class="footer-content">
<div class="footer-list">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</div>
<div class="footer-list">
<li>Facebook</li>
<li>Twitter</li>
<li>Viemo</li>
</div>
</footer>
</body>
</html>
Can someone help me with this layout?
https://imgur.com/a/Dq5WNOz
I am using CSS flexbox to style it but I have a question. How is the header text and the content's width lined up / same width. But also their background extends the full page. Is the content lined up with the same padding? At first I tried using the same margin but my example ended up looking like this.
Mine : https://imgur.com/5PxvMKs
I just made certain changes and did CSS and here is the layout you were looking for.
-user container to wrap
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
max-width: 1024px;
margin: auto;
}
nav {
background: #000;
}
.navbar-list {
padding: 0;
margin: 0;
display: flex;
list-style: none;
}
.navbar-list>.list-item {
margin-right: 15px;
}
.navbar-list>.list-item a {
color: #fff;
text-decoration: none;
line-height: 50px;
}
.header {
background: #aaaaaa;
padding: 30px 0;
}
.header h2 {
padding: 0 0 15px;
}
.content p {
display: inline-block;
width: calc(100% / 3 - 30px);
text-align: justify;
margin: 0 15px;
}
.content {
padding: 30px 0;
}
.content p:first-child {
margin-left: 0;
}
.content p:last-child {
margin-right: 0;
}
footer.footer-content {
background: green;
padding: 15px 0;
}
.footer-lists {
display: flex;
justify-content: space-between;
}
.footer-list {
list-style: none;
display: flex;
}
.footer-list>li a {
color: #fff;
text-decoration: none;
margin-right: 15px;
}
.footer-list>li:last-child a {
margin-right: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<title>CSS Assignment</title>
</head>
<body>
<nav>
<div class="container">
<ul class="navbar-list">
<li class="list-item">Home</li>
<li class="list-item">About</li>
<li class="list-item">Service</li>
<li class="list-item">Contact</li>
</ul>
</div>
</nav>
<div class='header'>
<div class="container">
<h2>We Provide the best IT Services</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum, assumenda distinctio. Fugit, quam veritatis officia mollitia ex fugiat beatae temporibus.</p>
Know more...
</div>
</div>
<div class="content">
<div class="container">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Amet ex itaque voluptates facilis earum quis similique, quasi quisquam nesciunt nulla ab esse veritatis molestias. Sapiente dolore molestiae error, quos pariatur minima omnis, ipsa quis et
a porro dignissimos totam officiis ad quo eos quae natus dicta ullam cupiditate tempore? Omnis labore exercitationem eaque asperiores illum praesentium nobis, a velit molestias?
</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Amet ex itaque voluptates facilis earum quis similique, quasi quisquam nesciunt nulla ab esse veritatis molestias. Sapiente dolore molestiae error, quos pariatur minima omnis, ipsa quis et
a porro dignissimos totam officiis ad quo eos quae natus dicta ullam cupiditate tempore? Omnis labore exercitationem eaque asperiores illum praesentium nobis, a velit molestias?
</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Amet ex itaque voluptates facilis earum quis similique, quasi quisquam nesciunt nulla ab esse veritatis molestias. Sapiente dolore molestiae error, quos pariatur minima omnis, ipsa quis et
a porro dignissimos totam officiis ad quo eos quae natus dicta ullam cupiditate tempore? Omnis labore exercitationem eaque asperiores illum praesentium nobis, a velit molestias?
</p>
</div>
</div>
<footer class="footer-content">
<div class="container">
<div class="footer-lists">
<div class="footer-list">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</div>
<div class="footer-list">
<li>Facebook</li>
<li>Twitter</li>
<li>Viemo</li>
</div>
</div>
</div>
</footer>
</body>
</html>
I trying to make layout something like stack overflow in bootstrap 5, I am only using bootstrap grid not using other utilities class (using saas) ,
#import "../node_modules/bootstrap/scss/grid"
This layout consist of fixed header , fixed left sidebar,main content scrollable (in the main content consist of post content etc & footer )
Note in example code I used couple of hepler class, later I will take care of it, It is just for making example code...
Problem in x-axis scrollbar appear (below example code), that is unwanted, This problem need to be fix...
Before ask, I already tried it couple of way, somehow I did not resolve it, If already answer here drop the link and I will delete my question
header{
position:fixed;
top:0;
height: 50px;
background-color: rebeccapurple;
}
#sticky-sidebar {
position:fixed;
height: calc(100vh - 50px);
top: 50px;
max-width: 20%;
background-color: red;
}
main{
min-height: 100vh;
}
footer{
min-height: 100px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<div class="container-fluid g-0">
<div class="row">
<header>
<div class="col-md-12">
Header
</div>
</header>
</div>
</div>
<div class="container-fluid g-0">
<div class="row">
<div class="col-xs-4">
<div class="col-xs-12" id="sticky-sidebar">
Menu
</div>
</div>
<div class="col-xs-8 p-5" id="main">
<main>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum maiores, molestiae porro numquam aperiam dignissimos iste quisquam quidem saepe voluptatibus possimus eum. Aut nihil maiores harum, voluptate dicta veniam quo, praesentium id ipsa esse eaque numquam cupiditate assumenda consectetur accusamus maxime ea reiciendis ut? Ut consectetur quis, sapiente, rem consequuntur architecto sit quasi dignissimos nisi nihil, tenetur necessitatibus. Veritatis, harum eaque. Quae odio repellendus architecto magni, excepturi reprehenderit, odit dolor, illum quis nulla porro? Pariatur, amet architecto sint illum, molestiae non optio quis facere deserunt nostrum reiciendis omnis illo velit dolores ex corporis nam natus, reprehenderit quos officia. Amet, facere!
</p>
</main>
<footer style="text-align: center;">
© Footer 2021
</footer>
</div>
</div>
</div>
You should really read the docs since the markup has several problems. Bootstrap 5 beta has the same grid rules as Bootstrap 4...
rows are wrappers for columns. This means only columns should be placed in rows, and columns shouldn't be placed directly in other columns.
g-0 (no gutters) should be on the row, not the container
there is no -xs infix. for example use col-12 not col-xs-12
<header>
<div class="row">
<div class="col-12">Header </div>
</div>
</header>
<div class="container-fluid">
<div class="row g-0">
<div class="col-4">
<div class="row">
<div class="col-12" id="sticky-sidebar"> Menu </div>
</div>
</div>
<div class="col-xs-8 p-5" id="main">
<main>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum maiores, molestiae porro numquam aperiam dignissimos iste quisquam quidem saepe voluptatibus possimus eum. Aut nihil maiores harum, voluptate dicta veniam quo, praesentium id ipsa esse eaque numquam cupiditate assumenda consectetur accusamus maxime ea reiciendis ut? Ut consectetur quis, sapiente, rem consequuntur architecto sit quasi dignissimos nisi nihil, tenetur necessitatibus. Veritatis, harum eaque. Quae odio repellendus architecto magni, excepturi reprehenderit, odit dolor, illum quis nulla porro? Pariatur, amet architecto sint illum, molestiae non optio quis facere deserunt nostrum reiciendis omnis illo velit dolores ex corporis nam natus, reprehenderit quos officia. Amet, facere! </p>
</main>
<footer style="text-align: center;"> © Footer 2021 </footer>
</div>
</div>
</div>
Demo
I'm trying to compose the layout shown at the picture. I want the layout cover the whole browser area.
My issue is that can not get the content be fixed to the footer. Even in case the browser resizes, the content div auto-adjust dynamically.
The class in the content div has its height to 100vh, but it exceeds and the window scroller comes up.
Then I use calc(100vh-100px) where 100px is the sum(headerHeight + footerHeight), but no success.
Is there anyway to accomplish this without jQuery?
EDIT:
HTML:
<div ng-app="app" layout="column" layout-fill ng-cloak>
<header>
<div class="main_header" ng-controller="headerCtrl as ctrl">
<img src="/img/Logo.png" width="300" height="60" alt="Logo" />
<div style="min-width:200px;width:60%" ng-controller="autocompleteCtrl">
<md-autocomplete class="search_box"
md-selected-item="selectedItem"
md-search-text="searchText"
md-items="item in querySearch(searchText)"
md-search-text-change="querySearch(searchText)"
md-item-text="item.value"
md-min-length="2"
md-autofocus="true"
md-no-cache="false"
placeholder="Search...." my-enter>
<md-item-template>
<span>{{item.value}}</span>
</md-item-template>
<md-not-found>
No matches found.
</md-not-found>
</md-autocomplete>
</div>
<div class="main_header_buttons_container">
<md-button class="md-raised md-primary" ng-click="showLoginPopup($event)" ng-show="!isSessionActive">Log in</md-button>
<md-button class="md-raised md-primary" ng-click="showRegisterPopup($event)" ng-show="!isSessionActive">Register</md-button>
<md-button class="md-raised md-primary" ng-click="closeSession($event)" ng-show="isSessionActive">Close Session</md-button>
</div>
</div>
</header>
<div class="main_body" layout="row">
<div ng-controller="sidebarCtrl">
<md-sidenav class="md-sidenav-left" md-component-id="left" md-is-locked-open="true">
<div layout="column" layout-align="start end" style="margin-top:50px">
<md-icon md-svg-src="/img/magnifying-glass-browser.svg" class="icon_search <?php echo $sidebar_option=='1'?'icon_search_selected':''; ?>" ng-click="<?php echo $sidebar_option=='1'?'':'change_menu(1)'; ?>"></md-icon>
<md-icon md-svg-src="/img/favorites_icon.svg" class="icon_favorites <?php echo $sidebar_option=='2'?'icon_search_selected':''; ?>" ng-click="<?php echo $sidebar_option=='2'?'':'change_menu(2)'; ?>"></md-icon>
<md-icon md-svg-src="/img/historical_icon.svg" class="icon_favorites <?php echo $sidebar_option=='3'?'icon_search_selected':''; ?>" ng-click="<?php echo $sidebar_option=='3'?'':'change_menu(3)'; ?>"></md-icon>
<md-icon md-svg-src="/img/collections_icon.svg" class="icon_favorites <?php echo $sidebar_option=='4'?'icon_search_selected':''; ?>" ng-click="<?php echo $sidebar_option=='4'?'':'change_menu(4)'; ?>"></md-icon>
</div>
</md-sidenav>
</div>
<md-content flex layout-padding class="remove-padding-around">
<div class="collections_content_area" layout="column" layout-fill layout-align="top left">
The content (blue area)
</div>
</md-content>
</div>
<footer>
<div layout="row" layout-align="center center">
<h4>My Awesome Footer</h4>
</div>
</footer>
CSS:
.main_header {
width: 100%;
height: 60px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
background-color: #F2F2F2;
}
.main_header_buttons_container {
width: 20%;
min-width: 250px;
text-align: center;
}
.main_body {
background-color: #CCC;
}
.collections_content_area {
height:98vh;
background-color: #ebeef0;
min-height:450px;
}
If I read it correctly, this is what you're after. flexbox (in combination with calc) is very useful to achieve layouts like these. See the code below.
body, html {
height: 100vh;
margin: 0;
}
.container {
height: 100%;
}
.top-bar, .foot-bar {
height: 50px;
}
.main-content {
height: calc(100% - 100px);
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
}
.side-bar, .main-bar {
height: 100%;
}
.side-bar {
width: 100px;
}
.main-bar {
overflow-y: scroll;
font-size: 20px;
width: calc(100% - 100px);
}
.top-bar {
background: green;
}
.side-bar {
background: red;
}
.main-bar {
background: darkred;
}
.foot-bar {
background: limegreen;
}
<div class="container">
<div class="top-bar"></div>
<div class="main-content">
<div class="side-bar"></div>
<div class="main-bar">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero deserunt repellat asperiores optio esse et voluptas ad, autem possimus beatae labore nam natus, tempora expedita. Voluptatum optio architecto aut quas culpa magni, quis, sapiente tenetur quisquam nobis. Aliquam, nesciunt. Explicabo numquam ipsa saepe cupiditate temporibus amet ratione velit, repellat quaerat, tempore expedita eius sit aliquid neque impedit quia soluta repellendus architecto nihil ducimus, quas odio inventore consectetur nostrum. Enim eum voluptate veritatis hic quia nemo maiores a accusantium explicabo labore aliquid iusto autem iure sed blanditiis debitis dicta porro, dolore vero ut natus, obcaecati molestiae! Animi reiciendis dolorum officiis nostrum deserunt eaque nihil impedit natus placeat iusto aspernatur quae velit rem asperiores fugiat rerum, nobis pariatur. Recusandae itaque rem repudiandae placeat eum, delectus, facilis, provident, praesentium adipisci aut sed. Numquam dolorem ad, alias molestias illum iure. Obcaecati nam harum iure recusandae, voluptatem. Totam officia sit dolorem! Aliquam quod blanditiis, architecto placeat officia maxime, nam aliquid commodi nemo fugit fugiat, quis modi reprehenderit mollitia ducimus iusto! Illum cumque a aliquam, odit officia delectus iusto hic eligendi maiores laborum soluta fugiat nihil itaque quo iste quasi rem numquam. Tenetur asperiores odit dignissimos aliquam error, aliquid illum magnam eius libero. Vel, quae sint?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus mollitia sapiente distinctio consequatur ab laboriosam corporis dignissimos facilis voluptatum odio, amet praesentium quisquam expedita nisi doloribus sunt! Voluptatum, aperiam, quae. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe facere aliquid fuga pariatur praesentium corporis recusandae, incidunt a cupiditate sint eum omnis adipisci rerum non! Accusantium quaerat ipsum, pariatur quae molestiae, culpa laborum! Obcaecati, laudantium provident aliquid asperiores repellat, distinctio quisquam earum, dolores quasi rerum facilis quaerat, minus aspernatur sapiente rem ipsum id. Temporibus eligendi, itaque quae aliquam, deserunt at veritatis sequi, ab cum molestias praesentium alias. Minima inventore, expedita quasi doloremque quod quis nostrum vero ullam velit. Voluptate totam magni ipsum corrupti, nobis, eveniet nesciunt veniam ipsa aut non nemo cumque dicta harum placeat mollitia. Aut libero reiciendis consequuntur.</div>
</div>
<div class="foot-bar"></div>
</div>
he is something i just made last night which make the footer fixed at bottom and ur body area can still be dynamic according to the contents in it
function main() {
var $window = $(window).outerHeight(true);
var $footer = $('.footer').outerHeight(true);
var $header = $('.header').outerHeight(true);
var $total = $window - ($header + $footer);
// .main is the content area
$(".main").css({
"min-height": $total + 'px'
// "min-height": 100 - ($total/100) + 'vh'
});
}
$(document).ready(function() {
main();
});
$(window).resize(function() {
main();
});
one thing to keep in mind that converting px to vh doesnt happen on the fly , not in css nor in js
I have been trying to get a layout where I have a column of 6, plus a column of 6 to the right with two vertical boxes in. I can achieve this no problem, but I'm struggling to get the heights of the two enclosed divs to stretch vertically using flexbox.
I'm using this example http://www.bootply.com/7UhIWMK808 and adapting. Here's what I have been working with. Any ideas?
(I have been trying a variety of flex-grow & flex-col on the second column - but nothing seems to have solved it as yet)
<div class="container"><h3></h3></div>
<div class="container">
<div class="row row-flex row-flex-wrap">
<div class="col-md-6">
<div class="flex-col">
<div class="flex-grow" style="background: grey;">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.
Sed ut perspiciatis unde omn eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.
Sed ut perspiciatis unde omn
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<div class="">
<div class="" style="background: grey;">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
totam rem ape
</div>
</div>
</div>
<div class="col-md-12">
<div class="">
<div class="" style="background: grey;">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
totam rem ap
</div>
</div>
</div>
</div>
</div>
</div><!--/row-->
</div><!--/container-->
<hr>
Here's the the issue solved
<style>
.flex-container {
display: flex;
align-items: stretch;
}
.flex-column {
display: flex;
align-items: stretch;
flex-direction: column;
flex: 1;
}
.child {
flex: 1;
}
</style>
<div class="flex-container">
<div class="flex-column">
<div class="child">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="flex-column">
<div class="child">
lorem
</div>
<div class="child">
lorem
</div>
</div>
</div>
on this page, i'm trying to set a header image and then have the products sit below it, even as you re size the screen.
i have the image positioned how i want it but right now I'm using a margin to have the products sit below it. how would it make it more flexible and dynamic?
#collection-alternate #main {
margin-top: 580px;
}
#collection-alternate #home_hero {
width: 100%;
position: absolute;
margin-left: 0px;
padding-left: 0px;
padding-bottom: 500px;
height: 100%;
top: 0;
left: 0;
margin-top: -100px;
z-index: -1000000;
the goal is to get the positioning like this at all window sizes
For doing something like this, you must never use position: absolute. So, make sure you use some kind of responsive grid system too. For now, you can have this starting level code, coded using Bootstrap.
Snippet
/* activate sidebar */
$('#sidebar').affix({
offset: {
top: 235
}
});
/* activate scrollspy menu */
var $body = $(document.body);
var navHeight = $('.navbar').outerHeight(true) + 10;
$body.scrollspy({
target: '#leftCol',
offset: navHeight
});
/* smooth scrolling sections */
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top - 50
}, 1000);
return false;
}
}
});
/*
A Bootstrap 3.1 affix sidebar template
from http://bootply.com
This CSS code should follow the 'bootstrap.css'
in your HTML file.
license: MIT
author: bootply.com
*/
body {
padding-top:50px;
}
#masthead {
min-height:250px;
}
#masthead h1 {
font-size: 30px;
line-height: 1;
padding-top:20px;
}
#masthead .well {
margin-top:8%;
}
#media screen and (min-width: 768px) {
#masthead h1 {
font-size: 50px;
}
}
.navbar-bright {
background-color:#111155;
color:#fff;
}
.affix-top,.affix{
position: static;
}
#media (min-width: 979px) {
#sidebar.affix-top {
position: static;
margin-top:30px;
width:228px;
}
#sidebar.affix {
position: fixed;
top:70px;
width:228px;
}
}
#sidebar li.active {
border:0 #eee solid;
border-right-width:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<nav class="navbar navbar-default navbar-fixed-top" role="banner">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Bootply
</div>
<nav class="collapse navbar-collapse" role="navigation">
<ul class="nav navbar-nav">
<li>
Get Started
</li>
<li>
Edit
</li>
<li>
Visualize
</li>
<li>
Prototype
</li>
</ul>
</nav>
</div>
</nav>
<div id="masthead">
<div class="container">
<div class="row">
<div class="col-md-7">
<h1>Bootstrap Sidebar
<p class="lead">With Affix and Scrollspy</p>
</h1>
</div>
<div class="col-md-5">
<div class="well well-lg">
<div class="row">
<div class="col-sm-6">
<img src="//placehold.it/180x100" class="img-responsive">
</div>
<div class="col-sm-6">
Some text here
</div>
</div>
</div>
</div>
</div>
</div><!--/container-->
</div><!--/masthead-->
<!--main-->
<div class="container">
<div class="row">
<!--left-->
<div class="col-md-3" id="leftCol">
<ul class="nav nav-stacked" id="sidebar">
<li>Section 0</li>
<li>Section 1</li>
<li>Section 2</li>
<li>Section 3</li>
<li>Section 4</li>
</ul>
</div><!--/left-->
<!--right-->
<div class="col-md-9">
<h2 id="sec0">Content</h2>
<p>
At Bootply we like to build simple Bootstrap templates that utilize the code Bootstap CSS without a lot of customization. Sure you can
find a lot of Bootstrap themes and inspiration, but these templates tend to be heavy on customization.</p>
<hr>
<p>
Rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia cor magni dolores
eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut.
Rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia cor magni dolores
eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut!</p>
<h2 id="sec1">Content</h2>
<p>
Rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut.
</p>
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading"><h3>Hello.</h3></div>
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis
dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
Aliquam in felis sit amet augue.
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading"><h3>Hello.</h3></div>
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate.
Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis
dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan.
Aliquam in felis sit amet augue.
</div>
</div>
</div>
</div>
<hr>
<h2 id="sec2">Section 2</h2>
<p>
Rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia cor magni dolores
eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut!
</p>
<div class="row">
<div class="col-md-4"><img src="//placehold.it/300x300" class="img-responsive"></div>
<div class="col-md-4"><img src="//placehold.it/300x300" class="img-responsive"></div>
<div class="col-md-4"><img src="//placehold.it/300x300" class="img-responsive"></div>
</div>
<hr>
<h2 id="sec3">Section 3</h2>
<p>
Images are responsive sed #mdo but sum are more fun peratis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia cor magni dolores
eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut..</p>
<p>
Fos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut..</p>
<h2 id="sec4">Section 4</h2>
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia cor magni dolores
eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut.</p>
<hr>
<h4>Edit on Bootply</h4>
<hr>
</div><!--/right-->
</div><!--/row-->
</div><!--/container-->
Try to use the above snippet both here and full screen and see how you can modify it.
You can use the #media rule for every device's size, for example:
#media only screen and (min-device-width:768px) and (max-device-width : 1024px) and (orientation : portrait) {
#collection-alternate #home_hero {
width: 100%;
position: absolute;
margin-left: 0px;
padding-left: 0px;
padding-bottom: 500px;
height: 100%;
top: 0;
left: 0;
margin-top: -100px;
z-index: -1000000;
}
}
#media screen and (max-width:1050px), screen and (max-device-width:1050px) {
#collection-alternate #home_hero {
width: 100%;
position: absolute;
margin-left: 0px;
padding-left: 0px;
padding-bottom: 400px;
height: 100%;
top: 0;
left: 0;
margin-top: -80px;
z-index: -2000000;
}
}
With this you can handle all the devices !
I am bit skeptical about your approach, because this can be achieved with simple layout design, but still there is a way to achieve this, what comes to my mind first is to use vh(viewport height) unit for the margin you are using, this will adapt as per viewport height.
ex:
#collection-alternate #main {
margin-top: 60vh;
}
This is like 60% of viewport height. Along with that you need to take care of header image adjustment, with css properties like background-size to cover or contain, or better use media queries.