I'm hoping someone can help me out with this...I'm tearing my hair out. I want to create a few sections that scroll horizontally. I looked at Netflix's code to model this, and I finally got the overflow to bleed all the way to the edges of the browser window, and the beginning and end of the row both line up with the margins on the page. But now when I scroll, the entire page scrolls.
How do I get this section to scroll independently while still letting the overflow reach the edges of the page? Is this possible with just css?
body {
background-color: #F5F5F5;
}
.row {
display: flex;
}
.landing-banner {
display: -webkit-flex;
display: flex;
height: 80vh;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
/* position: sticky;
left: 0; */
}
.content-block {
margin: 0 4%;
}
.hero {
font-family: "Apercu-Regular";
line-height: 40px;
}
.lolomoRow {
margin: 3vw 0;
margin-bottom: 10px;
padding: 0;
position: relative;
outline: 0;
z-index: 0;
}
.rowContainer {
position: relative;
z-index: 0;
}
.rowContainer .rowContent {
padding: 0;
box-sizing: border-box;
}
.slider {
position: relative;
margin: 0;
padding: 0 4%;
touch-action: pan-y;
}
.slider .sliderMask .showPeek {
display: flex;
flex-direction: row;
overflow-x: auto;
}
.slider .sliderMask {
padding-bottom: 1px;
}
.sliderContent {
white-space: nowrap;
}
.slider .sliderMask .sliderContent .slider-item:first-child {
padding-left: 0;
}
.slider .sliderMask .sliderContent .slider-item {
box-sizing: border-box;
z-index: 1;
display: inline-block;
position: relative;
white-space: normal;
vertical-align: top;
padding: 0 2px;
}
.bd::-webkit-scrollbar {
display: none;
}
.project-card {
background-color: white;
width: 400px;
border-radius: 12px;
box-shadow: 0px 0px 8px rgba(112, 144, 176, 0.12);
margin-right: 16px;
flex: 0 0 auto;
}
<body>
<div class="landing-banner">
<wrapper>
<div class="row content-block">
<h1 class="hero">
If you scroll anywhere, the entire page scrolls horizontally. I only want the section below to scroll while still remaining full bleed.
</h1>
</div>
</wrapper>
</div>
<wrapper style="width: fit-content; display: inline-block; padding: 0 4%; position: sticky; left: 0;">
<h2>case studies</h2>
</wrapper>
<div class="slider">
<div class="sliderMask showPeek">
<div class="sliderContent row-with-x-columns">
<div class="slider-item">
<div class="title-card">
<div class="project-card">
<div class="row">
<img src="images/project previews/Circa.png" style="max-width: 100%">
</div>
<div class="row" style="padding: 16px 16px 0 16px;">
<h3 class="project-title">Circa Resident App</h3>
</div>
<div class="row" style="padding: 0 16px 16px 16px;">
<p class="caption">Led end-to-end product design on Circa's customer facing app.</p>
</div>
</div>
</div>
</div>
<div class="slider-item">
<div class="title-card">
<div class="project-card">
<div class="row">
<img src="images/project previews/Circa.png" style="max-width: 100%">
</div>
<div class="row" style="padding: 16px 16px 0 16px;">
<h3 class="project-title">Circa Resident App</h3>
</div>
<div class="row" style="padding: 0 16px 16px 16px;">
<p class="caption">Led end-to-end product design on Circa's customer facing app.</p>
</div>
</div>
</div>
</div>
<div class="slider-item">
<div class="title-card">
<div class="project-card">
<div class="row">
<img src="images/project previews/Circa.png" style="max-width: 100%">
</div>
<div class="row" style="padding: 16px 16px 0 16px;">
<h3 class="project-title">Circa Resident App</h3>
</div>
<div class="row" style="padding: 0 16px 16px 16px;">
<p class="caption">Led end-to-end product design on Circa's customer facing app.</p>
</div>
</div>
</div>
</div>
<div class="slider-item">
<div class="title-card">
<div class="project-card">
<div class="row">
<img src="images/project previews/Circa.png" style="max-width: 100%">
</div>
<div class="row" style="padding: 16px 16px 0 16px;">
<h3 class="project-title">Circa Resident App</h3>
</div>
<div class="row" style="padding: 0 16px 16px 16px;">
<p class="caption">Led end-to-end product design on Circa's customer facing app.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
You need to add overflow-Y: scroll; to the slider class as can be seen below. This tells it that it is what needs the scroll bar not the entire document.
Here is the MDN documentation for overflow
MDN Docs
body {
background-color: #F5F5F5;
}
.row {
display: flex;
}
.landing-banner {
display: -webkit-flex;
display: flex;
height: 80vh;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
/* position: sticky;
left: 0; */
}
.content-block {
margin: 0 4%;
}
.hero {
font-family: "Apercu-Regular";
line-height: 40px;
}
.lolomoRow {
margin: 3vw 0;
margin-bottom: 10px;
padding: 0;
position: relative;
outline: 0;
z-index: 0;
}
.rowContainer {
position: relative;
z-index: 0;
}
.rowContainer .rowContent {
padding: 0;
box-sizing: border-box;
}
.slider {
overflow-Y: scroll;
position: relative;
margin: 0;
padding: 0 4%;
touch-action: pan-y;
}
.slider .sliderMask .showPeek {
display: flex;
flex-direction: row;
overflow-x: auto;
}
.slider .sliderMask {
padding-bottom: 1px;
}
.sliderContent {
white-space: nowrap;
}
.slider .sliderMask .sliderContent .slider-item:first-child {
padding-left: 0;
}
.slider .sliderMask .sliderContent .slider-item {
box-sizing: border-box;
z-index: 1;
display: inline-block;
position: relative;
white-space: normal;
vertical-align: top;
padding: 0 2px;
}
.bd::-webkit-scrollbar {
display: none;
}
.project-card {
background-color: white;
width: 400px;
border-radius: 12px;
box-shadow: 0px 0px 8px rgba(112, 144, 176, 0.12);
margin-right: 16px;
flex: 0 0 auto;
}
<body>
<div class="landing-banner">
<wrapper>
<div class="row content-block">
<h1 class="hero">
If you scroll anywhere, the entire page scrolls horizontally. I only want the section below to scroll while still remaining full bleed.
</h1>
</div>
</wrapper>
</div>
<wrapper style="width: fit-content; display: inline-block; padding: 0 4%; position: sticky; left: 0;">
<h2>case studies</h2>
</wrapper>
<div class="slider">
<div class="sliderMask showPeek">
<div class="sliderContent row-with-x-columns">
<div class="slider-item">
<div class="title-card">
<div class="project-card">
<div class="row">
<img src="images/project previews/Circa.png" style="max-width: 100%">
</div>
<div class="row" style="padding: 16px 16px 0 16px;">
<h3 class="project-title">Circa Resident App</h3>
</div>
<div class="row" style="padding: 0 16px 16px 16px;">
<p class="caption">Led end-to-end product design on Circa's customer facing app.</p>
</div>
</div>
</div>
</div>
<div class="slider-item">
<div class="title-card">
<div class="project-card">
<div class="row">
<img src="images/project previews/Circa.png" style="max-width: 100%">
</div>
<div class="row" style="padding: 16px 16px 0 16px;">
<h3 class="project-title">Circa Resident App</h3>
</div>
<div class="row" style="padding: 0 16px 16px 16px;">
<p class="caption">Led end-to-end product design on Circa's customer facing app.</p>
</div>
</div>
</div>
</div>
<div class="slider-item">
<div class="title-card">
<div class="project-card">
<div class="row">
<img src="images/project previews/Circa.png" style="max-width: 100%">
</div>
<div class="row" style="padding: 16px 16px 0 16px;">
<h3 class="project-title">Circa Resident App</h3>
</div>
<div class="row" style="padding: 0 16px 16px 16px;">
<p class="caption">Led end-to-end product design on Circa's customer facing app.</p>
</div>
</div>
</div>
</div>
<div class="slider-item">
<div class="title-card">
<div class="project-card">
<div class="row">
<img src="images/project previews/Circa.png" style="max-width: 100%">
</div>
<div class="row" style="padding: 16px 16px 0 16px;">
<h3 class="project-title">Circa Resident App</h3>
</div>
<div class="row" style="padding: 0 16px 16px 16px;">
<p class="caption">Led end-to-end product design on Circa's customer facing app.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
If you want to model it after Netflix (as mentioned in the question), I don't believe they have a scroll bar usually, so that would be targeting the scrollbar for the slider and you would probably want to add something like:
/* Hide scrollbar for Chrome, Safari and Opera */
.slider::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.slider {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
However for accessibility reasons it is generally frowned upon hiding scroll bars unless blatantly obvious that it is a scroll-able element;
Related
I have a CSS mockup I am working on but I am having trouble centering the search-bar element in relation to the phone element. Hence it is only centered when the phone element is in the middle of the screen (when the viewport is mobile) but not when it's large.
How can I center the absolute child element (search) in relation to the parent (phone)?
It should look like this regardless of where the parent element is on the screen:
EDIT: If I add the display: relative to the phone element the search-bar cuts off due to the overflow-v: hidden - for some reason overflow-h: visible isn't respected as touched on here: CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue
.phone {
display: block;
height: 649px;
width: 300px;
overflow-y: hidden;
background-color: #ffffff;
border-radius: 35px;
box-shadow: 0px 25px 50px 0px rgba(0, 0, 0, 0.20);
border:10px solid;
border-color: #ffffff;
}
.glogo {
margin: 15px auto 10px;
width: 175px;
}
.search-bar {
margin: auto;
inset: auto 0;
position: absolute;
background-color: #ffffff;
height: 60px;
width: 425px;
box-shadow: 0px 15px 50px 0px rgba(0, 0, 0, 0.15);
border-radius: 6px;
display: flex;
justify-content: center;
align-content: center;
flex-direction: column;
}
.search-bar span {
font-family: Arial, Helvetica, sans-serif;
color: #3c4043;
font-size: 18px;
margin: auto 65px auto;
}
.search {
position: absolute;
top: 0;
bottom: 0;
margin: auto 15px auto;
height: 35px;
width: 35px;
}
.search-result-wrapper {
margin-top: 85px;
}
.search-result {
margin: 0 auto 7px;
padding: 22px 26px 22px 22px;
width: 250px;
background-color: #ffffff;
border-radius: 8px;
box-shadow: 1px 2px 10px 0 rgb(0 0 0 / 7%);
}
.result-line {
height: 10px;
margin: 0 0 10px;
border-radius: 2px;
}
.result-line:nth-child(1) {
background-color: #000;
width: 92%;
}
.result-line:nth-child(2) {
background-color: #000;
width: 75%;
}
.result-line:nth-child(n+3) {
background-color: #000;
}
.result-line:nth-child(3) {
width: 100%;
}
.result-line:nth-child(4) {
width: 95%;
margin: 0;
}
<script src="https://cdn.tailwindcss.com"></script>
<div class="flex flex-wrap w-full justify-center content-center px-12 py-36">
<div class="flex flex-wrap lg:items-center min-h-screen">
<div class="flex flex-col w-full lg:w-1/2 justify-center content-center items-center">
<div class="phone">
<img src="https://via.placeholder.com/1125x132" class="status-bar">
<img src="https://via.placeholder.com/175x57" class="glogo">
<div class="search-bar">
<img src="https://via.placeholder.com/24x24" class="search"> <span>lipsum text</span>
</div>
<div class="search-result-wrapper">
<div class="search-result">
<div class="result-line"> </div>
<div class="result-line"> </div>
<div class="result-line"> </div>
<div class="result-line"> </div>
</div>
<div class="search-result">
<div class="result-line"> </div>
<div class="result-line"> </div>
<div class="result-line"> </div>
<div class="result-line"> </div>
</div>
<div class="search-result">
<div class="result-line"> </div>
<div class="result-line"> </div>
<div class="result-line"> </div>
<div class="result-line"> </div>
</div>
<div class="search-result">
<div class="result-line"> </div>
<div class="result-line"> </div>
<div class="result-line"> </div>
<div class="result-line"> </div>
</div>
</div>
</div>
</div>
<div class="flex flex-wrap w-full lg:w-1/2 justify-center">
<h3 class="text-3xl">Content here</h3>
</div>
So here is my solution to you:
add position: relative to .phone
add left: calc(-25vw + 50px); and right: calc(-25vw + 50px); (tweak as you prefer these values)
add padding-top to handle border-radius
remove inset and overflow-y: hidden
remove height from phone
Toggle Full Page in the snippet to see result in larger screen
console.clear()
.phone {
display: block;
width: 300px;
background-color: #ffffff;
box-shadow: 0px 25px 50px 0px rgba(0, 0, 0, 0.20);
border: 10px solid;
border-color: #ffffff;
border-radius: 35px;
padding-top: 10px;
position: relative;
}
.glogo {
margin: 15px auto 10px;
width: 175px;
}
.search-bar {
margin: auto;
position: absolute;
background-color: #ffffff;
height: 60px;
width: 425px;
box-shadow: 0px 15px 50px 0px rgba(0, 0, 0, 0.15);
border-radius: 6px;
display: flex;
justify-content: center;
align-content: center;
flex-direction: column;
left: calc(-25vw + 50px);
right: calc(-25vw + 50px);
}
.search-bar span {
font-family: Arial, Helvetica, sans-serif;
color: #3c4043;
font-size: 18px;
margin: auto 65px auto;
}
.search {
position: absolute;
top: 0;
bottom: 0;
margin: auto 15px auto;
height: 35px;
width: 35px;
}
.search-result-wrapper {
margin-top: 85px;
}
.search-result {
margin: 0 auto 7px;
padding: 22px 26px 22px 22px;
width: 250px;
background-color: #ffffff;
border-radius: 8px;
box-shadow: 1px 2px 10px 0 rgb(0 0 0 / 7%);
}
.result-line {
height: 10px;
margin: 0 0 10px;
border-radius: 2px;
}
.result-line:nth-child(1) {
background-color: #000;
width: 92%;
}
.result-line:nth-child(2) {
background-color: #000;
width: 75%;
}
.result-line:nth-child(n+3) {
background-color: #000;
}
.result-line:nth-child(3) {
width: 100%;
}
.result-line:nth-child(4) {
width: 95%;
margin: 0;
}
<script src="https://cdn.tailwindcss.com"></script>
<div class="flex flex-wrap w-full justify-center content-center px-12 py-36">
<div class="flex flex-wrap lg:items-center min-h-screen">
<div class="flex flex-col w-full lg:w-1/2 justify-center content-center items-center">
<div class="phone">
<img src="https://via.placeholder.com/1125x132" class="status-bar">
<img src="https://via.placeholder.com/175x57" class="glogo">
<div class="search-bar">
<img src="https://via.placeholder.com/24x24" class="search"> <span>lipsum text</span>
</div>
<div class="search-result-wrapper">
<div class="search-result">
<div class="result-line"> </div>
<div class="result-line"> </div>
<div class="result-line"> </div>
<div class="result-line"> </div>
</div>
<div class="search-result">
<div class="result-line"> </div>
<div class="result-line"> </div>
<div class="result-line"> </div>
<div class="result-line"> </div>
</div>
<div class="search-result">
<div class="result-line"> </div>
<div class="result-line"> </div>
<div class="result-line"> </div>
<div class="result-line"> </div>
</div>
<div class="search-result">
<div class="result-line"> </div>
<div class="result-line"> </div>
<div class="result-line"> </div>
<div class="result-line"> </div>
</div>
</div>
</div>
</div>
<div class="flex flex-wrap w-full lg:w-1/2 justify-center">
<h3 class="text-3xl">Content here</h3>
</div>
Please use the sample code in the justify content section of this page in order to center your child element with respect to the parent: https://getbootstrap.com/docs/4.0/utilities/flex/#justify-content
It's based on the Boostrap UI framework and allows you to use the flex feature with your div tags in order to help get the CSS arrangement that you're looking for.
I would ask that you test the sample code in a copy of your original code first before updating your initial code permanently. Once you get that CSS code to work, then you can move onto your other CSS goals.
I am trying to create 3 cards that stand at the bottom of the webpage but the 3 cards are overlapping. Can you help me find my mistake please? :)
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.144);
transition: 0.3s;
border-radius: 13px;
width: 320px;
height: 455px;
cursor: pointer;
position: absolute;
margin-left: 4%;
bottom: 10px;
margin-right: 4%;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.397);
}
.container {
padding: 2px 16px;
font-family: 'Rubik', sans-serif;
cursor: pointer;
}
.row {
display: flex;
}
.row::after {
content: "";
clear: both;
display: table;
}
<div class="row">
<div class="card">
<img src="resources/images/Front1.png" style="width: 100%;" height="320px">
<div class="container">
<h3><b>Create checklists</b></h3>
<p>Make your own customizable checklist to remain happy and healthy</p>
</div>
</div>
<div class="card">
<img src="resources/images/Front2.jpeg" style="width: 100%;">
<div class="container">
<h3><b>Take notes</b></h3>
<p>Write your own notes with fun, colourful tools</p>
</div>
</div>
<div class="card">
<img src="resources/images/Front3.jpeg" style="width: 100%;" height="320px">
<div class="container">
<h3><b>Create calendars</b></h3>
<p>Add pictures to your calendars and customize according to your preferences</p>
</div>
</div>
</div>
The problem was caused by the position: absolute; style in your CSS. Basically, you set all 3 cards to the same position which is why they overlapped.
I also changed your card's height to min-height. This is because the text was flowing out of the card and min-height would prevent this.
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.144);
transition: 0.3s;
border-radius: 13px;
width: 320px;
min-height: 455px;
cursor: pointer;
margin-left: 4%;
margin-right: 4%;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.397);
}
.container {
padding: 2px 16px;
font-family: 'Rubik', sans-serif;
cursor: pointer;
}
.row {
display: flex;
}
.row::after {
content: "";
clear: both;
display: table;
}
<div class="row">
<div class="card">
<img src="resources/images/Front1.png" style="width: 100%;" height="320px">
<div class="container">
<h3><b>Create checklists</b></h3>
<p>Make your own customizable checklist to remain happy and healthy</p>
</div>
</div>
<div class="card">
<img src="resources/images/Front2.jpeg" style="width: 100%;">
<div class="container">
<h3><b>Take notes</b></h3>
<p>Write your own notes with fun, colourful tools</p>
</div>
</div>
<div class="card">
<img src="resources/images/Front3.jpeg" style="width: 100%;" height="320px">
<div class="container">
<h3><b>Create calendars</b></h3>
<p>Add pictures to your calendars and customize according to your preferences</p>
</div>
</div>
</div>
remove "position: absolute" and things would work fine. Or if you're trying to display somethign else?
I'm designing a nav panel and I need to adjust the different option's styles to the parent div. For example, I need to adjust the background color of the options to the parent div (Paint the color in the full height of the parent div).
This is the code:
<div class="text-center text-muted"> <div class="container">
<div class="card">
<div class="card-header" style="background-color: #e9ecef;">
<div class="row mt8" id="nav_panel">
<div class="col-md-2" id="nav_panel_monday" style="background-color: rgb(0, 160, 157);">
<a id="nav_href_monday" href="#" style="color: white;">Monday</a>
</div>
<div class="col-md-2" id="nav_panel_tuesday">
<a id="nav_href_tuesday" href="#">Tuesday</a>
</div>
<div class="col-md-2" id="nav_panel_wednesday">
<a id="nav_href_wednesday" href="#">Wednesday</a>
</div>
<div class="col-md-2" id="nav_panel_thursday">
<a id="nav_href_thursday" href="#">Thursday</a>
</div>
<div class="col-md-2" id="nav_panel_friday">
<a id="nav_href_friday" href="#">Friday</a>
</div>
</div>
</div>
<div class="card-body">
<div id="div_hidden_monday"></div>
<div id="div_hidden_tuesday" style="display: none;"></div>
<div id="div_hidden_wednesday" style="display: none;"></div>
<div id="div_hidden_thursday" style="display: none;"></div>
<div id="div_hidden_friday" style="display: none;"></div>
</div>
</div>
</div>
</div>
.container {
width: 100%;
padding-right: 0;
padding-left: 0;
margin-right: auto;
margin-left: auto;
}
.card {
position: relative;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #FFFFFF;
background-clip: border-box;
border: 1px solid rgba(0, 0, 0, 0.125);
border-radius: 0.25rem;
}
.card-header {
padding: 0.75rem 1.25rem;
margin-bottom: 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}
#nav_panel {
background-color: #e9ecef;
padding-right: 0;
padding-left: 0;
border-radius: 5px;
}
.col-md-2 {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
Any suggestion? Thanks for reading!
I think, you need to remove padding of the .card-header and add padding to the child elements. Like this
https://jsfiddle.net/bhusalhari99/sruLkt2b/3/
hope it will works for you.
For the time being using padding and margin issue is fixed but You
need to re-right the nav HTML structure using nav and ul li
like here
.container {
width: 100%;
padding-right: 0;
padding-left: 0;
margin-right: auto;
margin-left: auto;
}
.card {
position: relative;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #FFFFFF;
background-clip: border-box;
border: 1px solid rgba(0, 0, 0, 0.125);
border-radius: 0.25rem;
}
.card-header {
padding: 0 15px !important;
margin-bottom: 0;
background-color: rgba(0, 0, 0, .03);
border-bottom: 1px solid rgba(0, 0, 0, .125);
}
.card-header a {
display: block;
padding: 10px 0;
}
#nav_panel {
background-color: #e9ecef;
padding-right: 0;
padding-left: 0;
border-radius: 5px;
}
.col-md-2 {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<div class="text-center text-muted">
<div class="container">
<div class="card">
<div class="card-header" style="background-color: #e9ecef;">
<div class="row mt8" id="nav_panel">
<div class="col-md-2" id="nav_panel_monday" style="background-color: rgb(0, 160, 157);">
<a id="nav_href_monday" href="#" style="color: white;">Monday</a>
</div>
<div class="col-md-2" id="nav_panel_tuesday">
<a id="nav_href_tuesday" href="#">Tuesday</a>
</div>
<div class="col-md-2" id="nav_panel_wednesday">
<a id="nav_href_wednesday" href="#">Wednesday</a>
</div>
<div class="col-md-2" id="nav_panel_thursday">
<a id="nav_href_thursday" href="#">Thursday</a>
</div>
<div class="col-md-2" id="nav_panel_friday">
<a id="nav_href_friday" href="#">Friday</a>
</div>
</div>
</div>
<div class="card-body">
<div id="div_hidden_monday"></div>
<div id="div_hidden_tuesday" style="display: none;"></div>
<div id="div_hidden_wednesday" style="display: none;"></div>
<div id="div_hidden_thursday" style="display: none;"></div>
<div id="div_hidden_friday" style="display: none;"></div>
</div>
</div>
</div>
</div>
This question already has answers here:
How can I make Bootstrap columns all the same height?
(34 answers)
Closed 5 years ago.
I'm working on a page that uses Bootstrap and have used this to define columns on this Codepen pen: https://codepen.io/smifaye/pen/GmeQrV
However one thing I can't seem to figure out is how to keep the height of the boxes uniform. I've set a min-height value for these boxes but my mind has gone blank as to how to make all divs resize at once.
.recycling {
background-color: white;
border: 1px solid #CCCCCC;
padding: 0;
min-height: 250px;
}
Also I'd like the buttons to stay at the bottom of the div but can't figure this out either :(
Any help would be massively appreciated.
(The menu area on the right is part of the design of the website and can't be changed)
Used Flexbox you can set equal height in div
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.recycling {
background-color: white;
border: 1px solid #CCCCCC;
padding: 0;
//min-height: 250px;
height: 100%;
}
.button {
min-height: 36px;
height: auto;
width: auto;
padding: 0 36px 0 36px;
border: 2px solid #00019F;
font-size: 1em;
color: #FFFFFF;
background-color: #00019F;
border-radius: 5px;
text-decoration: none;
}
.button:hover {
background-color: #2D389C;
cursor: pointer;
}
.button:focus {
border: 2px solid #FF9900;
outline: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row " style="margin: 0px;">
<div class="col-md-4">
Menu area that can't be removed
</div>
<div class="col-md-8">
<div class="row row-eq-height">
<div class="col-sm-6 col-md-4">
<div class="recycling">
<h3 style="color: white; padding: 10px; margin: 0px; background-color: #00019f;">Your property</h3>
<p style="padding: 10px 10px 0px;"><strong>Find</strong> your collection days</p>
<p style="padding: 0px 10px;"><strong>Report</strong> a missed collection</p>
<p style="padding: 0px 10px;"><strong>Order</strong> a new recycling bin, box or bag</p>
<div style="padding: 0px 10px 10px; text-align: center;">
<form action="https://environmentservices.camden.gov.uk/property"> <button class="button">Find, report, order</button> </form>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class=" recycling">
<h3 style="color: white; padding: 10px; margin: 0px; background-color: #00019f;">Cleansing issues</h3>
<p style="padding: 10px 10px 0px;"><strong>Report</strong></p>
<ul>
<li>Dumped rubbish</li>
<li>Dog fouling</li>
<li>Graffiti</li>
<li>Other</li>
</ul>
<div style="padding: 0px 10px 10px; text-align: center;">
<form action="https://environmentservices.camden.gov.uk/street"> <button class="button">Report</button> </form>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="recycling">
<h3 style="color: white; padding: 10px; margin: 0px; background-color: #00019f;">Additional information</h3>
<ul style="padding-top: 10px;">
<li>Frequently asked questions</li>
<li>Communal collections</li>
<li>Large household item collections</li>
<li>More</li>
</ul>
<div style="padding: 0px 10px 10px; text-align: center;">
<form action="http://www.camden.gov.uk/ccm/content/environment/waste-and-recycling/recycling-rubbish-and-reuse/"> <button class="button">View</button> </form>
</div>
</div>
</div> </div>
</div>
you can use display:flex on col-md-8 to equal the heights of the col-md-4 then add height:100% to recycling plus some padding-bottom to make 'room' for the buttons
then add position:absolute and position the form at the bottom of every recycling box
P.S. your HTML is a mess. inline styles, col-12 inside col-8 . columns inside columns without any rows that's not correct . see here > http://getbootstrap.com/examples/grid/ . columns should be nested inside ROW's and then inside other columns eg
<div class="col-md-8">
.col-md-8
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
</div>
for your solution see snippet below or jsFiddle
.col-md-8 {
display: flex;
}
.recycling {
background-color: white;
border: 1px solid #CCCCCC;
padding: 0 0 60px;
height: 100%;
position: relative;
}
.button {
min-height: 36px;
height: auto;
width: auto;
padding: 0 36px 0 36px;
border: 2px solid #00019F;
font-size: 1em;
color: #FFFFFF;
background-color: #00019F;
border-radius: 5px;
text-decoration: none;
}
.button:hover {
background-color: #2D389C;
cursor: pointer;
}
form {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
bottom: 15px;
text-align: center;
}
.button:focus {
border: 2px solid #FF9900;
outline: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="row" style="margin: 0px;">
<div class="col-md-4">
Menu area that can't be removed
</div>
<div class="col-md-8">
<div class="col-sm-6 col-md-4">
<div class="col-md-12 recycling">
<h3 style="color: white; padding: 10px; margin: 0px; background-color: #00019f;">Your property</h3>
<p style="padding: 10px 10px 0px;"><strong>Find</strong> your collection days</p>
<p style="padding: 0px 10px;"><strong>Report</strong> a missed collection</p>
<p style="padding: 0px 10px;"><strong>Order</strong> a new recycling bin, box or bag</p>
<div style="padding: 0px 10px 10px; text-align: center;">
<form action="https://environmentservices.camden.gov.uk/property">
<button class="button">Find, report, order</button>
</form>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="col-md-12 recycling">
<h3 style="color: white; padding: 10px; margin: 0px; background-color: #00019f;">Cleansing issues</h3>
<p style="padding: 10px 10px 0px;"><strong>Report</strong></p>
<ul>
<li>Dumped rubbish</li>
<li>Dog fouling</li>
<li>Graffiti</li>
<li>Other</li>
</ul>
<div style="padding: 0px 10px 10px; text-align: center;">
<form action="https://environmentservices.camden.gov.uk/street">
<button class="button">Report</button>
</form>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="col-md-12 recycling">
<h3 style="color: white; padding: 10px; margin: 0px; background-color: #00019f;">Additional information</h3>
<ul style="padding-top: 10px;">
<li>Frequently asked questions</li>
<li>Communal collections</li>
<li>Large household item collections</li>
<li>More</li>
</ul>
<div style="padding: 0px 10px 10px; text-align: center;">
<form action="http://www.camden.gov.uk/ccm/content/environment/waste-and-recycling/recycling-rubbish-and-reuse/">
<button class="button">View</button>
</form>
</div>
</div>
</div>
</div>
If you do not want:
Javascript
CSS3
Then you can use this:
.table {
display: table;
width: 100%;
border-spacing: 10px 0;
}
.cell {
position: relative;
display: table-cell;
border: 1px solid #f00;
padding: 15px 15px 40px;
}
button {
position: absolute;
bottom: 15px;
right: 15px;
}
<div class="table">
<div class="cell">
<div class="inner">
<strong>Title</strong>
<p>Some text.</p>
<button>Button</button>
</div>
</div>
<div class="cell">
<div class="inner">
<strong>Title</strong>
<p>Some text.</p>
<button>Button</button>
</div>
</div>
<div class="cell">
<div class="inner">
<strong>Title</strong>
<p>Some text.</p>
<p>Some text.</p>
<p>Some text.</p>
<button>Button</button>
</div>
</div>
</div>
Of course, you can target the table and cell class with media queries to disable it for phones for example.
If you cannot use JS/jQuery, then you should set both min-height and max-height for these div's.
e.g.
.recycling {
background-color: white;
border: 1px solid #CCCCCC;
padding: 0;
min-height: 250px;
max-height: 250px;
}
I want to maintain equal distances between my sections. I've currently set the margin-bottom to 20%, which works great on desktop view and mobile view. But with the tablet the sections collide due to an image growing in size. Here's the code, any help is appreciated:
#import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css';
section {
padding-top: 50px;
padding-left: 20px;
padding-right: 20px;
margin-bottom: 20%;
height: 100vh;
}
section .box {
padding: 50px;
background-color: rgba(0, 0, 0, 0.75);
}
.section-title {
margin-bottom: 20px;
font-size: 22px;
line-height: 28px;
color: white;
}
.frame-picture {
position: relative;
border: 2px solid;
border-color: rgba(255, 255, 255, 1);
overflow: hidden;
margin: 0 0 15px 0;
}
<div class="main">
<!-- Home -->
<section id="home" class="home-section">
<div class="">
</div>
</section>
<!-- About Me Section -->
<section id="about" class="about-section">
<div class="box">
<h2 class="section-title">A Little About Myself</h2>
<div class="row">
<div class="col-md-5 col-md-push-7">
<figure class="frame-picture">
<img class="img-responsive" src="https://res.cloudinary.com/knaguibimages/image/upload/v1475345839/ProfilePicV2_yevnyw.jpg" alt="Karim Naguib Profile Picture">
</figure>
</div>
<div class="col-md-7 col-md-pull-5">
<p>Hello! My name's Karim Naguib, and this page was developed to showcase my projects.</p>
<p>I graduated from the University of Waterloo in 2015, with a BSc. in Management Engineering.</p>
</div>
</div>
</div>
</section>
<!-- Portfolio Section -->
<section id="portfolio" class="portfolio-section">
<div class="box">
<h2 class="section-title">My Work</h2>
</div>
</section>
<!-- Contact Me Section -->
<section id="contact" class="contact-section">
<div class="box">
<h2 class="section-title">Get In Touch</h2>
</div>
</section>
</div>
Use flexbox. Wrap the following flex container around the sections:
.main {
display: flex;
flex-wrap: nowrap;
flex-direction: column;
justify-content: space-between;
align-items: space-between;
margin: 40px auto;
padding: 20px;
background: url(http://arbectravel.com/wp-content/uploads/2015/08/aruba1.jpg)
}
And add the following ruleset to the section that contains the picture:
flex: 0 1 auto;
I wish you good luck job hunting.
SNIPPET
#import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css';
body {
color: #fff;
}
.main {
display: flex;
flex-wrap: nowrap;
flex-direction: column;
justify-content: space-between;
align-items: space-between;
margin: 40px auto;
padding: 20px;
background: url(http://arbectravel.com/wp-content/uploads/2015/08/aruba1.jpg)
}
section {
width: 100%;
margin: 0 auto;
}
section .box {
padding: 5px 20px;
margin: 20px auto;
background-color: rgba(0, 0, 0, 0.75);
}
.section-title {
font-size: 22px;
line-height: 28px;
color: white;
}
.frame-picture {
border: 2px solid;
border-color: rgba(255, 255, 255, 1);
overflow: hidden;
margin: 0 0 15px 0;
flex: 0 1 auto;
}
<div class="main">
<!-- Home -->
<section id="home" class="home-section">
<div class="">
</div>
</section>
<!-- About Me Section -->
<section id="about" class="about-section">
<div class="box">
<h2 class="section-title">A Little About Myself</h2>
<div class="row">
<div class="col-md-5 col-md-push-7">
<figure class="frame-picture">
<img class="img-responsive" src="https://res.cloudinary.com/knaguibimages/image/upload/v1475345839/ProfilePicV2_yevnyw.jpg" alt="Karim Naguib Profile Picture">
</figure>
</div>
<div class="col-md-7 col-md-pull-5">
<p>Hello! My name's Karim Naguib, and this page was developed to showcase my projects.</p>
<p>I graduated from the University of Waterloo in 2015, with a BSc. in Management Engineering.</p>
</div>
</div>
</div>
</section>
<!-- Portfolio Section -->
<section id="portfolio" class="portfolio-section">
<div class="box">
<h2 class="section-title">My Work</h2>
</div>
</section>
<!-- Contact Me Section -->
<section id="contact" class="contact-section">
<div class="box">
<h2 class="section-title">Get In Touch</h2>
</div>
</section>
</div>