I'm building a complex table and having some issues with responsiveness and being able to align all the columns in a row to have the same height depending on how much content is inside a certain row.
Please run the code in full page (1100px +) since mobile responsiveness is not completed yet
Here is the JSFiddle: http://jsfiddle.net/fLr9th4y/2/ - Please reference to #11 in the table to view an example.
Here is the code:
.heading {
background-color: #00C6D7;
}
.sub-heading {
background-color: white;
border-bottom: 1px solid lightgray;
}
h4, h6 {
margin-bottom: 0px;
}
.container {
box-shadow: 0 1px 3px rgba(77,72,69,0.2), 0 6px 10px rgba(77,72,69,0.15);
}
.row > .col-md-12 > span {
font-size: smaller;
}
.col-md-4 > .row {
padding-top: .6rem!important;
padding-bottom: .6rem!important;
height: 60px;
}
.col-md-3 > .row {
padding-top: .6rem!important;
padding-bottom: .6rem!important;
height: 60px;
}
.col-md-2 {
display: flex;
justify-content: center;
align-items: center;
}
.col-md-9 {
padding: 0px!important;
}
.bl {
border-left: 1px solid lightgray;
}
.bb {
border-bottom: 1px solid #00C6D7;
}
.bg-white {
background-color: white;
}
.mainText {
font-style: italic;
color: #00C6D7;
}
.bg-fhdark {
background-color: #5E6A71;
}
.title {
color: #A2AD00;
}
.blank {
background: transparent!important;
}
.slick-prev, .slick-next {
background: black!important;
}
.r1 {
color: black;
}
/* BootStrap 4 Classes */
.py-5 {
padding-bottom: 3rem!important;
padding-top: 3rem!important;
}
.py-2 {
padding-bottom: .5rem!important;
padding-top: .5rem!important;
}
.text-white {
color: #fff!important;
}
.text-left {
text-align: left!important;
}
.text-uppercase {
text-transform: uppercase!important;
}
.font-weight-bold {
font-weight: 700!important;
}
.small {
font-size: 80%;
font-weight: 400;
}
.row {
display: flex;
flex-wrap: wrap;
}
.row-11 {
height: auto!important;
}
/* ----- */
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css"/>
</head>
<body>
<div class="py-5">
<div class="container">
<div class="row">
<div class="col-md-10 text-white text-left py-2 heading">
<h4 class="text-uppercase font-weight-bold">Core Competencies</h4>
<span class="small">Our goal was to develop a set of core competencies that are consistent across the agency amd reflect growth as a priority.
</span>
</div>
<div class="col-md-2 col-md-2 text-center py-2 heading">
<img src="" />
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-3">
<div class="row r1">
<div class="col-md-12">
<span>Test</span>
</div>
</div>
<div class="row py-1 bg-fhdark">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
<span>Client</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>Client Focus, Strategic Counsel and Consultancy</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>Integrated Strategy and Account Management</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>Creativity and Innovation</span>
</div>
</div>
<div class="row py-1 bg-fhdark">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
<span>Talent</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>Manage Full Talent LifeCycle</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>Professional Development/Developing and Empowering</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>Self-Leadership</span>
</div>
</div>
<div class="row py-1 bg-fhdark">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
<span>Business Development and Growth</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>New Business Strategy</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>Prospecting</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>New Business Pitch Preparation, Participation and Leadership</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>Organic Growth</span>
</div>
</div>
<div class="row py-1 bg-fhdark">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
<span>Finance and Operations</span>
</div>
</div>
<div class="row bb row-11">
<div class="col-md-12">
<span>Financial Management of Accounts (Account Profitability, Realization, Budgets) TEST TEST TEST TEST TEST TEST TEST</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>Staffing and Resource Planning</span>
</div>
</div>
</div>
<div class="col-md-9">
<section class="regular slider">
<div class="col-md-4 bl">
<div class="row r1">
<div class="col-md-12">
<h6 class="text-uppercase font-weight-bold title">Junior</h6>
<span>Valued Colleague and Practitioner</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>1</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>2</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>3</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>4</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>5</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>6</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>7</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>8</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>9</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>10</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb row-11">
<div class="col-md-12">
<span>11</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>12</span>
</div>
</div>
</div>
<div class="col-md-4 bl">
<div class="row r1">
<div class="col-md-12">
<h6 class="text-uppercase font-weight-bold title">Mid</h6>
<span>Trusted Colleague; Proven and Creative Practitioner</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>1</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>2</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>3</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>4</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>5</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>6</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>7</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>8</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>9</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>10</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb row-11">
<div class="col-md-12">
<span>11</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>12</span>
</div>
</div>
</div>
<div class="col-md-4 bl">
<div class="row r1">
<div class="col-md-12">
<h6 class="text-uppercase font-weight-bold title">Senior</h6>
<span>Trusted Client Advisor and Partner; Proven Agency Leader</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>1</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>2</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>3</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>4</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>5</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>6</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>7</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>8</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>9</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>10</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb row-11">
<div class="col-md-12">
<span>11</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>12</span>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<script type="text/javascript">
$(function() {
$(".regular").slick({
dots: false,
infinite: false,
slidesToShow: 2,
slidesToScroll: 1,
});
});
</script>
</body>
</html>
Just restructure your html. You having the row and inside you need to have your columns (each is col-md-3 if I see it right, but that's not so important). You can also use css-grid for it: https://css-tricks.com/snippets/css/complete-guide-grid/
I believe you are approaching it wrong way. You should refactor your HTML structure base on row instead of column, it will be easier to make it responsive. You should customize slick function to make it work instead of working arround with CSS
.heading {
background-color: #00C6D7;
}
.sub-heading {
background-color: white;
border-bottom: 1px solid lightgray;
}
h4, h6 {
margin-bottom: 0px;
}
.container {
box-shadow: 0 1px 3px rgba(77,72,69,0.2), 0 6px 10px rgba(77,72,69,0.15);
}
.row > .col-md-12 > span {
font-size: smaller;
}
.col-md-4 > .row {
padding-top: .6rem!important;
padding-bottom: .6rem!important;
height: 60px;
}
.col-md-3 > .row {
padding-top: .6rem!important;
padding-bottom: .6rem!important;
height: 60px;
}
.col-md-2 {
display: flex;
justify-content: center;
align-items: center;
}
.col-md-9 {
padding: 0px!important;
}
.bl {
border-left: 1px solid lightgray;
}
.bb {
border-bottom: 1px solid #00C6D7;
}
.bg-white {
background-color: white;
}
.mainText {
font-style: italic;
color: #00C6D7;
}
.bg-fhdark {
background-color: #5E6A71;
}
.title {
color: #A2AD00;
}
.blank {
background: transparent!important;
}
.slick-prev, .slick-next {
background: black!important;
}
.r1 {
color: black;
}
/* BootStrap 4 Classes */
.py-5 {
padding-bottom: 3rem!important;
padding-top: 3rem!important;
}
.py-2 {
padding-bottom: .5rem!important;
padding-top: .5rem!important;
}
.text-white {
color: #fff!important;
}
.text-left {
text-align: left!important;
}
.text-uppercase {
text-transform: uppercase!important;
}
.font-weight-bold {
font-weight: 700!important;
}
.small {
font-size: 80%;
font-weight: 400;
}
.row {
display: flex;
flex-wrap: wrap;
}
.row-11 {
height: auto!important;
}
/* ----- */
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<div class="row bg-fhdark">
<div class="col-sm-4 text-left text-uppercase font-weight-bold text-white">
<span>Finance and Operations</span>
</div>
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
</div>
<div class="row bb">
<div class="col-sm-4">
<span>Financial Management of Accounts (Account Profitability, Realization, Budgets) TEST TEST TEST TEST TEST
TEST TEST</span>
</div>
<div class="col-sm-4 bl">11</div>
<div class="col-sm-4 bl">12</div>
</div>
<div class="row bb">
<div class="col-sm-4">
<span>Staffing and Resource Planning</span>
</div>
<div class="col-sm-4 bl">12</div>
<div class="col-sm-4 bl">12</div>
</div>
Related
May I ask how to fix this? I need the second container to be at the bottom of the first container, and I do not know how to solve it. I have used display: flex but it seems it does not feel right and applicable in two containers, that is why I am having a trouble on how to fix it:
https://jsfiddle.net/0nv2oLqy/1/
.content {
display: flex;
}
aside {
border-right: 1px solid #000000;
}
aside {
height: 100vh;
width: 350px;
}
aside ul {
padding-top: 5%;
list-style-type: none;
text-align: center;
}
aside a {
text-decoration: none;
display: block;
font-size: 23px;
color: black;
margin: 40px;
font-family: $font1;
font-weight: lighter;
}
aside a:hover {
color: $color1;
}
.first {
margin: 50px;
}
.first a {
background-color: #ebe0dd;
padding: 4px;
}
.line {
padding: 8px;
border-bottom: 1px solid $color5;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.1/font/bootstrap-icons.css">
<div class="content">
<aside class="d-none d-md-block">
<ul>
<li class="first">All</li>
<li>To Pay</li>
<li>To Ship</li>
<li>To Receive</li>
<li>Completed</li>
<li>Cancelled</li>
</ul>
</aside>
<div class="container-fluid p-3 m-5 item1" height="20">
<div class="row">
<div class=" col col-lg-1 text-center">
<img src="/images/charrr.png" alt="" width="50">
</div>
<div class="col col-lg-10 my-2">
<h5>Charlotte Folk</h5>
</div>
<div class="col col-lg-1 my-2 text-center">
<h6>To Pay</h6>
</div>
</div>
<div class="row">
<div class=" col col-lg-1 text-center">
<img src="/images/charlottewhite.jpg" alt="" width="80">
</div>
<div class="col col-lg-10">
<h6>CFXXI Sweater</h6>
<h6>Large</h6>
<h6>x1</h6>
</div>
<div class="col col-lg-1 my-2 text-center">
<h6>P990</h6>
</div>
</div>
<div class="row">
<div class="col-lg text-center bottom1">Contact Seller</div>
</div>
</div>
<div class="container-fluid p-3 m-5 item2" height="20">
<div class="row">
<div class=" col col-lg-1 text-center">
<img src="/images/charrr.png" alt="" width="50">
</div>
<div class="col col-lg-10 my-2">
<h5>Charlotte Folk</h5>
</div>
<div class="col col-lg-1 my-2 text-center">
<h6>To Pay</h6>
</div>
</div>
<div class="row">
<div class=" col col-lg-1 text-center">
<img src="/images/charlottewhite.jpg" alt="" width="80">
</div>
<div class="col col-lg-10">
<h6>CFXXI Sweater</h6>
<h6>Large</h6>
<h6>x1</h6>
</div>
<div class="col col-lg-1 my-2 text-center">
<h6>P990</h6>
</div>
</div>
<div class="row">
<div class="col-lg text-center bottom1">Contact Seller</div>
</div>
</div>
</div>
Just wrap them inside a new div
.content {
display:flex;
}
aside {
border-right: 1px solid #000000;
}
aside {
height: 100vh;
width: 350px;
}
aside ul {
padding-top: 5%;
list-style-type: none;
text-align: center;
}
aside a {
text-decoration: none;
display: block;
font-size: 23px;
color: black;
margin: 40px;
font-family: $font1;
font-weight: lighter;
}
aside a:hover {
color: $color1;
}
.first {
margin: 50px;
}
.first a {
background-color: #ebe0dd;
padding: 4px;
}
.line {
padding: 8px;
border-bottom: 1px solid $color5;
}
.rightDiv {
width: 100%;
}
<!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">
<title>Document</title>
<!--Link for Font awesome icons-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="/styles/try.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.1/font/bootstrap-icons.css">
</head>
<body>
<div class = "content">
<aside class = "d-none d-md-block">
<ul>
<li class = "first">All</li>
<li>To Pay</li>
<li>To Ship</li>
<li>To Receive</li>
<li>Completed</li>
<li>Cancelled</li>
</ul>
</aside>
<div class='rightDiv'>
<div class="container-fluid p-3 item1" height = "20">
<div class="row">
<div class=" col col-lg-1 text-center">
<img src="/images/charrr.png" alt="" width="50">
</div>
<div class="col col-lg-10 my-2">
<h5>Charlotte Folk</h5>
</div>
<div class="col col-lg-1 my-2 text-center">
<h6>To Pay</h6>
</div>
</div>
<div class="row">
<div class=" col col-lg-1 text-center">
<img src="/images/charlottewhite.jpg" alt="" width="80">
</div>
<div class="col col-lg-10">
<h6>CFXXI Sweater</h6>
<h6>Large</h6>
<h6>x1</h6>
</div>
<div class="col col-lg-1 my-2 text-center">
<h6>P990</h6>
</div>
</div>
<div class="row">
<div class="col-lg text-center bottom1">Contact Seller</div>
</div>
</div>
<div class="container-fluid p-3 item2" height = "20">
<div class="row">
<div class=" col col-lg-1 text-center">
<img src="/images/charrr.png" alt="" width="50">
</div>
<div class="col col-lg-10 my-2">
<h5>Charlotte Folk</h5>
</div>
<div class="col col-lg-1 my-2 text-center">
<h6>To Pay</h6>
</div>
</div>
<div class="row">
<div class=" col col-lg-1 text-center">
<img src="/images/charlottewhite.jpg" alt="" width="80">
</div>
<div class="col col-lg-10">
<h6>CFXXI Sweater</h6>
<h6>Large</h6>
<h6>x1</h6>
</div>
<div class="col col-lg-1 my-2 text-center">
<h6>P990</h6>
</div>
</div>
<div class="row">
<div class="col-lg text-center bottom1">Contact Seller</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</body>
</html>
keep that .content {display: flex} but try to add a new container for that two price column or that two container you mentioned in question and then add this ruleset .your-class { display:flex; flex-direction: column; }
There is some margin to the right of the page, seemingly outside of the body itself (seen from inspecting in browser), which also causes a scrolling bar to appear on the bottom, but i can't understand what causes it.
I linked on both codepen and netlify
Codepen:
https://codepen.io/bladeranner5005/pen/QWObNpZ
Netlify:
https://lucid-kalam-398350.netlify.app
html
<!doctype html>
<html lang="it">
<head>
<!--Required meta tags-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Font links-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght#300;400&family=Libre+Franklin:wght#800&display=swap"
rel="stylesheet">
<!--Bootstrap CSS-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!--Icons links-->
<!--Custom css-->
<link href="css/index-css.css" rel="stylesheet">
<title>Andrea D'Angelo-website</title>
</head>
<body>
<!-- NAVBAR ----------------------------------------------------------------------------------------------------------->
<!--Modified bootstrap NAVBAR, with different colors and positioning when in desktop----------------------------------->
<nav class="navbar navbar-expand-lg fixed-top navbar-dark background-black">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav mx-auto">
<a class="nav-item nav-link active nav-link-custom nav-item-spacing" href="index.html">Home</a>
<a class="nav-item nav-link nav-link-custom nav-item-spacing" href="pages/curriculum.html">Curriculum</a>
<a class="nav-item nav-link nav-link-custom nav-item-spacing" href="pages/portfolio.html">Portfolio</a>
<a class="nav-item nav-link nav-link-custom nav-item-spacing" href="pages/contacts.html">Contatti</a>
</div>
</div>
</nav>
<!--Main tag----------------------------------------------------------------------------------------------------------->
<main>
<!--HOME-Logo animation------------------------------------------------------------------------------------------------>
<section class="screen-height">
<div class="container-fluid h-100 d-inline-block">
<div class="top-logo"></div>
<div class="row d-flex justify-content-center align-items-center" id="animation">
<div class="col-4">
<img src="img/index/home-logo.svg" alt="My logo, which has an animation">
</div>
</div>
</div>
</section>
<!--HOME-Curriculum---------------------------------------------------------------------------------------------------->
<section class="background-black screen-height-curriculum">
<div class="container-fluid">
<!--SPACING 1-->
<div class="row">
<div class="cur-buffer-top col-1"></div>
</div>
<!--TEXT 1-->
<div class="row">
<div class="col-2 col-md-2"></div>
<div class="col-8 col-md-4 home-cur-text">
<h2>Sono un designer</h2>
</div>
<div class="col-2 col-md-6"></div>
</div>
<!--SPACING 2-->
<div class="row">
<div class="cur-buffer-mid col-1">
</div>
</div>
<!--TEXT 2-->
<div class="row">
<div class="col-2 col-md-6"></div>
<div class="col-8 col-md-4 home-cur-text">
<h2>Ho esperienza con multipli programmi, sia 2d sia in 3d</h2>
</div>
<div class="col-2 col-md-2"></div>
</div>
<!--SPACING 3-->
<div class="row">
<div class="cur-buffer-mid col-1">
</div>
</div>
<!--TEXT 3-->
<div class="row">
<div class="col-2 col-md-2"></div>
<div class="col-8 col-md-4 home-cur-text">
<h2>Ho lavorato a una grande varietà di progetti, singolarmente e in gruppo</h2>
</div>
<div class="col-2 col-md-6"></div>
</div>
<!--SPACING 4-->
<div class="row">
<div class="cur-buffer-mid 1 col-1"></div>
</div>
<!--TEXT 4-->
<div class="row">
<div class="col-2 col-md-6"></div>
<div class="col-8 col-md-4 home-cur-text">
<h2>Ho esperienza di programmazione, con html, CSS e Javascript</h2>
</div>
<div class="col-2 col-md-2"></div>
</div>
<!--SPACING 5-->
<div class="row">
<div class="cur-buffer-mid">
</div>
</div>
</div>
<!--BUTTONS (DARK BACKGROUND)-->
<div class="container-fluid">
<div class="row">
<div class="col-12 col-md-6 mb-5 mb-md-0">
<div class="container-fluid">
<div class="row">
<div class="col-2 col-md-3"></div>
<div class="col-8 col-md-6">
Online<br>curriculum
</div>
<div class="col-2 col-md-3"></div>
</div>
</div>
</div>
<div class="col-12 col-md-6 mb-5 mb-md-0">
<div class="container-fluid">
<div class="row">
<div class="col-2 col-md-3"></div>
<div class="col-8 col-md-6">
<a href="pdf/curriculum-pdf.pdf" class="link-btn btn btn-dark w-100">Curriculum<br>PDF
version</a>
</div>
<div class="col-2 col-md-3"></div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--HOME-My work------------------------------------------------------------------------------------------------------->
<section>
<div class="container-fluid">
<!--SPACING 1-->
<div class="row">
<div class="work-buffer col-1"></div>
</div>
<!--Title-->
<div class="row d-flex justify-content-center">
<div class="col-3"></div>
<div class="col-6 text-center">
<h1 class="work-text-title">My work</h1>
</div>
<div class="col-3"></div>
</div>
<!--SPACING 2-->
<div class="row">
<div class="work-buffer col-1"></div>
</div>
<!--Pastichair/red-->
<div class="row d-flex justify-content-center">
<div class="col-4"></div>
<div class="col-4 text-center">
<h2 class="work-text-red">Pastichair</h2>
</div>
<div class="col-4"></div>
</div>
<!--Pastichair/text-->
<div class="row d-flex justify-content-center">
<div class="col-2"></div>
<div class="col-8 text-center">
<p class="work-text-normal">Lavoro di design di scenario in cui abbiamo interagito con la
cooperativa torinese Triciclo, dovendo proporre nuovi scenari per migliorare le prestazioni
della cooperativa sia creare un nuovo modello di prodotto che facilmente replicabile dai membri
di Triciclo, in particolare concentrandosi su un tipo di sedia assegnata a inizio progetto.</p>
</div>
<div class="col-2"></div>
</div>
<!--SPACING 3-->
<div class="row">
<div class="work-buffer col-1"></div>
</div>
<!--Beb/red-->
<div class="row d-flex justify-content-center">
<div class="col-4"></div>
<div class="col-4 text-center">
<h2 class="work-text-red">Bella e brava</h2>
</div>
<div class="col-4"></div>
</div>
<!--beb/text-->
<div class="row d-flex justify-content-center">
<div class="col-2"></div>
<div class="col-8 text-center">
<p class="work-text-normal">Progetto di creazione di un video animato di 45 secondi avente come
protagonista un prodotto di packaging pre selezionato, tramite lo strumento video e le tecniche
di animazione virtuale quali Blender, ambientata in contesto reale o frutto di un’invenzione,
con l’evidenza dei particolari motivi dell’essere ecologicamente sostenibile.</p>
</div>
<div class="col-2"></div>
</div>
<!--SPACING 4-->
<div class="row">
<div class="work-buffer col-1"></div>
</div>
<!--Personal space/red-->
<div class="row d-flex justify-content-center">
<div class="col-4"></div>
<div class="col-4 text-center">
<h2 class="work-text-red">Personal space</h2>
</div>
<div class="col-4"></div>
</div>
<!--Personal space/text-->
<div class="row d-flex justify-content-center">
<div class="col-2"></div>
<div class="col-8 text-center">
<p class="work-text-normal">Un progetto di social design, ci è stato dato il compito di creare un
ipotetico progetto riguardante un tema sociale circoscritto a Torino. Abbiamo deciso di
dedicarci al tema delle neuro divergenze nelle scuole, in particolare l’autismo. Abbiamo creato
un’attività la quale punta a facilitare l’interazione fra bambini neuro divergenti e non, la
quale poi si sarebbe sviluppata con un’interazione online con i genitori.</p>
</div>
<div class="col-2"></div>
</div>
<!--SPACING 5-->
<div class="row">
<div class="work-buffer">
</div>
</div>
</div>
<!--BUTTONS-->
<div class="container-fluid">
<div class="row">
<div class="col-12 col-md-6 mb-5 mb-md-0">
<div class="container-fluid">
<div class="row">
<div class="col-2 col-md-3"></div>
<div class="col-8 col-md-6">
Online<br>portfolio
</div>
<div class="col-2 col-md-3"></div>
</div>
</div>
</div>
<div class="col-12 col-md-6">
<div class="container-fluid">
<div class="row">
<div class="col-2 col-md-3"></div>
<div class="col-8 col-md-6">
<a href="pdf/portfolio-pdf.pdf" class="link-btn-light btn btn-light w-100">Portfolio<br>PDF
version</a>
</div>
<div class="col-2 col-md-3"></div>
</div>
</div>
</div>
</div>
</div>
<!--SPACING 6-->
<div class="row">
<div class="work-buffer">
</div>
</div>
</section>
<!--INFO--------------------------------------------------------------------------------------------------------------->
<section class="container-fluid">
<!--Title-->
<div class="row d-flex justify-content-center">
<div class="col-4"></div>
<div class="col-4 text-center">
<h1 class="work-text-title">Info</h1>
</div>
<div class="col-4"></div>
</div>
<!--SPACING 2-->
<div class="row">
<div class="info-buffer">
</div>
</div>
<!--Info wrap-->
<div class="row">
<!--DATA-->
<div class="col-12 col-sm-12 col-md-6">
<div class="container-fluid">
<div class="row">
<div class="col-2 col-sm-2 col-md-3"></div>
<div class="col-8">
<div class="container-fluid0">
<div class="row">
<div class="col-12 text-center">
<h3 class="info-text-title">Andrea Telemaco D'Angelo</h3>
</div>
</div>
<div class="row">
<div class="col-6 text-start">
<p class="info-text-red">Nazionalità</p>
</div>
<div class="col-6 text-end">
<p class="info-text-normal">Italiana</p>
</div>
</div>
<div class="row">
<div class="col-6 text-start">
<p class="info-text-red">Data di nascita</p>
</div>
<div class="col-6 text-end">
<p class="info-text-normal">08/04/2000</p>
</div>
</div>
<div class="row">
<div class="col-6 text-start">
<p class="info-text-red">Luogo di nascita</p>
</div>
<div class="col-6 text-end">
<p class="info-text-normal">Caserta</p>
</div>
</div>
<div class="row">
<div class="col-4 text-start">
<p class="info-text-red">Email</p>
</div>
<div class="col-8 text-end">
<p class="info-text-normal">emailexemple#gmail</p>
</div>
</div>
<div class="row">
<div class="col-6 text-start">
<p class="info-text-red">Telefono</p>
</div>
<div class="col-6 text-end">
<p class="info-text-normal">0000000000</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--BUTTON-->
<div class="col-12 col-sm-12 col-md-6 container-fluid">
<div class="row">
<div class="col-1 info-buffer-button"></div>
</div>
<div class="row">
<div class="col-2 col-md-3"></div>
<div class="col-8 col-md-6">
<a href="pages/contacts.html" class="link-btn-light btn btn-light w-100">Full contacts<br>and
info</a>
</div>
<div class="col-2 col-md-3"></div>
</div>
<div class="row">
<div class="col-1 info-buffer-button"></div>
</div>
</div>
<!--Button wrap end-->
</div>
</section>
<!--Footer start------------------------------------------------------------------------------------------------------->
<!--Red line-->
<div class="border-top border-5 border-danger mt-5"></div>
<!--Start container-->
<footer class="container-fluid">
<!--ROW 1-->
<div class="row mb-5 mt-5">
<!--ROW 1-A-->
<div class="col-12 col-md-6 mb-5 mb-md-0">
<div class="container-fluid">
<div class="row">
<div class="col-2 col-md-3"></div>
<div class="col-8 col-md-6">
Home<br>page
</div>
<div class="col-2 col-md-3"></div>
</div>
</div>
</div>
<!--ROW 1-B-->
<div class="col-12 col-md-6">
<div class="container-fluid">
<div class="row">
<div class="col-2 col-md-3"></div>
<div class="col-8 col-md-6">
Online<br>curriculum
</div>
<div class="col-2 col-md-3"></div>
</div>
</div>
</div>
</div>
<!--ROW 2-->
<div class="row mb-5 mt-5">
<!--ROW 2-A-->
<div class="col-12 col-md-6 mb-5 mb-md-0">
<div class="container-fluid">
<div class="row">
<div class="col-2 col-md-3"></div>
<div class="col-8 col-md-6">
Online<br>portfolio
</div>
<div class="col-2 col-md-3"></div>
</div>
</div>
</div>
<!--ROW 2-B-->
<div class="col-12 col-md-6">
<div class="container-fluid">
<div class="row">
<div class="col-2 col-md-3"></div>
<div class="col-8 col-md-6">
<a href="pages/contacts.html" class="link-btn-light btn btn-light w-100">Full contacts<br>and
info</a>
</div>
<div class="col-2 col-md-3"></div>
</div>
</div>
</div>
</div>
</footer>
</main>
<!-- Javascript for Bootstrap --------------------->
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
<!-- Javascript for Bootstrap END------------------>
</body>
</html>
CSS
/*ESSENTIAL ----------------------------------------------------------------------------------------------------------*/
/*To stop the navbar from covering content, source: https://stackoverflow.com/questions/10336194/top-nav-bar-blocking-top-content-of-the-page*/
body {
padding-top: 55px;
margin: 0;
}
/*To make internal links selection better:*/
html {
scroll-behavior: smooth;
}
/*Change text size depending on viewport, source: https://css-tricks.com/viewport-sized-typography/ */
h1 {
font-size: 5.9vw;
}
h2 {
font-size: 3.0vh;
}
p {
font-size: 2vmin;
}
/*FONTS --------------------------------------------------------------------------------------------------------------*/
/*Tags from google fonts
Josefin sans light:
font-family: 'Josefin Sans', sans-serif;
font-weight: 300;
Josefin sans regular:
font-family: 'Josefin Sans', sans-serif;
font-weight: 400;
Libre Franklin
font-family: 'Libre Franklin', sans-serif;
font-weight: 800;
*/
/*NAVBAR -------------------------------------------------------------------------------------------------------------*/
/*Structure --*/
.nav-item-spacing {
margin-left: 30px;
margin-right: 30px;
}
.vertical-center {
margin: 0;
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
/*Colors --*/
.background-black {
background-color: black;
}
.nav-link-custom {
font-family: 'Libre Franklin', sans-serif;
font-weight: 800;
font-size: 1vw;
}
/*HOME-Logo animation ------------------------------------------------------------------------------------------------*/
/*Background --*/
/*
.background-black {
background: black;
}
*/
/*Structure --*/
.screen-height {
height: 100vh;
}
.top-logo {
height: 13vh;
}
#media (max-width: 768px) {
.top-logo {
height: 30vh;
}
}
#animation {
animation: animation 2s;
}
#keyframes animation {
from {
transform: translateY(60vh);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 100%;
}
}
/*CURRICULUM ---------------------------------------------------------------------------------------------------------*/
/*Background --*/
/*
.background-black {
background: black;
}
*/
/*Structure --*/
.screen-height-curriculum {
height: 100vh;
}
#media (max-width: 768px) {
.screen-height-curriculum {
height: 110vh;
}
}
.cur-buffer-mid {
height: 10vh;
}
#media (max-width: 768px) {
.cur-buffer-mid {
height: 6vh;
}
}
.cur-buffer-top {
height: 8vh;
}
/*Text --*/
.home-cur-text {
font-family: 'Josefin Sans', sans-serif;
font-weight: 400;
color: white;
text-align: center;
}
/*Button --*/
.link-btn {
border-style: solid;
border-width: thick;
border-color: white;
background-color: black;
font-family: 'Libre Franklin', sans-serif;
font-weight: 800;
}
/*MY WORK ------------------------------------------------------------------------------------------------------------*/
/*Structure --*/
.work-buffer {
height: 10vh;
}
/*Text --*/
.work-text-title {
font-family: 'Libre Franklin', sans-serif;
font-weight: 800;
color: black;
font-size: 60pt;
}
.work-text-red {
font-family: 'Josefin Sans', sans-serif;
font-weight: 400;
color: red;
font-size: 36pt;
}
.work-text-normal {
font-family: 'Josefin Sans', sans-serif;
font-weight: 300;
color: black;
font-size: 24pt;
}
#media (max-width: 768px) {
.work-text-title {
font-family: 'Libre Franklin', sans-serif;
font-weight: 800;
color: black;
font-size: 42pt;
}
.work-text-red {
font-family: 'Josefin Sans', sans-serif;
font-weight: 400;
color: red;
font-size: 24pt;
}
.work-text-normal {
font-family: 'Josefin Sans', sans-serif;
font-weight: 300;
color: black;
font-size: 18pt;
}
}
/*Button --*/
.link-btn-light {
border-style: solid;
border-width: thick;
border-color: black;
background-color: white;
font-family: 'Libre Franklin', sans-serif;
font-weight: 800;
}
/*INFO ---------------------------------------------------------------------------------------------------------------*/
/*Structure --*/
.info-buffer {
height: 10vh;
}
.info-buffer-button {
height: 15vh;
}
/*Text --*/
/*
.work-text-title {
font-family: 'Libre Franklin', sans-serif;
font-weight: 800;
color: black;
font-size: 60pt;
}
*/
.info-text-title {
font-family: 'Josefin Sans', sans-serif;
font-weight: 400;
color: black;
font-size: 36pt;
}
.info-text-red {
font-family: 'Josefin Sans', sans-serif;
font-weight: 400;
color: red;
font-size: 24pt;
}
.info-text-normal {
font-family: 'Josefin Sans', sans-serif;
font-weight: 300;
color: black;
font-size: 24pt;
}
#media (max-width: 768px) {
.info-text-title {
font-family: 'Josefin Sans', sans-serif;
font-weight: 400;
color: black;
font-size: 18pt;
}
.info-text-red {
font-family: 'Josefin Sans', sans-serif;
font-weight: 400;
color: red;
font-size: 3vmin;
}
.info-text-normal {
font-family: 'Josefin Sans', sans-serif;
font-weight: 300;
color: black;
font-size: 4vmin;
}
}
I'm not finding the culprit immediately after checking your codepen, but a quick and dirty way to hide any side to side scrolling is by using
body {
overflow-x: hidden;
}
It's caused by the margins of your middle logo, #animation. Setting --bs-gutter-x to 0 seems to fix it.
fix this in grid:
.row {
--bs-gutter-x: 0;
}
or add this style:
body {
width: 100vw;
overflow-x: hidden;
}
It looks like it's an issue with the div under the <!--SPACING 6--> comment in the My Work section. Remove class="row" from this div, and this'll fix the issue. Here's an example:
<!--SPACING 6-->
<div>
<div class="work-buffer">
</div>
</div>
I also noticed that the work-buffer class is only added for spacing. A better way of doing this would be to get rid of this div all together and add padding-bottom to the <section> tag containing the "My Work" content instead.
Trying to Get this Grid format
Hello, I am currently new to using bootstrap 4 and am trying to get the format above.
This is what I am currently trying so far....
<div class="container">
<div class="row">
<div class="col-md-4" >1</div>
<div class="col-md-8">2</div>
<div class="col-md-8 ">3</div>
</div>
</div>
Here you go!
.content {
min-height: 100px;
background: #ccc;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-4">
<div class="row h-100">
<div class="col-12 h-100">
<div class="content h-100">1</div>
</div>
</div>
</div>
<div class="col-8">
<div class="row">
<div class="col-12 mb-3 pl-0">
<div class="content">2</div>
</div>
<div class="col-12 pl-0">
<div class="content">3</div>
</div>
</div>
</div>
</div>
</div>
.one, .two, .three{
border: solid 2px gray;
min-height: 150px;
font-weight: bold;
}
.one{
background: lightblue;
}
.two{
background: lightgreen;
}
.three{
background: pink;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-sm-5 one">1</div>
<div class="col-sm-7">
<div class="row">
<div class="col-sm-8 two">2</div>
</div>
<div class="row">
<div class="col-sm-8 three">3</div>
</div>
</div>
</div>
</div>
I've tried many different ways to have two rows become sticky-top and I just can't seem to have any success with it.
Here is what I currently have:
Default:
Sticky-top:
Problem: How do I make the Junior/Mid/Senior row also be a sticky top but have it below the 'Core Competencies'? When I apply a sticky top to the second row, it displays above.
Correct: Both rows to be sticky-top without overlapping each other.
Please run the below code to view the problem.
.heading {
background-color: #00C6D7;
}
h4, h6 {
margin-bottom: 0px;
}
.container {
box-shadow: 0 1px 3px rgba(77,72,69,0.2), 0 6px 10px rgba(77,72,69,0.15);
}
span {
font-size: smaller;
}
.col-md-3 {
padding-top: .6rem!important;
padding-bottom: .6rem!important;
}
.col-md-2 {
display: flex;
justify-content: center;
align-items: center;
}
.bl {
border-left: 1px solid lightgray;
}
.bb {
border-bottom: 1px solid #00C6D7;
}
.bg-white {
background-color: white;
}
.mainText {
font-style: italic;
color: #00C6D7;
}
.bg-fhdark {
background-color: #5E6A71;
}
.title {
color: #A2AD00;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div class="py-5">
<div class="container">
<div class="row sticky-top">
<div class="col-md-10 text-white text-left py-2 heading">
<h4 class="text-uppercase font-weight-bold">Core Competencies</h4>
<span class="small">Our goal was to develop a set of core competencies that are consistent across the agency amd reflect growth as a priority.
Some competencies, such as negotiating, listening and interpersonal communication are not included but are considered baseline skills.
The Core Competencies consist of four main areas: Client, Talent, Business Development and Growth, and Finance and Operations.
Each area is outlined at the junior, mid and senior level.
</span>
</div>
<div class="col-md-2 text-center py-2 heading">
<img style="width: inherit" src="" />
</div>
</div>
<div class="row bg-white">
<div class="col-md-3"></div>
<div class="col-md-3 bl">
<h6 class="text-uppercase font-weight-bold title">Junior</h6>
<span>Valued Colleague and Practitioner</span>
</div>
<div class="col-md-3 bl">
<h6 class="text-uppercase font-weight-bold title">Mid</h6>
<span>Trusted Colleague; Proven and Creative Practitioner</span>
</div>
<div class="col-md-3 bl text-left">
<h6 class="text-uppercase font-weight-bold title">Senior</h6>
<span>Trusted Client Advisor and Partner; Proven Agency Leader</span>
</div>
</div>
<div class="row py-1 bg-fhdark">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">Client</div>
</div>
<div class="row">
<div class="col-md-3 bb">
<span>Client Focus, Strategic Counsel and Consultancy</span>
</div>
<div class="col-md-3 bl bb">1</div>
<div class="col-md-3 bl bb">1</div>
<div class="col-md-3 bl bb">1</div>
</div>
<div class="row">
<div class="col-md-3 bb">
<span>Integrated Strategy and Account Management</span>
</div>
<div class="col-md-3 bl bb">2</div>
<div class="col-md-3 bl bb">2</div>
<div class="col-md-3 bl bb">2</div>
</div>
<div class="row">
<div class="col-md-3">
<span>Creativity and Innovation</span>
</div>
<div class="col-md-3 bl">3</div>
<div class="col-md-3 bl">3</div>
<div class="col-md-3 bl">3</div>
</div>
<div class="row py-1 bg-fhdark">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">Talent</div>
</div>
<div class="row">
<div class="col-md-3 bb">
<span>Manage Full Talent LifeCycle</span>
</div>
<div class="col-md-3 bl bb">4</div>
<div class="col-md-3 bl bb">4</div>
<div class="col-md-3 bl bb">4</div>
</div>
<div class="row">
<div class="col-md-3 bb">
<span>Professional Development/Developing and Empowering</span>
</div>
<div class="col-md-3 bl bb">5</div>
<div class="col-md-3 bl bb">5</div>
<div class="col-md-3 bl bb">5</div>
</div>
<div class="row">
<div class="col-md-3">
<span>Self-Leadership</span>
</div>
<div class="col-md-3 bl">6</div>
<div class="col-md-3 bl">6</div>
<div class="col-md-3 bl">6</div>
</div>
<div class="row py-1 bg-fhdark">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">Business Development and Growth</div>
</div>
<div class="row">
<div class="col-md-3 bb">
<span>New Business Strategy</span>
</div>
<div class="col-md-3 bl bb">7</div>
<div class="col-md-3 bl bb">7</div>
<div class="col-md-3 bl bb">7</div>
</div>
<div class="row">
<div class="col-md-3 bb">
<span>Prospecting</span>
</div>
<div class="col-md-3 bl bb">8</div>
<div class="col-md-3 bl bb">8</div>
<div class="col-md-3 bl bb">8</div>
</div>
<div class="row">
<div class="col-md-3 bb">
<span>New Business Pitch Preparation, Participation and Leaderhip</span>
</div>
<div class="col-md-3 bl bb">9</div>
<div class="col-md-3 bl bb">9</div>
<div class="col-md-3 bl bb">9</div>
</div>
<div class="row">
<div class="col-md-3">
<span>Organic Growth</span>
</div>
<div class="col-md-3 bl">10</div>
<div class="col-md-3 bl">10</div>
<div class="col-md-3 bl">10</div>
</div>
<div class="row py-1 bg-fhdark">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">Finance and Operations</div>
</div>
<div class="row">
<div class="col-md-3 bb">
<span>Financial Management of Accounts (Account Profitability, Realization, Budgets)</span>
</div>
<div class="col-md-3 bl bb">11</div>
<div class="col-md-3 bl bb">11</div>
<div class="col-md-3 bl bb">11</div>
</div>
<div class="row">
<div class="col-md-3">
<span>Staffing and Resource Planning</span>
</div>
<div class="col-md-3 bl">12</div>
<div class="col-md-3 bl">12</div>
<div class="col-md-3 bl">12</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
Couldn't you just put the other div into the sticky element?
like this,
body { background: #f2f2f2; }
.heading {
background-color: #00C6D7;
}
h4, h6 {
margin-bottom: 0px;
}
.container {
box-shadow: 0 1px 3px rgba(77,72,69,0.2), 0 6px 10px rgba(77,72,69,0.15);
}
span {
font-size: smaller;
}
.col-md-3 {
padding-top: .6rem!important;
padding-bottom: .6rem!important;
}
.col-md-2 {
display: flex;
justify-content: center;
align-items: center;
}
.bl {
border-left: 1px solid lightgray;
}
.bb {
border-bottom: 1px solid #00C6D7;
}
.bg-white {
background-color: white;
}
.mainText {
font-style: italic;
color: #00C6D7;
}
.bg-fhdark {
background-color: #5E6A71;
}
.title {
color: #A2AD00;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div class="py-5">
<div class="container">
<div class="row sticky-top">
<div class="col-md-10 text-white text-left py-2 heading">
<h4 class="text-uppercase font-weight-bold">Core Competencies</h4>
<span class="small">Our goal was to develop a set of core competencies that are consistent across the agency amd reflect growth as a priority.
Some competencies, such as negotiating, listening and interpersonal communication are not included but are considered baseline skills.
The Core Competencies consist of four main areas: Client, Talent, Business Development and Growth, and Finance and Operations.
Each area is outlined at the junior, mid and senior level.
</span>
</div>
<div class="col-md-2 text-center py-2 heading">
<img style="width: inherit" src="" />
</div>
<div class="col-md-12">
<div class="row bg-white">
<div class="col-md-3"></div>
<div class="col-md-3 bl">
<h6 class="text-uppercase font-weight-bold title">Junior</h6>
<span>Valued Colleague and Practitioner</span>
</div>
<div class="col-md-3 bl">
<h6 class="text-uppercase font-weight-bold title">Mid</h6>
<span>Trusted Colleague; Proven and Creative Practitioner</span>
</div>
<div class="col-md-3 bl text-left">
<h6 class="text-uppercase font-weight-bold title">Senior</h6>
<span>Trusted Client Advisor and Partner; Proven Agency Leader</span>
</div>
</div></div>
</div>
<div class="row py-1 bg-fhdark">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">Client</div>
</div>
<div class="row">
<div class="col-md-3 bb">
<span>Client Focus, Strategic Counsel and Consultancy</span>
</div>
<div class="col-md-3 bl bb">1</div>
<div class="col-md-3 bl bb">1</div>
<div class="col-md-3 bl bb">1</div>
</div>
<div class="row">
<div class="col-md-3 bb">
<span>Integrated Strategy and Account Management</span>
</div>
<div class="col-md-3 bl bb">2</div>
<div class="col-md-3 bl bb">2</div>
<div class="col-md-3 bl bb">2</div>
</div>
<div class="row">
<div class="col-md-3">
<span>Creativity and Innovation</span>
</div>
<div class="col-md-3 bl">3</div>
<div class="col-md-3 bl">3</div>
<div class="col-md-3 bl">3</div>
</div>
<div class="row py-1 bg-fhdark">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">Talent</div>
</div>
<div class="row">
<div class="col-md-3 bb">
<span>Manage Full Talent LifeCycle</span>
</div>
<div class="col-md-3 bl bb">4</div>
<div class="col-md-3 bl bb">4</div>
<div class="col-md-3 bl bb">4</div>
</div>
<div class="row">
<div class="col-md-3 bb">
<span>Professional Development/Developing and Empowering</span>
</div>
<div class="col-md-3 bl bb">5</div>
<div class="col-md-3 bl bb">5</div>
<div class="col-md-3 bl bb">5</div>
</div>
<div class="row">
<div class="col-md-3">
<span>Self-Leadership</span>
</div>
<div class="col-md-3 bl">6</div>
<div class="col-md-3 bl">6</div>
<div class="col-md-3 bl">6</div>
</div>
<div class="row py-1 bg-fhdark">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">Business Development and Growth</div>
</div>
<div class="row">
<div class="col-md-3 bb">
<span>New Business Strategy</span>
</div>
<div class="col-md-3 bl bb">7</div>
<div class="col-md-3 bl bb">7</div>
<div class="col-md-3 bl bb">7</div>
</div>
<div class="row">
<div class="col-md-3 bb">
<span>Prospecting</span>
</div>
<div class="col-md-3 bl bb">8</div>
<div class="col-md-3 bl bb">8</div>
<div class="col-md-3 bl bb">8</div>
</div>
<div class="row">
<div class="col-md-3 bb">
<span>New Business Pitch Preparation, Participation and Leaderhip</span>
</div>
<div class="col-md-3 bl bb">9</div>
<div class="col-md-3 bl bb">9</div>
<div class="col-md-3 bl bb">9</div>
</div>
<div class="row">
<div class="col-md-3">
<span>Organic Growth</span>
</div>
<div class="col-md-3 bl">10</div>
<div class="col-md-3 bl">10</div>
<div class="col-md-3 bl">10</div>
</div>
<div class="row py-1 bg-fhdark">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">Finance and Operations</div>
</div>
<div class="row">
<div class="col-md-3 bb">
<span>Financial Management of Accounts (Account Profitability, Realization, Budgets)</span>
</div>
<div class="col-md-3 bl bb">11</div>
<div class="col-md-3 bl bb">11</div>
<div class="col-md-3 bl bb">11</div>
</div>
<div class="row">
<div class="col-md-3">
<span>Staffing and Resource Planning</span>
</div>
<div class="col-md-3 bl">12</div>
<div class="col-md-3 bl">12</div>
<div class="col-md-3 bl">12</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
I'm having a problem with a bootstrap based layout in Firefox.
Whats happening is that the rows are transitioning to the right when there is more than one row, but in Chrome and IE11 it doesn't do this.
Screenshot of how it looks in Firefox > http://i.imgur.com/GJEClw9.png
Screenshot of how it looks in Chrome/IE11 > http://i.imgur.com/baxNdJa.png
This is my CSS/HTML
.forumNavigation a:link, a:visited, a:hover, a:active {
color: #000;
text-decoration: none;
}
/*
Category headers
*/
.catHeader {
background-image: url(../../assets/img/bg.png);
background-repeat: repeat;
font-size: 14px;
font-weight: bold;
color: #fff;
line-height: 40px;
padding-left: 30px;
}
.catHeader a {
color: #fff;
text-decoration: none;
}
/*
Forum table borders to save space
*/
.forumTitleBlock,
.forumReplyBlock,
.forumlastPostInfo {
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
vertical-align: middle;
padding-top:8px;
padding-bottom:8px;
}
.postIcon,
.forumsLeftBlock,
.forumStats {
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
vertical-align: middle;
}
/*
Columns of same height styles (Part of the above Forum styles)
*/
.row-same-height {
display: table;
width: 100%;
}
.col-md-height {
display: table-cell;
float: none !important;
}
/*
Padding below each category
*/
.blank {
padding:10px;
}
/*
Forum Statistics Section
*/
.forumStats {
padding-top:7px;
padding-bottom:5px;
}
<div class="row">
<div class="col-md-6 animated" data-animation="fadeInUp" data-animation-delay="900"></div>
<div class="col-md-12 form-element animated" data-animation="fadeInUp" data-animation-delay="1200">
<div class="row">
<div class="col-md-12 forumContainer">
<div class="col-md-6 forumNavigation">Forum</div>
<div class="col-md-6 forumMessages text-right">Messages</div>
</div>
</div>
<div class="row">
<div class="col-md-12 catHeader" id="catHeader">Categories<a data-toggle="collapse" data-parent="catHeader" href="#coll-1" style="float:right"><i class="fa fa-sort" style="color:#777;"></i></a></div>
<div class="collapse in" id="coll-1">
<div class="row-same-height">
<div class="col-md-1 col-md-height forumsLeftBlock">icon</div>
<div class="col-md-7 col-md-height forumTitleBlock">Forum Title<br /> <small>test subtitle</small></div>
<div class="col-md-1 col-md-height forumReplyBlock">Topics<br />Replies</div>
<div class="col-md-3 col-md-height forumlastPostInfo">Last Post info</div>
</div>
<div class="row-same-height">
<div class="col-md-1 col-md-height forumsLeftBlock">icon</div>
<div class="col-md-7 col-md-height forumTitleBlock">Forum Title<br /> <small>test subtitle</small></div>
<div class="col-md-1 col-md-height forumReplyBlock">Topics<br />Replies</div>
<div class="col-md-3 col-md-height forumlastPostInfo">Last Post info</div>
</div>
</div>
</div>
<div class="blank"></div>
<div class="row">
<div class="col-md-12 catHeader text-center" id="statsHeader">Forum Statistics<a data-toggle="collapse" data-parent="statsHeader" href="#stats" style="float:right"><i class="fa fa-sort" style="color:#777;"></i></a></div>
<div class="collapse in" id="stats">
<div class="col-md-12 forumStats text-center">Topics: | Posts: | Members: </div>
</div>
</div>
</div>
</div>
After what Jey wrote, I rewrote the code to the following
<div class="row forumContainer">
<div class="col-md-8 forumNavigation">Forum</div>
<div class="col-md-4 forumMessages text-right">Messages</div>
</div>
<div class="row">
<div class="col-md-12 catHeader" id="catHeader">Categories
<a data-toggle="collapse" data-parent="catHeader" href="#coll-1" style="float:right"><i class="fa fa-sort" style="color:#777;"></i></a>
</div>
</div>
<div class="collapse in" id="coll-1">
<div class="row">
<div class="row-same-height">
<div class="col-md-1 col-md-height forumsLeftBlock">icon</div>
<div class="col-md-7 col-md-height forumTitleBlock">Forum Title<br /> <small>test subtitle<?php echo $forum['subtitle']; ?></small></div>
<div class="col-md-1 col-md-height forumReplyBlock">Topics<br />Replies</div>
<div class="col-md-3 col-md-height forumlastPostInfo">Last Post info</div>
</div>
</div>
<div class="row">
<div class="row-same-height">
<div class="col-md-1 col-md-height forumsLeftBlock">icon</div>
<div class="col-md-7 col-md-height forumTitleBlock">Forum Title<br /> <small>test subtitle<?php echo $forum['subtitle']; ?></small></div>
<div class="col-md-1 col-md-height forumReplyBlock">Topics<br />Replies</div>
<div class="col-md-3 col-md-height forumlastPostInfo">Last Post info</div>
</div>
</div>
</div>
<div class="blank"></div>
<div class="row">
<div class="col-md-12 catHeader text-center" id="statsHeader">Forum Statistics<a data-toggle="collapse" data-parent="statsHeader" href="#stats" style="float:right"><i class="fa fa-sort" style="color:#777;"></i></a></div>
</div>
<div class="row">
<div class="collapse in" id="stats">
<div class="col-md-12 forumStats text-center">Topics: 1234 | Posts: 5678 | Members: 1234</div>
</div>
</div>