I am making some grid elements for a website. The demo can be seen here.
There is a 2 column row. I would like they keep the same height until they reach the breakpoint 768 px. Is it incorrect to set a height on the columns?
Incase not, should i set the height on the class="card"?
My suggestion is not set the height like this?
.index-content .card img {
width: 100%;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
height: 350px;
}
.index-content a:hover {
color: black;
text-decoration: none;
}
.index-content {
margin-bottom: 20px;
/*padding: 50px 0px;*/
}
.index-content .row {
margin-top: 20px;
}
.index-content a {
color: black;
}
.index-content .card {
background-color: #FFFFFF;
padding: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}
.index-content .card:hover {
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
color: black;
}
.index-content .card img {
width: 100%;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.index-content .card h4 {
margin: 20px;
}
.index-content .card p {
margin: 20px;
opacity: 0.65;
}
.index-content .blue-button {
width: 100px;
-webkit-transition: background-color 1s, color 1s;
/* For Safari 3.1 to 6.0 */
transition: background-color 1s, color 1s;
min-height: 20px;
background-color: #002E5B;
color: #ffffff;
border-radius: 4px;
text-align: center;
font-weight: lighter;
margin: 0px 20px 15px 20px;
padding: 5px 0px;
display: inline-block;
}
.index-content .blue-button:hover {
background-color: #dadada;
color: #002E5B;
}
#media (max-width: 768px) {
.index-content .col-lg-4 {
margin-top: 20px;
}
}
/* Card < 768px */
#media (min-width: 768px) {
.card {
position: relative;
}
.card-content {
position: absolute;
bottom: 0;
width: 100%;
background: rgba(0, 0, 0, 0.5);
}
.card-content h4,
.card-content p {
color: white;
width: 100%;
float: left;
margin: 0 0 5px;
}
.card-content a {
float: right;
}
.index-content .card h4,
.index-content .card p {
padding: 15px 20px;
margin: 0;
}
.index-content .card p {
padding: 0 20px 15px;
margin: 0;
}
}
/* GRID ELEMENTS */
/* Global CSS*/
.row > div{
margin-bottom: 15px;
}
.content{
background: #b4bac0;
min-height: 300px;
}
/* When there is 2 columns on top of eachother */
.sidebar{
background: #b4bac0;
min-height: 300px;
}
.sidebar-top{
min-height: 140px;
background: #dbdfe7;
}
.sidebar-bottom{
min-height: 145px;
background: #7e8aa0;
margin-bottom: -15px;
}
/* Padding used for the core CSS */
.small-padding.top {
padding-top:5px;
}
.small-padding.bottom {
padding-bottom:5px;
}
.small-padding.left {
padding-left:7.5px;
}
.small-padding.right {
padding-right:7.5px;
}
button {
float-right
}
/* Media quries */
#media only screen and (max-width: 768px) {
.row {
margin-left: -7.5px;
margin-right: -7.5px;
}
.row>[class*="col-"] {
padding-left: 7.5px;
padding-right: 7.5px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>GRID PANEL MERGE</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row">
<div class="index-content">
<div class="container">
<a href="#">
<div class="col-lg-12">
<div class="card">
<img src="https://image.ibb.co/nJ97Go/bmw.jpg">
<div class="card-content">
<h4>BMW NEW MODELS</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
Read More
</div>
</div>
</div>
</a>
</div>
</div>
</div>
<div class="index-content">
<div class="container">
<div class="col-sm-4">
<div class="card">
<img src="https://image.ibb.co/iiWA2T/bmw_1.jpg">
<div class="card-content">
<h4>BMW NEW MODELS</h4>
Read More
</div>
</div>
</div>
<div class="col-sm-8">
<div class="card">
<img src="https://image.ibb.co/nJ97Go/bmw.jpg">
<div class="card-content">
<h4>BMW NEW MODELS</h4>
Read More
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I'm not entirely sure if this is what you want. But in cases like this I like to use flexbox.
I added a small flexbox container in your code.
.index-content a:hover {
color: black;
text-decoration: none;
}
.index-content {
margin-bottom: 20px;
/*padding: 50px 0px;*/
}
.index-content .row {
margin-top: 20px;
}
.index-content a {
color: black;
}
.index-content .card {
background-color: #FFFFFF;
padding: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}
.index-content .card:hover {
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
color: black;
}
.index-content .card img {
width: 100%;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.index-content .card h4 {
margin: 20px;
}
.index-content .card p {
margin: 20px;
opacity: 0.65;
}
.index-content .blue-button {
width: 100px;
-webkit-transition: background-color 1s, color 1s;
/* For Safari 3.1 to 6.0 */
transition: background-color 1s, color 1s;
min-height: 20px;
background-color: #002E5B;
color: #ffffff;
border-radius: 4px;
text-align: center;
font-weight: lighter;
margin: 0px 20px 15px 20px;
padding: 5px 0px;
display: inline-block;
}
.index-content .blue-button:hover {
background-color: #dadada;
color: #002E5B;
}
#media (max-width: 768px) {
.index-content .col-lg-4 {
margin-top: 20px;
}
}
/* Card < 768px */
#media (min-width: 768px) {
.card {
position: relative;
}
.card-content {
position: absolute;
bottom: 0;
width: 100%;
background: rgba(0, 0, 0, 0.5);
}
.card-content h4,
.card-content p {
color: white;
width: 100%;
float: left;
margin: 0 0 5px;
}
.card-content a {
float: right;
}
.index-content .card h4,
.index-content .card p {
padding: 15px 20px;
margin: 0;
}
.index-content .card p {
padding: 0 20px 15px;
margin: 0;
}
}
/* GRID ELEMENTS */
/* Global CSS*/
.row > div{
margin-bottom: 15px;
}
.content{
background: #b4bac0;
min-height: 300px;
}
/* When there is 2 columns on top of eachother */
.sidebar{
background: #b4bac0;
min-height: 300px;
}
.sidebar-top{
min-height: 140px;
background: #dbdfe7;
}
.sidebar-bottom{
min-height: 145px;
background: #7e8aa0;
margin-bottom: -15px;
}
/* Padding used for the core CSS */
.small-padding.top {
padding-top:5px;
}
.small-padding.bottom {
padding-bottom:5px;
}
.small-padding.left {
padding-left:7.5px;
}
.small-padding.right {
padding-right:7.5px;
}
/* Media quries */
#media only screen and (max-width: 768px) {
.row {
margin-left: -7.5px;
margin-right: -7.5px;
}
.row>[class*="col-"] {
padding-left: 7.5px;
padding-right: 7.5px;
}
.flex-container {
flex-direction:column;
}
.card-container {
margin-bottom: 15px;
}
}
.flex-container {
display: flex;
}
.card-container {
padding-right: 15px;
padding-left: 15px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
<title>GRID PANEL MERGE</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row">
<div class="index-content">
<div class="container">
<a href="#">
<div class="col-lg-12">
<div class="card">
<img src="https://image.ibb.co/nJ97Go/bmw.jpg">
<div class="card-content">
<h4>BMW NEW MODELS</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
Read More
</div>
</div>
</div>
</a>
</div>
</div>
</div>
<div class="row">
<div class="index-content">
<div class="container">
<div class="flex-container">
<div class="card-container">
<div class="card">
<img src="https://image.ibb.co/iiWA2T/bmw_1.jpg">
<div class="card-content">
<h4>BMW NEW MODELS</h4>
Read More
</div>
</div>
</div>
<div class="card-container">
<div class="card">
<img src="https://image.ibb.co/nJ97Go/bmw.jpg">
<div class="card-content">
<h4>BMW NEW MODELS</h4>
Read More
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
</body>
</html>
Related
I can't seem to figure out what the extra horizontal space is coming from when I check the responsiveness on the device, because of this extra space the divs are not centering properly so I can't center the header and my team photos for the website. Could anyone help me figure out where it is? I know it's a lot of code but I can't seem to find it.
What I see currently
https://gyazo.com/b3891ce06ef29f7a20bc29e3a9043f08
* {
margin: 0;
font-family: 'Comfortaa', cursive;
scroll-behavior: smooth;
box-sizing: border-box;
}
body {
transition: background-color 1s ease;
}
.cursor {
cursor: none;
height: 25px;
width: 25px;
background-color: rgb(55, 55, 56);
border-radius: 50%;
position: absolute;
display: none;
z-index: 1;
pointer-events: none;
transition: background-color 1s
}
.changeSize {
background-color: maroon;
}
.mainPage {
width: 100%;
font-size: 3.5em;
}
.mainPage p {
padding-top: 1em;
font-size: .4em;
}
.mainPage h1 {
background: -webkit-linear-gradient(45deg, lightskyblue, rgb(90, 84, 84));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.headerFont {
display: flex;
justify-content: space-between;
padding: 1.5em;
}
.menuList {
display: flex;
padding: 1em;
}
.menuList a {
text-decoration: none;
color: black;
}
.menuList a:hover {
text-decoration: none;
color: grey;
transition: ease-in 250ms;
}
.menuList li {
list-style: none;
padding-left: 1em;
}
.headerFont h1 {
font-size: 3em;
}
.panel {
min-height: 100vh;
width: 100%;
}
#home {
display: flex;
justify-content: space-around;
align-items: center;
}
#aboutUs {
display: flex;
justify-content: space-around;
align-items: center;
}
#mint {
display: flex;
justify-content: space-around;
align-items: center;
}
#team {
display: flex;
width: 100%;
width: fit-content;
margin: 0;
justify-content: space-around;
align-items: center;
}
#roadMap {
width: fit-content;
display: flex;
justify-content: center;
align-items: center;
}
.roadMapSetup {
text-align: center;
}
.roadMapHeader h1 {
font-size: 5em;
padding-bottom: 1em;
color: black;
}
.m25,
.m50,
.m75,
.m100 {
border-radius: 10px;
display: flex;
align-items: center;
height: 15vh;
padding: 1em;
transition: background-color .4s;
}
.m25:hover,
.m50:hover,
.m75:hover,
.m100:hover {
background-color: seashell;
}
#easeInOut {
transition-timing-function: ease-in-out;
}
.color-main {
background-color: seashell;
}
.color-salmon {
background-color: salmon;
}
.color-orange {
background-color: rgb(241, 173, 45);
}
.color-blue {
background-color: lightskyblue;
}
.color-green {
background-color: lightgreen;
}
.gifShibas {
border: 5px solid black;
}
.meetTheTeamSetup h1 {
font-size: 5em;
padding-bottom: 1em;
color: black;
}
.teamWrapper {
display: flex;
flex-direction: row;
gap: 1em;
}
.member {
text-align: center;
background-color: seashell;
border: 5px solid black;
}
.memberDesc {
background-color: seashell;
height: 10vh;
text-align: center;
}
.aboutUsGif img {
height: 50vh;
width: 50vh;
border: 5px solid black;
}
.aboutUsInfo {
display: flex;
align-items: center;
background-color: seashell;
height: 50vh;
padding-left: 1em;
padding-right: 1em;
}
.aboutWrapper {
display: flex;
justify-content: space-around;
align-items: center;
}
.mintButton {
background: -webkit-linear-gradient(45deg, rgb(225, 0, 255), rgb(92, 2, 80));
padding: 15px 32px;
border-radius: 5%;
font-size: .75em;
text-decoration: none;
color: seashell;
transition: box-shadow .4s;
}
.mintButton:hover {
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
#easeInOut {
transition-timing-function: ease-in-out;
}
.logo a {
text-decoration: none;
color: black;
}
.timeline {
max-width: 1200px;
margin: 0 auto;
position: relative;
}
.timeline::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 6px;
background: seashell;
left: 50%;
margin-left: -3px;
}
.container {
padding: 10px 40px;
position: relative;
width: 50%;
}
.container::after {
content: '';
position: absolute;
top: 15px;
right: -17px;
width: 25px;
height: 25px;
background-image: url("images/icon5.jpg");
background-size: cover;
border-radius: 50%;
z-index: 10;
border: 4px solid #FC2E20;
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
.container:nth-child(1)::after {
content: '';
position: absolute;
top: 15px;
right: -17px;
width: 25px;
height: 25px;
background-image: url("images/icon.png");
background-size: cover;
border-radius: 50%;
z-index: 10;
border: 4px solid #FC2E20;
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
.container:nth-child(2)::after {
content: '';
position: absolute;
top: 15px;
right: -17px;
width: 25px;
height: 25px;
background-image: url("images/icon2.jpg");
background-size: cover;
border-radius: 50%;
z-index: 10;
border: 4px solid #FC2E20;
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
.container:nth-child(3)::after {
content: '';
position: absolute;
top: 15px;
right: -17px;
width: 25px;
height: 25px;
background-image: url("images/icon3.jpg");
background-size: cover;
border-radius: 50%;
z-index: 10;
border: 4px solid #FC2E20;
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
.container:nth-child(4)::after {
content: '';
position: absolute;
top: 15px;
right: -17px;
width: 25px;
height: 25px;
background-image: url("images/icon4.jpg");
background-size: cover;
border-radius: 50%;
z-index: 10;
border: 4px solid #FC2E20;
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
.left {
left: 0;
}
.right {
left: 50%;
}
.right::after {
left: -16px;
}
.left::before {
content: '';
height: 0px;
width: 0px;
position: absolute;
top: 22px;
right: 30px;
border: 10px solid seashell;
border-width: 10px 0 10px 10px;
border-color: transparent transparent transparent seashell;
}
.right::before {
content: '';
height: 0px;
width: 0px;
position: absolute;
top: 22px;
left: 30px;
border: 10px solid seashell;
border-width: 10px 10px 10px 0;
border-color: transparent seashell transparent transparent;
}
.content {
padding: 20px 30px;
background: seashell;
border-radius: 6px;
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
/* Mobile version */
#media screen and (max-width: 600px) {
.timeline::after {
left: 31px;
}
.container {
width: 100%;
padding-left: 70px;
padding-right: 25px;
}
.container::before {
left: 60px;
border-width: 10px 10px 10px 0;
border-color: transparent seashell transparent transparent;
}
.left::after,
.right::after {
left: 15px;
z-index: 1;
}
.right {
left: 0;
}
}
#media screen and (max-width: 800px) {
.panel {
min-height: 150vh;
}
.mainPage {
font-size: 3em;
}
.mainPage p {
padding-top: 1em;
font-size: .5rem;
}
.mainPage h1 {
background: -webkit-linear-gradient(45deg, lightskyblue, rgb(90, 84, 84));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
#home {
width: 100vw;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.aboutWrapper {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.aboutUsInfo {
display: flex;
align-items: center;
background-color: seashell;
height: fit-content;
text-align: center;
padding-top: 1em;
padding-bottom: 1em;
}
.meetTheTeamSetup h1 {
font-size: 50px;
}
.mainPage h1 {
font-size: 40px;
}
.aboutUsInfo {
display: flex;
flex-direction: column;
}
.aboutUsInfo h1 {
font-size: 1.15rem;
;
}
.logo {
width: 100%;
text-align: center;
}
.header {
display: flex;
flex-direction: column;
}
.menu {
display: flex;
justify-content: center;
}
.teamWrapper {
display: flex;
flex-direction: column;
gap: 1em;
}
.meetTheTeamSetup {
padding-top: 5em;
}
.buttonSpacing {
padding-top: 2.5em;
padding-bottom: 2.5em;
}
.aboutUsGif img {
height: 25vh;
width: 25vh;
border: 5px solid black;
}
}
<!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>Cool Shibas</title>
<link rel="stylesheet" href="stylesheet.css">
<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=Comfortaa:wght#700&display=swap" rel="stylesheet">
<link rel="shortcut icon" type="image/jpg" href="images/icon.png" />
</head>
<body>
<div class="cursor"></div>
<div class="header headerFont">
<div class="logo">
<h1>Cool Shibas</h1>
</div>
<div class="menu">
<ul class="menuList">
<li>Home</li>
<li>About Us</li>
<li>Road Map</li>
<li>Team</li>
<li>Mint</li>
</ul>
</div>
</div>
<div id="home" class="panel" data-color="main">
<div class="mainPage">
<h1>Cool Shibas</h1>
<p>Consectetur enim sint consectetur ipsum laborum eu et ut.
<Br>Ad aliqua irure voluptate commodo exercitation ullamco elit qui minim. <br>Irure ipsum eiusmod reprehenderit id id nulla ullamco elit
<Br>adipisicing tempor non exercitation magna.</p>
<br>
<div class="buttonSpacing">
<a id="easeInOut" class="mintButton" href="#mint">Mint</a>
</div>
</div>
<div>
<img class="gifShibas" src="images/coolShibaGif.gif" alt="gif">
</div>
</div>
<div id="aboutUs" class="panel" data-color="salmon">
<div class="aboutWrapper">
<div class="aboutUsGif">
<img src="images/icon.png" alt="icon">
</div>
<div class="aboutUsInfo">
<h1>Lorem ipsum dolor sit amet consectetur adipisicing elit.Earum quos excepturi explicabo temporibus ad, eos enim reprehenderit repellat dolore quasi molestias dignissimos eligendi mollitia error dicta aut pariatur facere quidem!</h1>
</div>
</div>
</div>
<div id="roadMap" class="panel" data-color="orange">
<div class="timeline">
<div class="container left">
<div class="content">
<h2>Phase 0: Just the start -</h2>
<p>We’ll giveaway 500 whitelist spots to members in our discord community.
</p>
</div>
</div>
<div class="container right">
<div class="content">
<h2>Phase 1: Release -</h2>
<p>Cool Shibas minting will be open on our minting website. We’ll reach out to different influencers to promote our project.</p>
</div>
</div>
<div class="container left">
<div class="content">
<h2>Phase 2: 25% minted -</h2>
<p>We'll create a DAO wallet and holders will have a say how much ETH will go into the wallet, We'll put 5 ETH of our own into the wallet. Along with that, we will be doing multiple ETH giveaways for holders and non-holders.</p>
</div>
</div>
<div class="container right">
<div class="content">
<h2>Phase 3: 50% minted -</h2>
<p>We'll giveaway 20 Cool Shiba NFTs. Along with that we will also be giving away $25,000 to a charity chosen by the community.</p>
</div>
</div>
<div class="container left">
<div class="content">
<h2>Phase 4: 100% minted -</h2>
<p>We will give away a total of $25,000 in giveaways to our holders. We’ll also drop our Cool Shibas merch line to all holders. We’ll also be giving $100,000 to a charity of community’s choice.</p>
</div>
</div>
</div>
</div>
<div id="team" class="panel" data-color="blue">
<div class="meetTheTeamSetup">
<h1>Meet the team</h1>
<div class="teamWrapper">
<div class="member">
<img src="images/icon.png" alt="Kam">
<h2>Kam</h2>
<p>Founder & Marketer</p>
</div>
<div class="member">
<img src="images/icon.png" alt="SmiiB">
<div class="memberDesc">
<h2>SmiiB</h2>
<p>Developer</p>
</div>
</div>
</div>
</div>
</div>
<div id="mint" class="panel" data-color="green">
<div class="mainPage">
<h1>Please wait till mint day</h1>
</div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script src="script.js"></script>
</html>
Use
#media only screen and (max-width: 600px) {
body {
overflow-x: hidden;
}
}
im having issues with my login page, so im trying to make the page responsive to the mobile version, but there's some problems:
1.When the page turn to the mobile version, the login box shrinks but the left side of it just goes over the the screen, same goes to the top part of it.
2.The footer won't stick to the bottom of the page.
3.Is there a way to create some space around the login box when it shrinks?
I included a picture of when the page turn to the mobile version, and its the exact appearance i got when i open it from my LenovoA2010 which is 480x854 pixels wide :
Picture Here!
Sorry if i wasn't clear enough, this is my first question here and i just started learning Front-End Web Development like about 2 weeks ago, feeling real noob here.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #ebe682;
}
.login-content {
display: block;
justify-content: flex-start;
align-items: center;
text-align: center;
}
form {
width: 380px;
padding: 40px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: whitesmoke;
text-align: center;
border-radius: 14px;
box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
}
.avatar {
width: 100px;
height: 100px;
position: absolute;
left: calc(50% - 50px);
top: -50px;
background: whitesmoke;
border-radius: 90%;
}
form>h1 {
color: #18191a;
text-transform: capitalize;
font-weight: 700;
letter-spacing: 3px;
margin-top: 30px;
}
form>h3 {
color: #18191a;
font-weight: normal;
letter-spacing: normal;
margin-top: 8px;
margin-bottom: 30px;
}
form input[type="text"],
form input[type="password"] {
border: 2px solid #18191a;
background: none;
display: block;
margin: 20px auto;
text-align: center;
padding: 14px 10px;
width: 200px;
outline: none;
color: #18191a;
border-radius: 24px;
transition: 0.5s;
}
form input[type="text"]:focus,
form input[type="password"]:focus {
width: 280px;
border-color: #b0b3b8;
}
form input[type="submit"] {
border: none;
background: #18191a;
display: block;
margin: 20px auto;
text-align: center;
padding: 14px 10px;
outline: none;
color: whitesmoke;
border-radius: 24px;
transition: 0.25s;
cursor: pointer;
width: 200px;
}
form input[type="submit"]:hover {
background: #3a3b3c;
}
a {
width: 200px;
display: block;
margin: 20px auto;
text-decoration: none;
color: #18191a;
}
a:hover {
color: #3a3b3c;
text-decoration: underline;
}
footer {
background: #E4DD56;
color: #18191a;
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
padding: 1em;
box-shadow: 0 0 10px #777;
}
/* Mobile Styles */
#media only screen and (max-width: 400px) {
body {
background-color: #F09A9D;
/* Red */
}
}
/* Tablet Styles */
#media only screen and (min-width: 401px) and (max-width: 960px) {
body {
background-color: #F5CF8E;
/* Yellow */
}
}
/* Desktop Styles */
#media only screen and (min-width: 961px) {
body {
background-color: #ebe682;
/* Blue */
}
}
<!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>Animated Login Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="login-content">
<form action="" method="">
<img class="avatar" src="resources/icons/user-avatar-filled.svg" alt="">
<h1>Sign In</h1>
<h3>to continue to Onyi</h3>
<input type="text" name="" placeholder="Username">
<input type="password" name="" placeholder="Password">
<input type="submit" name="" value="Login">
<hr>
Forgot password?
</form>
</div>
<footer>
© 2021 Company, Inc
</footer>
</body>
</html>
since you gave the white box a fixed 380px width it will not react to screen change what you can do instead is to use max-width with width to get what you want
.your-form{
max-width: 380px;
width: 100%;
}
this way you tell your box to expand as much as it wants but never go beyond 380px. this way you get a nice responsive form
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #ebe682;
}
.login-content {
display: block;
justify-content: flex-start;
align-items: center;
text-align: center;
padding: 20px;
}
form {
max-width: 380px;
width: 100%;
padding: 40px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: whitesmoke;
text-align: center;
border-radius: 14px;
box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
}
.avatar {
width: 100px;
height: 100px;
position: absolute;
left: calc(50% - 50px);
top: -50px;
background: whitesmoke;
border-radius: 90%;
}
form>h1 {
color: #18191a;
text-transform: capitalize;
font-weight: 700;
letter-spacing: 3px;
margin-top: 30px;
}
form>h3 {
color: #18191a;
font-weight: normal;
letter-spacing: normal;
margin-top: 8px;
margin-bottom: 30px;
}
form input[type="text"],
form input[type="password"] {
border: 2px solid #18191a;
background: none;
display: block;
margin: 20px auto;
text-align: center;
padding: 14px 10px;
width: 200px;
outline: none;
color: #18191a;
border-radius: 24px;
transition: 0.5s;
}
form input[type="text"]:focus,
form input[type="password"]:focus {
width: 280px;
border-color: #b0b3b8;
}
form input[type="submit"] {
border: none;
background: #18191a;
display: block;
margin: 20px auto;
text-align: center;
padding: 14px 10px;
outline: none;
color: whitesmoke;
border-radius: 24px;
transition: 0.25s;
cursor: pointer;
width: 200px;
}
form input[type="submit"]:hover {
background: #3a3b3c;
}
a {
width: 200px;
display: block;
margin: 20px auto;
text-decoration: none;
color: #18191a;
}
a:hover {
color: #3a3b3c;
text-decoration: underline;
}
footer {
background: #E4DD56;
color: #18191a;
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
padding: 1em;
box-shadow: 0 0 10px #777;
}
/* Mobile Styles */
#media only screen and (max-width: 400px) {
body {
background-color: #F09A9D;
/* Red */
}
}
/* Tablet Styles */
#media only screen and (min-width: 401px) and (max-width: 960px) {
body {
background-color: #F5CF8E;
/* Yellow */
}
}
/* Desktop Styles */
#media only screen and (min-width: 961px) {
body {
background-color: #ebe682;
/* Blue */
}
}
<!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>Animated Login Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="login-content">
<form action="" method="">
<img class="avatar" src="resources/icons/user-avatar-filled.svg" alt="">
<h1>Sign In</h1>
<h3>to continue to Onyi</h3>
<input type="text" name="" placeholder="Username">
<input type="password" name="" placeholder="Password">
<input type="submit" name="" value="Login">
<hr>
Forgot password?
</form>
</div>
<footer>
© 2021 Company, Inc
</footer>
</body>
</html>
I am working with Bootstrap 3.3.7. I would like to position my headlines like this on small and big devices. I have tried to use the default Bootstrap classes for position the buttons. But I cannot make this work on the headlines. I would like to use Bootstrap classes as much as possible, so I dont have to customize and overwrite Bootstrap classes.
How can I position the Headline like the below picture?
There is a demo of the grid here.
/* Card and Button */
body {
background-color: #f5f5f5;
}
div {
background-color: #fff;
}
.index-content a:hover {
color: black;
text-decoration: none;
}
.index-content .row {
margin-top: 20px;
}
.index-content a {
color: black;
}
.index-content .card {
background-color: #FFFFFF;
padding: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}
.index-content .card:hover {
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
color: black;
}
.index-content .card img {
width: 100%;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
height: 350px;
}
.index-content .card h4 {
margin: 20px;
}
.index-content .card p {
margin: 20px;
opacity: 0.65;
}
.index-content .blue-button {
width: 100px;
-webkit-transition: background-color 1s, color 1s;
/* For Safari 3.1 to 6.0 */
transition: background-color 0.5s, color 0.5s;
min-height: 20px;
background-color: #4CAF50;
color: #ffffff;
border-radius: 4px;
text-align: center;
font-weight: lighter;
margin: 0px 20px 15px 20px;
padding: 5px 0px;
display: inline-block;
}
.index-content .blue-button:hover {
background-color: #dadada;
color: #002E5B;
}
/* Set width between block elements */
.small-padding.top {
padding-top:10px;
}
.small-padding.bottom {
padding-bottom:10px;
}
.small-padding.left {
padding-left:5px;
}
.small-padding.right {
padding-right:5px;
}
.row [class*="col-"] {
padding-left: 5px;
padding-right: 5px;
}
/* Set full width on columns */
#media (max-width: 768px) {
.img-responsive {
width: 100%;
}
}
/* GRID ELEMENTS MEDIA QUERIES */
#media (min-width: 768px) {
.card {
position: relative;
}
.card-content {
position: absolute;
bottom: 0;
width: 100%;
background: rgba(0, 0, 0, 0.5);
}
.card-content h4,
.card-content p {
color: white;
width: 100%;
float: left;
margin: 0 0 5px;
}
.card-content a {
float: right;
}
.index-content .card h4,
.index-content .card p {
padding: 15px 20px;
margin: 0;
}
.index-content .card p {
padding: 0 20px 15px;
margin: 0;
}
}
.margin_bottom {
margin-bottom: 10px;
}
.row [class*="col-"] {
padding-right: 5px;
padding-left: 5px;
}
.row {
margin-left: -5px;
margin-right: -5px;
}
.card-img-bottom {
color: #fff;
height: 20rem;
background: url(images/img1.jpg) center no-repeat;
background-size: cover;
}
.img-responsive {
height: 100%;
}
/* Button Position */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.bottom-right {
position: absolute;
bottom: 8px;
right: 16px;
}
.bottom-left {
position: absolute;
bottom: 8px;
left: 16px;
}
<div class="container">
<!-- Col 1 - 1 - 2 -->
<div class="row">
<div class="col-sm-3 margin_bottom">
<img src="http://placehold.it/300x410" alt="5" class="img-responsive"></img>
<h3 class="centered">HEADLINE</h3>
<button class="btn btn-default centered"style="background-color:transparent;border:2px solid black;">See Offer</button>
</div>
<div class="col-sm-6 margin_bottom">
<img src="http://placehold.it/600x410" alt="5" class="img-responsive" />
<h3 class="bottom-left">HEADLINE</h3>
<button class="btn btn-success bottom-right">See Offer</button>
<!--<i class="fa fa-long-arrow-right"></a>-->
</div>
<div class="col-sm-3">
<div class="row">
<div class="col-xs-6 col-sm-12 margin_bottom">
<img src="http://placehold.it/300x200" alt="5" class="img-responsive" />
<h3 class="centered">HEADLINE</h3>
<button class="btn btn-success centered">See Offer</button>
<!--<i class="fa fa-long-arrow-right"></a>-->
</div>
<div class="col-xs-6 col-sm-12 margin_bottom">
<img src="http://placehold.it/300x200" alt="5" class="img-responsive" />
<h3 class="centered">HEADLINE</h3>
<button class="btn btn-success centered">See Offer</button>
<!--<i class="fa fa-long-arrow-right"></a>-->
</div>
</div>
</div>
</div>
</div>
I would wrap each h3 and its accompanying button in a div and use this to position both elements at once.
Eg.
<h3 class="centered">HEADLINE</h3>
<button class="btn btn-default centered">See Offer</button>
would become
<div class="centered">
<h3>HEADLINE</h3>
<button class="btn btn-default">See Offer</button>
</div>
/* Card and Button */
body {
background-color: #f5f5f5;
}
div {
background-color: #fff;
}
.index-content a:hover {
color: black;
text-decoration: none;
}
.index-content .row {
margin-top: 20px;
}
.index-content a {
color: black;
}
.index-content .card {
background-color: #FFFFFF;
padding: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}
.index-content .card:hover {
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
color: black;
}
.index-content .card img {
width: 100%;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
height: 350px;
}
.index-content .card h4 {
margin: 20px;
}
.index-content .card p {
margin: 20px;
opacity: 0.65;
}
.index-content .blue-button {
width: 100px;
-webkit-transition: background-color 1s, color 1s;
/* For Safari 3.1 to 6.0 */
transition: background-color 0.5s, color 0.5s;
min-height: 20px;
background-color: #4CAF50;
color: #ffffff;
border-radius: 4px;
text-align: center;
font-weight: lighter;
margin: 0px 20px 15px 20px;
padding: 5px 0px;
display: inline-block;
}
.index-content .blue-button:hover {
background-color: #dadada;
color: #002E5B;
}
/* Set width between block elements */
.small-padding.top {
padding-top:10px;
}
.small-padding.bottom {
padding-bottom:10px;
}
.small-padding.left {
padding-left:5px;
}
.small-padding.right {
padding-right:5px;
}
.row [class*="col-"] {
padding-left: 5px;
padding-right: 5px;
}
/* Set full width on columns */
#media (max-width: 768px) {
.img-responsive {
width: 100%;
}
}
/* GRID ELEMENTS MEDIA QUERIES */
#media (min-width: 768px) {
.card {
position: relative;
}
.card-content {
position: absolute;
bottom: 0;
width: 100%;
background: rgba(0, 0, 0, 0.5);
}
.card-content h4,
.card-content p {
color: white;
width: 100%;
float: left;
margin: 0 0 5px;
}
.card-content a {
float: right;
}
.index-content .card h4,
.index-content .card p {
padding: 15px 20px;
margin: 0;
}
.index-content .card p {
padding: 0 20px 15px;
margin: 0;
}
}
.margin_bottom {
margin-bottom: 10px;
}
.row [class*="col-"] {
padding-right: 5px;
padding-left: 5px;
}
.row {
margin-left: -5px;
margin-right: -5px;
}
.card-img-bottom {
color: #fff;
height: 20rem;
background: url(images/img1.jpg) center no-repeat;
background-size: cover;
}
.img-responsive {
height: 100%;
}
/* Button Position */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.bottom-right {
position: absolute;
bottom: 8px;
right: 16px;
}
.bottom-left {
position: absolute;
bottom: 8px;
left: 16px;
}
.wrap {
text-align: center;
background: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<!-- Col 1 - 1 - 2 -->
<div class="row">
<div class="col-sm-3 margin_bottom">
<img src="http://placehold.it/300x410" alt="5" class="img-responsive"></img>
<div class="wrap centered">
<h3>HEADLINE</h3>
<button class="btn btn-default "style="background-color:transparent;border:2px solid black;">See Offer</button>
</div>
</div>
<div class="col-sm-6 margin_bottom">
<img src="http://placehold.it/600x410" alt="5" class="img-responsive" />
<div class="wrap bottom-left">
<h3>HEADLINE</h3>
<button class="btn btn-success">See Offer</button>
</div>
</div>
<div class="col-sm-3">
<div class="row">
<div class="col-xs-6 col-sm-12 margin_bottom">
<img src="http://placehold.it/300x200" alt="5" class="img-responsive" />
<div class="wrap centered">
<h3>HEADLINE</h3>
<button class="btn btn-success">See Offer</button>
</div>
</div>
<div class="col-xs-6 col-sm-12 margin_bottom">
<img src="http://placehold.it/300x200" alt="5" class="img-responsive" />
<div class="wrap centered">
<h3>HEADLINE</h3>
<button class="btn btn-success">See Offer</button>
</div>
</div>
</div>
</div>
</div>
</div>
I am making a website with block elements. When I go below 768 px the elements will have a border around them The padding on each side of the block elements is different. I need the sites to have the same padding on 5px. I tried to solve that with adding the code:
#media only screen and (max-width: 768px) {
.row {
margin-left: -5px;
margin-right: -5px;
}
.row>[class*="col-"] {
padding-left: 5px;
padding-right: 5px;
}
}
But does not solve the problem. Does anybody have an idea how I can solve this? (When i paste in my HTML code in the Stackoverflow editor the div tags is jumping around. Sorry for this, I do not know why. So the html code looks quite messy)
/* Card and Button */
.index-content a:hover {
color: black;
text-decoration: none;
}
.index-content {
/*margin-bottom: 20px;*/
/*padding: 50px 0px;*/
}
.index-content .row {
margin-top: 20px;
}
.index-content a {
color: black;
}
.index-content .card {
background-color: #FFFFFF;
padding: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}
.index-content .card:hover {
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
color: black;
}
.index-content .card img {
width: 100%;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
height: 350px;
}
.index-content .card h4 {
margin: 20px;
}
.index-content .card p {
margin: 20px;
opacity: 0.65;
}
.index-content .blue-button {
width: 100px;
-webkit-transition: background-color 1s, color 1s;
/* For Safari 3.1 to 6.0 */
transition: background-color 1s, color 1s;
min-height: 20px;
background-color: #002E5B;
color: #ffffff;
border-radius: 4px;
text-align: center;
font-weight: lighter;
margin: 0px 20px 15px 20px;
padding: 5px 0px;
display: inline-block;
}
.index-content .blue-button:hover {
background-color: #dadada;
color: #002E5B;
}
#media (max-width: 768px) {
.index-content .col-lg-4 {
margin-top: 20px;
}
}
#media (min-width: 768px) {
.card {
position: relative;
}
.card-content {
position: absolute;
bottom: 0;
width: 100%;
background: rgba(0, 0, 0, 0.5);
}
.card-content h4,
.card-content p {
color: white;
width: 100%;
float: left;
margin: 0 0 5px;
}
.card-content a {
float: right;
}
.index-content .card h4,
.index-content .card p {
padding: 15px 20px;
margin: 0;
}
.index-content .card p {
padding: 0 20px 15px;
margin: 0;
}
}
/* GRID ELEMENTS */
/* Set width between block elements */
.small-padding.top {
padding-top: 10px;
}
.small-padding.bottom {
padding-bottom: 10px;
}
.small-padding.left {
padding-left: 5px;
}
.small-padding.right {
padding-right: 5px;
}
/* Media quries */
#media only screen and (max-width: 768px) {
.small-padding.bottom {
padding-bottom: 10px;
}
}
#media only screen and (max-width: 768px) {
.row {
margin-left: -7.5px;
margin-right: -7.5px;
}
.row>[class*="col-"] {
padding-left: 7.5px;
padding-right: 7.5px;
}
}
<div class="row">
<div class="index-content">
<div class="container">
<a href="#">
<div class="col-sm-12 small-padding bottom">
<div class="card">
<img src="https://image.ibb.co/nJ97Go/bmw.jpg"></img>
<div class="card-content">
<h4>BMW NEW MODELS</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
Read More
</div>
</div>
</div>
</a>
</div>
</div>
</div>
<div class="row">
<div class="index-content">
<div class="container">
<div class="col-sm-4 small-padding right bottom">
<div class="card">
<img src="https://image.ibb.co/iiWA2T/bmw_1.jpg"></img>
<div class="card-content">
<h4>BMW NEW MODELS</h4>
Read More
</div>
</div>
</div>
<div class="col-sm-8 small-padding left">
<div class="card">
<img src="https://image.ibb.co/nJ97Go/bmw.jpg"></img>
<div class="card-content">
<h4>BMW NEW MODELS</h4>
<!-- <p>Brødtekst</p> -->
Read More
</div>
</div>
</div>
</div>
</div>
</div>
Why aren' you using Bootstrap grid classes? Then no custom CSS is required.
<div class="col-sm-12 col-md-12 col-xs-12">
</div>
You must use bootstrap classes for all screen sizes if you use class="col-sm-8" only is apply to medium screens, the correct use is:
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
</div>
JUST ADD !important if you want to apply the same padding.
#media only screen and (max-width: 768px) {
.row {
margin-left: -5px !important;
margin-right: -5px !important;
}
.row>[class*="col-"] {
padding-left: 5px !important;
padding-right: 5px !important;
}
}
.row>[class*="col-"] is looking for any class="col- in the directly child of .row, your HTML is not structured like this. So remove the >
.row [class*="col-"] {
padding-left: 5px;
padding-right: 5px;
}
Or you also can set .container [class*="col-"]
I am working with Bootstrap 3.3.7.
I need button 1 to align like the below picture, but the button should not affect with Button 2. Before that make sense you can see the demo version here.
I have tried to set a margin-top:80px; on button 1, but that is not working below < 768px. I have tried to make a new row and col-sm-12 inside the card, but then the button is going over the text. Button 2 i called the classcta-right, so I know that button is aligning right.
So how can place the button 1 line the picture, no matter if the text is only 4 lines?
I have cut away so much code as possible, so the question is not getting to long.
body {
background-color: #f5f5f5;
}
div {
background-color: #fff;
}
.index-content a:hover {
color: black;
text-decoration: none;
}
.index-content .row {
margin-top: 20px;
}
.index-content a {
color: black;
}
.index-content .card {
background-color: #FFFFFF;
padding: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}
.index-content .card:hover {
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
color: black;
}
.index-content .card img {
width: 100%;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
height: 350px;
}
.index-content .card h4 {
margin: 20px;
}
.index-content .card p {
margin: 20px;
opacity: 0.65;
}
.index-content .blue-button {
width: 100px;
-webkit-transition: background-color 1s, color 1s;
/* For Safari 3.1 to 6.0 */
transition: background-color 0.5s, color 0.5s;
min-height: 20px;
background-color: #4CAF50;
color: #ffffff;
border-radius: 4px;
text-align: center;
font-weight: lighter;
margin: 0px 20px 15px 20px;
padding: 5px 0px;
display: inline-block;
}
.index-content .blue-button:hover {
background-color: #dadada;
color: #002E5B;
}
/* Set width between block elements */
.small-padding.top {
padding-top:10px;
}
.small-padding.bottom {
padding-bottom:10px;
}
.small-padding.left {
padding-left:5px;
}
.small-padding.right {
padding-right:5px;
}
.row [class*="col-"] {
padding-left: 5px;
padding-right: 5px;
}
.margin_bottom {
margin-bottom: 10px;
}
.row [class*="col-"] {
padding-right: 5px;
padding-left: 5px;
}
.row {
margin-left: -5px;
margin-right: -5px;
}
.card-img-bottom {
color: #fff;
height: 20rem;
background: url(images/img1.jpg) center no-repeat;
background-size: cover;
}
.img-responsive {
height: 100%;
}
/* Button Position */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.bottom-right {
position: absolute;
bottom: 8px;
right: 16px;
}
.bottom-left {
position: absolute;
bottom: 8px;
left: 16px;
}
.inner-wrapper {
text-align: center;
background: none;
}
/* Set full width on columns */
#media (max-width: 768px) {
.img-responsive {
width: 100%;
}
}
/* GRID ELEMENTS MEDIA QUERIES */
#media (min-width: 768px) {
.card {
position: relative;
}
.card-content {
position: absolute;
bottom: 0;
width: 100%;
background: rgba(0, 0, 0, 0.5);
}
.card-content h4,
.card-content p {
color: white;
width: 100%;
float: left;
margin: 0 0 5px;
}
.card-content a {
float: right;
}
.index-content .card h4,
.index-content .card p {
padding: 15px 20px;
margin: 0;
}
.index-content .card p {
padding: 0 20px 15px;
margin: 0;
}
.card-content-textbox {
position: absolute;
top: 0;
left: 0;
background: rgba(255, 255, 255, 0.7);
/*right: 0;*//* top position on right*/
margin: 15px;
max-width: 300px;
height: 91%
}
}
/* Grid with different placement of position buttons */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.bottom-right {
position: absolute;
bottom: 8px;
right: 16px;
}
.bottom-left {
position: absolute;
bottom: 8px;
left: 16px;
}
.inner-wrapper {
text-align: center;
background: none;
}
<div class="container">
<!-- Full width Banner -->
<div class="row">
<a href="#">
<div class="col-md-12 small-padding top bottom">
<div class="index-content">
<div class="card">
<img src="http://placehold.it/1200x500"></img>
<div class="card-content-textbox">
<h4>BMW & HEADLINE 2018</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
BUTTON 1
</div>
</div>
</div>
</div>
</a>
</div>
<!-- Col 4 - 8 -->
<div class="row">
<div class="col-sm-4 small-padding right bottom">
<div class="index-content">
<div class="card">
<img src="http://placehold.it/390x500"></img>
<div class="card-content">
<h4>BMW & HEADLINE 2018</h4>
BUTTON 2
</div>
</div>
</div>
</div>
<div class="col-sm-8 small-padding left bottom">
<div class="index-content">
<div class="card">
<img src="http://placehold.it/800x500"></img>
<div class="card-content">
<h4>BMW & HEADLINE 2018</h4>
<!-- <p>Brødtekst</p> -->
BUTTON 2
</div>
</div>
</div>
</div>
</div>
</div>
Make use of flexbox:
body {
background-color: #f5f5f5;
}
.flexbox-column {
display: flex;
flex-direction:column; /*Stack flex items verically*/
}
.flexbox-column .bottom-button {
margin-top: auto !important /*Send button to bottom*/;
margin-bottom: 10px;
}
div {
background-color: #fff;
}
.index-content a:hover {
color: black;
text-decoration: none;
}
.index-content .row {
margin-top: 20px;
}
.index-content a {
color: black;
}
.index-content .card {
background-color: #FFFFFF;
padding: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}
.index-content .card:hover {
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
color: black;
}
.index-content .card img {
width: 100%;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
height: 350px;
}
.index-content .card h4 {
margin: 20px;
}
.index-content .card p {
margin: 20px;
opacity: 0.65;
}
.index-content .blue-button {
width: 100px;
-webkit-transition: background-color 1s, color 1s;
/* For Safari 3.1 to 6.0 */
transition: background-color 0.5s, color 0.5s;
min-height: 20px;
background-color: #4CAF50;
color: #ffffff;
border-radius: 4px;
text-align: center;
font-weight: lighter;
margin: 0px 20px 15px 20px;
padding: 5px 0px;
display: inline-block;
}
.index-content .blue-button:hover {
background-color: #dadada;
color: #002E5B;
}
/* Set width between block elements */
.small-padding.top {
padding-top:10px;
}
.small-padding.bottom {
padding-bottom:10px;
}
.small-padding.left {
padding-left:5px;
}
.small-padding.right {
padding-right:5px;
}
.row [class*="col-"] {
padding-left: 5px;
padding-right: 5px;
}
.margin_bottom {
margin-bottom: 10px;
}
.row [class*="col-"] {
padding-right: 5px;
padding-left: 5px;
}
.row {
margin-left: -5px;
margin-right: -5px;
}
.card-img-bottom {
color: #fff;
height: 20rem;
background: url(images/img1.jpg) center no-repeat;
background-size: cover;
}
.img-responsive {
height: 100%;
}
/* Button Position */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.bottom-right {
position: absolute;
bottom: 8px;
right: 16px;
}
.bottom-left {
position: absolute;
bottom: 8px;
left: 16px;
}
.inner-wrapper {
text-align: center;
background: none;
}
/* Set full width on columns */
#media (max-width: 768px) {
.img-responsive {
width: 100%;
}
}
/* GRID ELEMENTS MEDIA QUERIES */
#media (min-width: 768px) {
.card {
position: relative;
}
.card-content {
position: absolute;
bottom: 0;
width: 100%;
background: rgba(0, 0, 0, 0.5);
}
.card-content h4,
.card-content p {
color: white;
width: 100%;
float: left;
margin: 0 0 5px;
}
.card-content a {
float: right;
}
.index-content .card h4,
.index-content .card p {
padding: 15px 20px;
margin: 0;
}
.index-content .card p {
padding: 0 20px 15px;
margin: 0;
}
.card-content-textbox {
position: absolute;
top: 0;
left: 0;
background: rgba(255, 255, 255, 0.7);
/*right: 0;*//* top position on right*/
margin: 15px;
max-width: 300px;
height: 91%
}
}
/* Grid with different placement of position buttons */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.bottom-right {
position: absolute;
bottom: 8px;
right: 16px;
}
.bottom-left {
position: absolute;
bottom: 8px;
left: 16px;
}
.inner-wrapper {
text-align: center;
background: none;
}
<div class="container">
<!-- Full width Banner -->
<div class="row">
<a href="#">
<div class="col-md-12 small-padding top bottom">
<div class="index-content">
<div class="card">
<img src="http://placehold.it/1200x500"></img>
<div class="card-content-textbox flexbox-column">
<h4>BMW & HEADLINE 2018</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
BUTTON 1
</div>
</div>
</div>
</div>
</a>
</div>
<!-- Col 4 - 8 -->
<div class="row">
<div class="col-sm-4 small-padding right bottom">
<div class="index-content">
<div class="card">
<img src="http://placehold.it/390x500"></img>
<div class="card-content">
<h4>BMW & HEADLINE 2018</h4>
BUTTON 2
</div>
</div>
</div>
</div>
<div class="col-sm-8 small-padding left bottom">
<div class="index-content">
<div class="card">
<img src="http://placehold.it/800x500"></img>
<div class="card-content">
<h4>BMW & HEADLINE 2018</h4>
<!-- <p>Brødtekst</p> -->
BUTTON 2
</div>
</div>
</div>
</div>
</div>
</div>
You can use the .flexbox-column and .bottom-button classes anywhere on the site and place as many buttons at the bottom as you need.
How about adding
.top .index-content .blue-button {
position: absolute;
bottom: 0;
}
for screen width > 768 ?
body {
background-color: #f5f5f5;
}
div {
background-color: #fff;
}
.index-content a:hover {
color: black;
text-decoration: none;
}
.index-content .row {
margin-top: 20px;
}
.index-content a {
color: black;
}
.index-content .card {
background-color: #FFFFFF;
padding: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}
.index-content .card:hover {
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.3);
color: black;
}
.index-content .card img {
width: 100%;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
height: 350px;
}
.index-content .card h4 {
margin: 20px;
}
.index-content .card p {
margin: 20px;
opacity: 0.65;
}
.index-content .blue-button {
width: 100px;
-webkit-transition: background-color 1s, color 1s;
/* For Safari 3.1 to 6.0 */
transition: background-color 0.5s, color 0.5s;
min-height: 20px;
background-color: #4CAF50;
color: #ffffff;
border-radius: 4px;
text-align: center;
font-weight: lighter;
margin: 0px 20px 15px 20px;
padding: 5px 0px;
display: inline-block;
}
.index-content .blue-button:hover {
background-color: #dadada;
color: #002E5B;
}
/* Set width between block elements */
.small-padding.top {
padding-top:10px;
}
.small-padding.bottom {
padding-bottom:10px;
}
.small-padding.left {
padding-left:5px;
}
.small-padding.right {
padding-right:5px;
}
.row [class*="col-"] {
padding-left: 5px;
padding-right: 5px;
}
.margin_bottom {
margin-bottom: 10px;
}
.row [class*="col-"] {
padding-right: 5px;
padding-left: 5px;
}
.row {
margin-left: -5px;
margin-right: -5px;
}
.card-img-bottom {
color: #fff;
height: 20rem;
background: url(images/img1.jpg) center no-repeat;
background-size: cover;
}
.img-responsive {
height: 100%;
}
/* Button Position */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.bottom-right {
position: absolute;
bottom: 8px;
right: 16px;
}
.bottom-left {
position: absolute;
bottom: 8px;
left: 16px;
}
.inner-wrapper {
text-align: center;
background: none;
}
/* Set full width on columns */
#media (max-width: 768px) {
.img-responsive {
width: 100%;
}
}
/* GRID ELEMENTS MEDIA QUERIES */
#media (min-width: 768px) {
.top .index-content .blue-button {
position: absolute;
bottom: 0;
}
.card {
position: relative;
}
.card-content {
position: absolute;
bottom: 0;
width: 100%;
background: rgba(0, 0, 0, 0.5);
}
.card-content h4,
.card-content p {
color: white;
width: 100%;
float: left;
margin: 0 0 5px;
}
.card-content a {
float: right;
}
.index-content .card h4,
.index-content .card p {
padding: 15px 20px;
margin: 0;
}
.index-content .card p {
padding: 0 20px 15px;
margin: 0;
}
.card-content-textbox {
position: absolute;
top: 0;
left: 0;
background: rgba(255, 255, 255, 0.7);
/*right: 0;*//* top position on right*/
margin: 15px;
max-width: 300px;
height: 91%
}
}
/* Grid with different placement of position buttons */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.bottom-right {
position: absolute;
bottom: 8px;
right: 16px;
}
.bottom-left {
position: absolute;
bottom: 8px;
left: 16px;
}
.inner-wrapper {
text-align: center;
background: none;
}
<div class="container">
<!-- Full width Banner -->
<div class="row">
<a href="#">
<div class="col-md-12 small-padding top bottom">
<div class="index-content">
<div class="card">
<img src="http://placehold.it/1200x500"></img>
<div class="card-content-textbox">
<h4>BMW & HEADLINE 2018</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
BUTTON 1
</div>
</div>
</div>
</div>
</a>
</div>
<!-- Col 4 - 8 -->
<div class="row">
<div class="col-sm-4 small-padding right bottom">
<div class="index-content">
<div class="card">
<img src="http://placehold.it/390x500"></img>
<div class="card-content">
<h4>BMW & HEADLINE 2018</h4>
BUTTON 2
</div>
</div>
</div>
</div>
<div class="col-sm-8 small-padding left bottom">
<div class="index-content">
<div class="card">
<img src="http://placehold.it/800x500"></img>
<div class="card-content">
<h4>BMW & HEADLINE 2018</h4>
<!-- <p>Brødtekst</p> -->
BUTTON 2
</div>
</div>
</div>
</div>
</div>
</div>