So i have one "flipping card" and another bootstrap 4 card side by side like this: (I have edited the image to hide text)
However when this is tested on target mobile screen using chrome's dev consolde, The 2nd Card overlaps the flipping card and completely covers it. like this:
I have put the code inside the container, row and col-md-* like this:
<div class="container">
<div class="row">
<div class="col-md-4">
</div>
....
<div class="col-md-8">
</div>
</div>
</div>
For full refrence, here is my full html and css code:
html:
<!-- start of third block -->
<div class="thirdblock">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card-container">
<div class="card">
<div class="front">
<div class="cover">
</div>
<div class="user">
<img class="img-circle" src="images/...jpg" />
</div>
<div class="content">
<div class="main">
<h3 class="name">.</h3>
<p class="profession">.</p>
<p class="">..
<div class="text-center">
<i class="fa fa-mail-forward"></i> Flip
</div>
</p>
</div>
</div>
</div> <!-- end front panel -->
<div class="back">
<div class="content">
<div class="main">
<p> </p>
<p class="lead">
.</p>
<p> </p>
<br>
<div class="stats-container">
<div class="stats">
<h4>100+</h4>
<p>
Followers
</p>
</div>
<div class="stats">
<h4>10+</h4>
<p>
Following
</p>
</div>
<div class="stats">
<h4>100+</h4>
<p>
Projects
</p>
</div>
</div>
</div>
</div>
</div> <!-- end back panel -->
</div> <!-- end card -->
</div> <!-- end card-container -->
</div> <!-- end col-md-4 -->
<div class="col-md-8">
<div class="card">
<div class="card-body">
<h4> </h4>
<p class="lead">
</p>
<img class="rounded mx-auto d-block" src="images/....png" />
<br>
</div>
</div>
</div>
</div><!-- end row -->
</div> <!-- end container -->
</div>
<!-- end third block -->
And the huge css code:
.thirdblock {
padding-top: 50px;
padding-bottom: 50px;
height: 100%;
font-family: 'Arima Madurai', cursive;
background-image: url("../images/image.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.card {
font-family: 'Arima Madurai', Verdana;
background: none repeat scroll 0 0 #FFFFFF;
border-radius: 4px;
color: #444444;
-webkit-box-shadow: 0px 0px 19px 0px rgba(0, 0, 0, 0.16);
-moz-box-shadow: 0px 0px 19px 0px rgba(0, 0, 0, 0.16);
box-shadow: 0px 0px 19px 0px rgba(0, 0, 0, 0.16);
}
/*Flipping Card Code*/
/*Flip Card Starts*/
.btn:hover,
.btn:focus,
.btn:active {
outline: 0 !important;
}
/* entire container, keeps perspective */
.card-container {
-webkit-perspective: 900px;
-moz-perspective: 900px;
-o-perspective: 900px;
perspective: 900px;
margin-bottom: 3px;
}
/* flip the pane when hovered */
.card-container:not(.manual-flip):hover .card,
.card-container.hover.manual-flip .card {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.card-container.static:hover .card,
.card-container.static.hover .card {
-webkit-transform: none;
-moz-transform: none;
-o-transform: none;
transform: none;
}
/* flip speed goes here */
.card {
-webkit-transition: -webkit-transform .5s;
-moz-transition: -moz-transform .5s;
-o-transition: -o-transform .5s;
transition: transform .5s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
position: relative;
}
/* hide back of pane during swap */
.front,
.back {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
background-color: #FFF;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.14);
}
/* front pane, placed above back */
.front {
z-index: 2;
}
/* back, initially hidden pane */
.back {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
z-index: 3;
}
.back .btn-simple {
position: absolute;
left: 0;
bottom: 4px;
}
/* Style */
.card-container,
.front,
.back {
width: 100%;
border-radius: 4px;
-webkit-box-shadow: 0px 0px 19px 0px rgba(0, 0, 0, 0.16);
-moz-box-shadow: 0px 0px 19px 0px rgba(0, 0, 0, 0.16);
box-shadow: 0px 0px 19px 0px rgba(0, 0, 0, 0.16);
margin-bottom: 50px;
}
.card .cover {
height: 105px;
overflow: hidden;
border-radius: 4px 4px 0 0;
}
.card .cover img {
width: 100%;
}
.card .user {
border-radius: 50%;
display: block;
height: 120px;
margin: -55px auto 0;
overflow: hidden;
width: 120px;
}
.card .user img {
width: 100%;
}
.card .content {
background-color: rgba(0, 0, 0, 0);
box-shadow: none;
padding: 10px 20px 20px;
}
.card .content .main {
min-height: 100%;
}
.card .back .content .main {
height: 100%;
}
.card .name {
font-family: 'Arima Madurai', cursive;
font-size: 22px;
line-height: 28px;
margin: 10px 0 0;
text-align: center;
text-transform: capitalize;
}
.card h5 {
margin: 5px 0;
font-weight: 400;
line-height: 20px;
}
.card .profession {
color: #999999;
text-align: center;
margin-bottom: 20px;
}
.card .fofooter-toter {
border-top: 1px solid #EEEEEE;
color: #999999;
margin: 30px 0 0;
padding: 10px 0 0;
text-align: center;
}
.card .footer-t .social-links {
font-size: 18px;
}
.card .footer-t .social-links a {
margin: 0 7px;
}
.card .footer-t .btn-simple {
margin-top: -6px;
}
.card .header {
padding: 15px 20px;
height: 90px;
}
.card .motto {
font-family: 'Arima Madurai', cursive;
border-bottom: 1px solid #EEEEEE;
color: #999999;
font-size: 14px;
font-weight: 400;
padding-bottom: 10px;
text-align: center;
}
.card .stats-container {
width: 100%;
margin-top: 50px;
}
.card .stats {
display: block;
float: left;
width: 33.333333%;
text-align: center;
}
.card .stats:first-child {
border-right: 1px solid #EEEEEE;
}
.card .stats:last-child {
border-left: 1px solid #EEEEEE;
}
.card .stats h4 {
font-family: 'Arima Madurai', cursive;
font-weight: 300;
margin-bottom: 5px;
}
.card .stats p {
color: #777777;
}
Can someone please help me as in what am i messing up?
just add fixed height for your .card class, because of position absolute on .front and .back classes, card class won't take any height.
.card{
height:362px;
}
Remove the CSS for class
.front,.back
/* position: absolute; */
/* top: 0; */
Related
i'm currently working on a webpage for my design class and i have a problem. This is the browser view:
I am kinda new with html and css but i have tried display in-line block, flex... Nothing worked, and i dont know what else i could do
So the problem is that the text "aaaaa" must be next to image. Here is my html code:
.caixa {
word-wrap: break-word;
width: 70%;
box-shadow: 2px 2px 30px rgba(0, 0, 0, 0.2);
margin: 25px;
margin-left: 0px;
border-radius: 10px;
}
.caixa-img {
display: inline-block;
margin: 15px;
width: 15%;
position: relative;
}
.caixa-img img {
margin-right: 120px;
border-radius: 10px;
width: 100%;
height: 100%;
}
.info {
width: 100%;
padding: 10px 20px;
}
.tipo {}
.descripcio {
display: block;
background-color: chartreuse;
}
.tipo a {
color: #222222;
margin: 5px 0px;
font-weight: 700;
letter-spacing: 0.5px;
padding-right: 8px;
}
.tipo span {
color: rgba(26, 26, 26, 0.5);
}
.preu {
color: #333333;
font-weight: 600;
font-size: 1.1rem;
font-family: poppins;
letter-spacing: 0.5px;
}
.overlay {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
background-color: rgba(226, 197, 88, 0.6);
display: flex;
justify-content: center;
align-items: center;
}
.comprar {
width: 160px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
background-color: #FFFFFF;
color: #252525;
font-weight: 700;
letter-spacing: 1px;
font-family: calibri;
border-radius: 20px;
box-shadow: 2px 2px 30px rgba(0, 0, 0, 0.2);
}
.comprar:hover {
color: #FFFFFF;
background-color: rgb(248, 171, 55);
transition: all ease 0.3s;
}
.overlay {
visibility: hidden;
}
.caixa-img:hover .overlay {
visibility: visible;
animation: fade 0.5s;
}
#keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div class="col-12 productes">
<div class="producte1">
<div class="caixa">
<div class="caixa-img">
<img alt="" src="imgExplora/imgCarrousel/herbicida.jpg">
<div class="overlay">
Comprar
</div>
<div class="tipo">
<a href="#">
<h3>HERBICIDA</h3>
</a>
<!--
<div class="rating">
<span>☆</span><span>☆</span><span>☆</span><span>☆</span><span>☆</span>
</div>-->
</div>
55€
</div>
<div class="info">
<span class="descripcio">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
</div>
</div>
</div>
</div>
Below an example using flexbox (see .caixa).
.caixa {
width: 70%;
box-shadow: 2px 2px 30px rgba(0, 0, 0, 0.2);
margin: 25px 25px 25px 0;
/* margin-left: 0px; */
border-radius: 10px;
display: flex; /* Added */
}
.caixa-img {
margin: 15px;
width: 30%;
}
.caixa-img img {
border-radius: 10px;
width: 125px; /* For demo */
height: 125px; /* For demo */
}
.info {
width: 100%;
padding: 10px 20px;
}
.tipo {}
.descripcio {
display: block;
background-color: chartreuse;
word-break: break-all; /* Essential to break large words */
}
.tipo a {
color: #222222;
margin: 5px 0px;
font-weight: 700;
letter-spacing: 0.5px;
padding-right: 8px;
}
.tipo span {
color: rgba(26, 26, 26, 0.5);
}
.preu {
color: #333333;
font-weight: 600;
font-size: 1.1rem;
font-family: poppins;
letter-spacing: 0.5px;
}
.overlay {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
background-color: rgba(226, 197, 88, 0.6);
display: flex;
justify-content: center;
align-items: center;
}
.comprar {
width: 160px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
background-color: #FFFFFF;
color: #252525;
font-weight: 700;
letter-spacing: 1px;
font-family: calibri;
border-radius: 20px;
box-shadow: 2px 2px 30px rgba(0, 0, 0, 0.2);
}
.comprar:hover {
color: #FFFFFF;
background-color: rgb(248, 171, 55);
transition: all ease 0.3s;
}
.overlay {
visibility: hidden;
}
.caixa-img:hover .overlay {
visibility: visible;
animation: fade 0.5s;
}
#keyframes fade {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div class="col-12 productes">
<div class="producte1">
<div class="caixa">
<div class="caixa-img">
<img alt="" src="imgExplora/imgCarrousel/herbicida.jpg">
<div class="overlay">
Comprar
</div>
<div class="tipo">
<a href="#">
<h3>HERBICIDA</h3>
</a>
</div>
55€
</div>
<div class="info">
<span class="descripcio">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
</div>
</div>
</div>
</div>
if you use boostrap framework
you can use the bootstrap column and row.
<!-- language: lang-html -->
<div class="row">
<div class="col-6 productes">
<div class="producte1">
<div class="caixa">
<div class="caixa-img">
<img alt="" src="imgExplora/imgCarrousel/herbicida.jpg">
<div class="overlay">
Comprar
</div>
</div>
<div class="col-6">
<div class="tipo">
<a href="#">
<h3>HERBICIDA</h3>
</a>
<!--
<div class="rating">
<span>☆</span><span>☆</span><span>☆</span><span>☆</span><span>☆</span>
</div>-->
</div>
55€
</div>
<div class="info">
<span class="descripcio">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
</div>
</div>
</div>
</div>
</div>
<!-- end snippet -->
You have too much nested divs that dont need to be there, just making it more complex.
Also, your text is going outside your div borders, this is not a good thing.
You can move your text next to the image by using flex.
You always apply flex on a parent of the element that you want to move around (in this case, div with a picture, and div with a text).
So you are going to apply flex to a div that holds both of those divs (div with image, and div with text).
Here is my solution to this problem on a simple example, it should help you :
https://codepen.io/Juka99/pen/YzGVQyv
html, body {
background-color: #E3E3E3;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
/* HOME */
.section1 {
background: url("../images/laptop-table1920-gray.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-size: cover;
background-attachment: scroll;
width: 100%;
height: 100%;
}
.section1 .container {
background-color: rgb(0, 0, 0, 0.65);
min-height: -webkit-fill-available;
min-width: -webkit-fill-available;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.home-btn {
background-color: transparent;
font-weight: 500;
border-color: #8e0000;
border-radius: 3px;
color: #8e0000;
margin-top: 35px;
font-size: 1.12em;
transform:translate(-50%, -50%);
position: absolute;
text-shadow: .1px .8px 1px black;
-webkit-filter: drop-shadow(0px 3px 10px rgba(0,0,0,.8));
filter: drop-shadow(0px 0px 2px rgba(0,0,0,.8));
}
/* hover styling required !important */
.home-btn:hover {
color: #8e0000 !important;
border-color: #8e0000;
font-size: 1.4em;
border-width: 3px;
font-weight: 600;
text-shadow: .1px 2px 1px black;
-webkit-filter: drop-shadow(0px 3px 10px rgba(0,0,0,.8));
filter: drop-shadow(0px 0px 2px rgba(0,0,0,.8));
}
.intro {
color: white;
font-size: 2.74em;
text-shadow: .1px .8px 1px black;
}
.highlight {
color: #8e0000;
text-shadow: .1px .8px 1px black;
}
/* NAVIGATION */
#navbar {
}
.logo{
display: inline-flex;
flex-direction: row;
-webkit-filter: drop-shadow(0px 3px 10px rgba(0,0,0,.8));
filter: drop-shadow(0px 0px 2px rgba(0,0,0,.8));
}
.navbar-brand {
margin: 0px;
padding: 0px 0px !important;
}
#navbar .nav-link:focus {
color: #8e0000;
text-size-adjust: 1.4em;
}
.logo-wrapper {
color: white;
font-size: 1.4em;
font-family: 'Raleway', sans-serif;
text-shadow: .1px 2px 1px black;
}
.logo-spin{
-webkit-animation: spin 1s ;
animation: spin 3s ;
animation-iteration-count: 1;
}
#-webkit-keyframes spin{
0% {
-webkit-transform: rotateY(360deg);
}
100% {
-webkit-transform: rotateY(-360deg);
}
}
#keyframes spin{
from {
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
}
to {
-moz-transform: rotateY(-360deg);
-ms-transform: rotateY(-360deg);
transform: rotateY(-360deg);
}
}
.navbar {
background-color: #333;
height: 65px;
border-bottom: 6px solid #212529;
border-top: 6px solid #212529;
}
#navbar {
z-index: 9999;
}
.navbar-text {
vertical-align: middle;
margin-left: 200px;
height: inherit;
}
#media only screen and (max-width: 860px) {
.navbar-text {
display: inline-block;
align-items: center;
margin-left: 30px;
}
}
#navbar a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 0px 20px;
text-decoration: none;
font-size: 1.2em;
font-family: 'Raleway', sans-serif;
text-shadow: .1px 1px 1px black;
/* margin-left: 40px; */
}
/* ABOUT */
#about {
overflow: hidden;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-size: cover;
width: 100%;
height: 100%;
text-shadow: .1px .8px 1px black;
position: relative;
height: -65px;
margin-top: 250px;
}
.section2 .row{
background: url("../images/improved-teamwork-and-collaboration_1887x741.jpg") center center no-repeat;
height: 100%;
width: 100%;
margin-left: 0px;
margin-right: 0px;
border-radius: 3px;
z-index: 1;
}
.section2 .card {
background-color: RGBA(33,37,41,.80);
color: white;
min-height: -webkit-fill-available;
height: 100%;
z-index: 2;
}
.section2 a {
color: #9b0000;
-webkit-filter: drop-shadow(.1px .8px 2px rgba(0,0,0, 0.8));
filter: drop-shadow(0px 0px 2px rgba(0,0,0, 0.8));
}
.section2 .card-block {
z-index: 3;
font-weight: 520;
width: 50%;
font-size: 25px;
line-height: 50px;
padding: 60px;
padding-right: 200px;
padding-left: 0px;
margin-left: 100px;
}
.section2 a:hover,
.section2 #skills:hover,
.section2 #projects:hover {
text-decoration: underline;
}
.section2 .btn {
border-color: #8e0000;
border-radius: 13px;
border-width: 3px;
font-weight: 500;
font-size: 0.8em;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.section2 .btn:hover {
background-color: #8e0000;
color: #212529;
text-decoration: none;
}
#about {
margin-bottom: 0px;
}
/* SKILLS */
#skills {
margin-bottom: 50px;
margin-top: 20px;
}
#skills .code-icon {
margin-top: 10px;
margin-bottom: 15px;
}
#skills .col {
letter-spacing: .6px;
}
#skills .container{
border-style: solid;
border-width: 3px;
z-index: 0;
color: #d4d4dc;
background-color: #1d1e22;
border-color: black;
border-radius: .5%;
line-height: 2.4em;
font-size: 1.4em;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-size: cover;
padding-top: 5%;
padding-bottom: 5%;
}
#skills ul {
list-style: none;
}
/* PROJECTS */
#projects {
font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
margin-top: 70px;
margin-bottom: 50px;
}
#projects .row h1,
#projects .row .works-description {
text-shadow: .08px .5px black;
}
#projects .text-center {
max-width: 500px;
margin-bottom: 30px;
border-radius: 3px;
min-width: 300px;
box-shadow: 0 2px 8px 2px rgb(0, 0, 0);
padding: 15px;
background: #81888373;
text-shadow: .08px .5px black;
}
.works-description a {
color: #8e0000;
line-height: 36px;
margin-bottom: 36px;
width: 90%;
max-width: 1000px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
.works-description {
line-height: 36px;
margin-bottom: 36px;
width: 90%;
max-width: 1000px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#projects .card-image-container {
width: 95%;
max-width: 420px;
max-height: 300px;
margin: 18px auto;
border-radius: 3px;
border: .5px solid #8e0000;
}
#projects .card-image-container
{
position:relative;
-webkit-box-shadow:0 1px 5px rgba(0,0,0,0.8), 0 0 5px rgba(0,0,0,0.8);
-moz-box-shadow:0 1px 5px rgba(0,0,0,0.8), 0 0 5px rgba(0,0,0,0.8);
box-shadow:0 1px 5px rgba(0,0,0,0.8), 0 0 8px rgba(0,0,0,0.8);
}
#projects .card-image-container:before, #projects .card-image-container:after
{
content:"";
position:absolute;
z-index:-1;
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
-moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
box-shadow:0 0 20px rgba(0,0,0,0.8);
top:10px;
bottom:10px;
left:0;
right:0;
-moz-border-radius:100px / 10px;
border-radius: 100px / 10px;
}
#projects .card-image-container:after
{
right:10px;
left:auto;
-webkit-transform:skew(8deg) rotate(3deg);
-moz-transform:skew(8deg) rotate(3deg);
-ms-transform:skew(8deg) rotate(3deg);
-o-transform:skew(8deg) rotate(3deg);
transform:skew(8deg) rotate(3deg);
}
#media only screen and (max-width: 767px) {
#projects .card-image-container {
border-style: none;
box-shadow: none;
}
}
#projects img {
align-items: center;
justify-content: center;
max-width: 100%;
max-height: 100%;
}
#media only screen and (max-width: 992px) {
#projects img{
width: 200px;
}
}
#media only screen and (max-width: 408px) {
#projects img {
width: 150px;
}
}
#projects .card-body {
padding: 0 1.25rem;
margin-bottom: 18px;
}
#projects .summary {
color: #8e0000;
}
#projects .card-summary {
font-size: 18px;
margin-bottom: 18px;
line-height: 36px;
}
#media only screen and (min-width: 992px) {
#projects .card-summary {
height: 180px;
}
}
#media only screen and (min-width: 768px) {
#projects .card-summary {
height: 150px;
}
}
/*FOR BUTTONS GO HERE: *https://bootsnipp.com/snippets/Gl29g*/
/* background: -webkit-linear-gradient(to right, #212529, #8e0000); /* Chrome 10-25, Safari 5.1-6 */
/*background: linear-gradient(to right,#212529, #8e0000); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
/*font-size: 1.1rem; */
#projects .btn-rounded {
border-radius: 2px;
}
.btn-dark-moon {
background: #212529; /* fallback for old browsers */
color: rgba(255, 255, 255, 0.747);
border: 2px solid #eee;
position: relative;
text-shadow: .1px .8px 1px black;
-webkit-filter: drop-shadow(0px 3px 10px #8e0000);
filter: drop-shadow(0px 0px 2px #8e0000);
margin-right: 5px;
}
.btn-dark-moon:hover {
color: white;
border-width: 2.2px;
text-shadow: .1px 2px 1px black;
-webkit-filter: drop-shadow(0px 3px 10px #8e0000);
filter: drop-shadow(0px 0px 2px #8e0000);
}
.btn-darker-moon {
background: #212529; /* fallback for old browsers */
color: rgba(255, 255, 255, 0.747);
border: 2px solid #eee;
position: relative;
text-shadow: .1px .8px 1px black;
-webkit-filter: drop-shadow(0px 3px 10px #8e0000);
filter: drop-shadow(0px 0px 2px #8e0000);
margin-right: 5px;
}
.btn-darker-moon:hover {
color: white;
border-width: 2.2px;
text-shadow: .1px 2px 1px black;
-webkit-filter: drop-shadow(0px 3px 10px #8e0000);
filter: drop-shadow(0px 0px 2px #8e0000);
}
/*TESTIMONIALS*/
.testimonials {
margin: 50px auto;
color: #777;
margin-top: 115px;
margin-bottom: 100px;
text-shadow: .08px .5px black;
}
.testimonials h1 {
text-align: center;
font-weight: bold;
color: #8e0000;
padding-bottom: 10px;
text-transform: uppercase;
}
.testimonials .sayings {
font-size: 1.2em;
}
.testimonials h1::after {
content: '';
background: #8e0000;
display: block;
height: 3px;
width: 170px;
margin: 20px auto 5px;
}
.testimonials .row {
margin-top: 30px;
}
.col-md-4 {
margin: 40px auto;
}
.profile {
padding: 70px 10px 10px;
background-color: #353535;
border-radius: 3px;
/* box-shadow:0 0 20px rgba(0,0,0,0.8); */
position: relative;
}
.profile:before, .profile:after
{
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
left: 10px;
width: 50%;
top: 80%;
max-width:300px;
background: #777;
-webkit-box-shadow: 0 15px 10px rgb(105, 105, 105);
-moz-box-shadow: 0 15px 10px #777;
box-shadow: 0 15px 10px #777;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.profile:after
{
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
right: 10px;
left: auto;
}
.profile img {
top: -60px;
position: absolute;
left: calc(50% - 60px);
border: 10px solid #e3e3e3;
}
.user {
width: 120px;
height: 120px;
border-radius: 50%;
}
.profile h3 {
font-size: 23px;
margin-top: 15px;
color: #790505;
}
.credentials {
font-weight: bolder;
}
.credentials span {
font-size: 12px;
color: #777;
}
.profile blockquote {
font-size: 16px;
line-height: 30px;
/* quotes: "\201C""\201D""\2018""\2019"; FOR USE WITH QUOTES TO SOLVE NESTED ISSUE WITH CODE BELOW */
}
.profile blockquote::before {
content: open-quote;
font-size: 50px;
position: relative;
color: #790505;
line-height: 20px;
bottom: -15px;
right: 5px;
}
.profile blockquote::after {
content: close-quote;
font-size: 50px;
position: relative;
color: #790505;
line-height: 10px;
bottom: -15px;
right: 5px;
}
.profile blockquote {
height: 161px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<body>
<!-- HOME -->
<section id="home" class="section1">
<div class='container'>
<div class="row justify-content-center">
<div class="col-md-12 col-sm-12">
<p class='intro'>
Hello, my name is <span class="highlight animated fadeIn" style="animation-delay: 1s; animation-duration: 1.8s">King.</span>
<br>
<div class="intro animated fadeInLeft" style="animation-delay: 3s; animation-duration: 2s">And I'm a full-stack web developer.</div>
<a href="#myanchor"><button type="button" class="home-btn btn btn-primary-outline btn-xs animated fadeIn"
style="animation-delay: 5s; animation-duration: 2s">VIEW MY WORK</button></a>
</p>
</div>
</div>
</div>
</section>
<!-- NAVIGATION -->
<div id="navbar">
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="container">
<div class="logo-wrapper nav-item">
<div class="logo" id="logo">
<a class="navbar-brand" href="#home"><img src="favicon.ico" alt="King's Brand Logo"></a>
</div>
<span class="brand" id="brand" style="animation-delay: 0s; animation-duration: 3s">KING MAJOR</span>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item focus">
<a class="nav-link" href="#myanchor">ABOUT
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#myanchor2">SKILLS
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#myanchor3">PROJECTS
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#myanchor4">TESTIMONIALS
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">CONTACT
<span class="sr-only">(current)</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<!-- ABOUT -->
<div class="blank" style="position: absolute">
<a id="myanchor"></a>
</div>
<section id="about" class="section2">
<div class="row-fluid">
<div class="row">
<div class="card ">
<div class="card-block">
<div class="card-title">
<h1>Welcome, let's talk!</h1>
</div>
<div id="container">
<p> I started independent web development two years ago, and haven't looked back. A couple of things I love about coding are those moments when tough projects are complete, or discovering a solution to a difficult problem. Take a look at my
skills, and some of my recent projects. THANKS!
</p>
Print My Resume
</div>
</div>
</div>
</div>
</div>
</section>
<!-- SKILLS -->
<div class="blank" style="margin: -65px 0px 250px 0px; position: absolute;">
<a id="myanchor2"></a>
</div>
<section id="skills" class="section3">
<div class="row justify-content-center">
<div class="col-md-7 col-sm-12">
<div class="card text-center">
<div class="container">
<div class="card-title">
<h2>Tech I've learned:</h2>
</div>
<div class="col"><img class="code-icon" src="assets/images/code-solid.png" style="height: 12%; width: 12%; ">
<p>JavaScript, HTML, CSS, MongoDB, Express, Node.js, Bootstrap, mySQL, AWS Cloud Storage, and more...</p>
<h2>Tools I use:</h2>
<ul>
<li>Visual Studio Code</li>
<li>Github</li>
<li>Express</li>
<li>Linux</li>
<li>Axios</li>
<li>npm</li>
<li>Bash</li>
<li>Chrome Developer Tools</li>
<li>And more...</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- PROJECTS -->
<div class="blank" style="margin: -65px 0px 250px 0px; position: absolute;">
<a id="myanchor3"></a>
</div>
<section id="projects" class="section4">
<div class="container">
<div class="row justify-content-center">
<h1>My Recent Projects</h1>
<p class="works-description">These are all self-directed projects. You can find more work on my
Github.<br> Below are just some of my most recent works. Let me know if you have any questions!
</p>
<div class="row justify-content-center">
<div class="col-md-5 col-sm-12">
<div class="text-center">
<div class="card-block">
<div class="card-image-container">
<a href="https://kingdomb.github.io/google-promo/">
<img src="assets/images/laptop-project-insertion-floating1SHADOW.png" alt="Google-Promo-Project">
</a>
</div>
<div class="card-body">
<div class="card-app-name card-title">
<h2>Google Home</h2>
</div>
<p class="card-tech card-text">JavaScript, HTML, CSS, Bootstrap</p>
<p class="summary">Summary</p>
<div class="card-summary card-text">
This project displays my use of javascript animations, and website design best practices. Firsts in this project included the added animations. </div>
<a href="https://kingdomb.github.io/google-promo/" class="btn btn-darker-moon btn-rounded">View
Demo</a>
View Code
</div>
</div>
</div>
</div>
<div class="col-md-5 col-sm-12">
<div class="text-center">
<div class="card-block">
<div class="card-image-container">
<a href="https://kingdomb.github.io/Food_Searcher/">
<img src="assets/images/laptop-project-insertion-floating2SHADOW.png" alt="Nutrition-Searcher-Project">
</a>
</div>
<div class="card-body">
<div class="card-app-name card-title">
<h2>Nutrition Searcher</h2>
</div>
<p class="card-tech card-text">jQuery, JS, HTML, REST APIs, Regex, Materialize</p>
<p class="summary">Summary</p>
<div class="card-summary card-text">
This app returns nutritional value of foods, and calculates the length of time it takes to burn those calories.</div>
<a href="https://kingdomb.github.io/Food_Searcher/" class="btn btn-darker-moon btn-rounded">View
Demo</a>
<a href="https://github.com/KingdomB/Food_Searcher" class="btn btn-dark-moon btn-rounded">View
Code</a>
</div>
</div>
</div>
</div>
<div class="col-md-5 col-sm-12">
<div class="card text-center">
<div class="card-block">
<div class="card-image-container">
<a href="https://raw.githubusercontent.com/KingdomB/Bamazon/master/bamazon.gif">
<img src="assets/images/laptop-project-insertion-floating3SHADOW.gif" alt="Bamazon-gif">
</a>
</div>
<div class="card-body">
<div class="card-app-name card-title">
<h2>Bamazon CLI Store</h2>
</div>
<p class="card-tech card-text">JavaScript, Node.js, MySQL</p>
<p class="summary">Summary</p>
<div class="card-summary card-text">
Created an small Amazon-like storefront. The store interface prompts the user to select an item for purchase. After a quantity selection the inventory adjusts accordingly.</div>
View Demo
View Code
</div>
</div>
</div>
</div>
<div class="col-md-5 col-sm-12">
<div class="card text-center">
<div class="card-block">
<div class="card-image-container">
<a href="https://raw.githubusercontent.com/KingdomB/liri-node-app/master/liri-node-app.gif">
<img src="assets/images/laptop-project-insertion-floating4SHADOW.gif" alt="LIRI-Node-Project">
</a>
</div>
<div class="card-body">
<div class="card-app-name card-title">
<h2>LIRI-Node-CLI</h2>
</div>
<p class="card-tech card-text"> JavaScript, Node.js, Axios, RESTful APIs, Inquirer</p>
<p class="summary">Summary</p>
<div class="card-summary card-text">
Command line user interface that receives search query inputs, and GET requests to return results from music, movie, and concert APIs</div>
View Demo
<a href="https://github.com/KingdomB/liri-node-app" class="btn btn-dark-moon btn-rounded">View
Code</a>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
So I have created a page and tried my best to use Bootstrap 4. But here is the thing, the page has all types of responsive errors, and one of the hallmarks of Bootstrap is that it is responsive. So, I would like some advice on the errors that I note below, please.
At 1199px X 836 both cards on the left in the "projects" section decrease vertically by maybe 20px.
-I would like all four cards to stay the same size and of course at some point the cards should display: block. But not at 1199px.
At 1124 the "about" section creates a top and bottom grey border, but what is more interesting is that 1027px X 836 the text wraps and things get ugly.
At 991px X 836px everything becomes messy. Navbar logo and logo-brand wrap and extend outside of the navbar container, about section text starts to push out of its container, and testimonials text starts overlapping.
I don't fully understand the css position methods and I believe this may be the issue, but if you can help me to get a better understanding of what I am doing wrong then I would greatly appreciate it.
Thanks
PS. I don't want to load down the post with my code so here is a link to the repo and the page:
repo
page
You must add bootstrap cdn link. Add this in head tag:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
and this in at the end of body:
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>
Or go to this page and download the bootstrap file if you want to use bootstrap also offline
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>
I have created a modal inside a button-container which utilizes some flex display elements.
The problem occurs when I want to size the .modal-mask to a 100% of width/height to the whole page (body) size which is my goal here, I can't seem to get it to adjust properly without disturbing my button-container elements.
In short, I want the inner div .modal-mask to be sized 100% to the body
Project Fiddle: https://jsfiddle.net/est857q0/
HTML:
<ul id="button-container">
<li>
<a id="html-modal-button" #click="showModal = 'html-modal'">
<img class="htmllogo" src="http://sweettutos.com/wp-content/uploads/2015/12/placeholder.png">
</a>
<htmlmodal v-if="showModal === 'html-modal'" #close="showModal = false"></htmlmodal>
</li>
<li>
<a id="cs-modal-button" #click="showModal = 'cs-modal'">
<img class="csharplogo" src="http://sweettutos.com/wp-content/uploads/2015/12/placeholder.png">
</a>
<csmodal v-if="showModal === 'cs-modal'" #close="showModal = false"></csmodal>
</li>
</ul>
<!-- MODAL SECTION -->
<script type="text/x-template" id="html-modal-template">
<transition name="html-modal">
<div class="modal-mask">
<div class="modal-wrapper">
<div class="modal-container">
<div class="modal-content">
<slot name="body">
<button class="modal-default-button" #click="$emit('close')">HTML CLOSE</button>
</slot>
</div>
</div>
</div>
</div>
</transition>
</script>
<script type="text/x-template" id="cs-modal-template">
<transition name="cs-modal">
<div class="modal-mask">
<div class="modal-wrapper">
<div class="modal-container">
<div class="modal-content">
<slot name="body">
<button class="modal-default-button" #click="$emit('close')">CS CLOSE</button>
</slot>
</div>
</div>
</div>
</div>
</transition>
</script>
CSS:
/*Global*/
html {
margin-right: calc(100% - 100vw);
/*overflow: hidden;*/
}
body {
margin: 0 auto;
background-image: url('../images/wallpaper.jpg');
font-family: 'Josefin Sans', sans-serif;
}
*::selection {
background-color: red;
}
/*Header*/
h1 {
text-transform: uppercase;
width: 100%;
font-size: 9vw;
text-align: center;
margin-top: 4vh;
}
/*Containers*/
#button-container {
padding: 0;
margin: 0;
list-style: none;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
margin-top: 40vh;
margin-left: 50vw;
transform: translate(-50%, -70%);
width: 90vw;
height: 45vh;
align-items: baseline;
background: linear-gradient(to right, transparent 0%, #fff 33%, #fff 66%, transparent 100%);
}
#button-container li {
position: relative;
display: inline-block;
cursor: pointer;
}
#button-container .html-text-block,
.cs-text-block {
position: absolute;
bottom: 4px;
width: 100%;
height: 30%;
box-sizing: border-box;
background-color: #fff;
padding-left: 5px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
transition: box-shadow 0.5s cubic-bezier(.25, .8, .25, 1), transform 0.5s cubic-bezier(.25, .8, .25, 1);
}
#button-container .htmllogo,
#button-container .csharplogo {
width: 150px;
}
#button-container {
border: 1px solid #000;
}
img:hover {
transform: scale(1.1);
}
/* THE MODAL CSS SECTION */
/*Main Modal container*/
.modal-mask {
position: fixed;
z-index: 9998;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .5);
display: table;
transition: opacity .3s ease;
}
.modal-wrapper {
display: table-cell;
vertical-align: middle;
}
.modal-container {
width: 300px;
margin: 0px auto;
padding: 20px 30px;
background-color: #fff;
border-radius: 2px;
box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
transition: all .3s ease;
font-family: Helvetica, Arial, sans-serif;
}
.modal-content {
margin: 20px 0;
}
I attempted to set the button-container too 100% : https://jsfiddle.net/est857q0/ yet this messes up the flow
I'm trying to align all of the text in a span (vertically and horizontally) so that it's uniform. However for some reason the third (green) team column has a different placement inside the col div than the rest of the team divs as you can see using Firebug or the like.
How can i fix this issue and is it related to the fact the divs have been rotated or is it something else?
JSFiddle: http://jsfiddle.net/n0L7768c/
.counter {
background-color: #653d24;
bottom: 0;
font-family: "Patrick Hand", arial, sans-serif;
padding: 60px 15px 0 15px;
position: fixed;
right: 100px;
z-index: 99999999;
bottom: -0;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
}
.counter h3 {
background-image: url("/wp-content/themes/springfield/images/title-bg.png");
background-size: 100% auto;
font-size: 15px;
height: 88px;
left: 0;
line-height: 88px;
margin: 0 auto;
position: absolute;
right: 0;
text-align: center;
top: -41px;
width: 305px;
z-index: 10;
}
.counter .col {
width: 75px;
height: 172px;
text-align: center;
color: #fff;
margin: 0 15px;
position: relative;
float: left;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.counter .team {
font-size: 20px;
left: -22px;
position: absolute;
top: 28px;
margin-top: 5px;
transform: rotate(-270deg);
-moz-transform: rotate(-270deg);
-webkit-transform: rotate(-270deg);
-ms-transform: rotate(-270deg);
-o-transform: rotate(-270deg);
transform-origin: 49% 52%;
-moz-transform-origin: 49% 52%;
-webkit-transform-origin: 49% 52%;
-ms-transform-origin: 49% 52%;
-o-transform-origin: 49% 52%;
width: 119px;
}
.counter .score {
bottom: 0;
font-size: 40px;
position: absolute;
width: 100%;
}
span.blue {
color: #3597d0;
}
span.orange {
color: #ff9900;
}
span.green {
color: #99cc00;
}
span.red {
color: #ff0000;
}
.counter .col.blue {
background-color: #3597d0;
}
.counter .col.orange {
background-color: #ff9900;
}
.counter .col.green {
background-color: #99cc00;
}
.counter .col.red {
background-color: #ff0000;
}
.team > span {
display: inline-block;
vertical-align: middle;
}
.show {
bottom: 0;
transition: bottom 2s;
-moz-transition: bottom 2s;
-webkit-transition: bottom 2s;
-ms-transition: bottom 2s;
-o-transition: bottom 2s;
}
<div class="counter hidden-mobile">
<div class="scores">
<div class="col blue">
<div class="team">
<span>Miners (2nd)</span>
</div>
<!-- .team -->
<div class="score">341</div>
<!-- .score -->
</div>
<!-- .col -->
<div class="col orange">
<div class="team">
<span>Brewers (1st)</span>
</div>
<!-- .team -->
<div class="score">
456
</div>
<!-- .score -->
</div>
<!-- .col -->
<div class="col green">
<div class="team">
<span>Foresters (3rd)</span>
</div>
<!-- .team -->
<div class="score">
259
</div>
<!-- .score -->
</div>
<!-- .col -->
<div class="col red">
<div class="team">
<span>Potters (4th)</span>
</div>
<!-- .team -->
<div class="score">
69
</div>
<!-- .score -->
</div>
<!-- .col -->
</div>
<!-- .scores -->
</div>
<!-- .counter -->
Just add white-space: nowrap; to .team > span like this:
.team > span {
display: inline-block;
vertical-align: middle;
white-space: nowrap;
}
.counter {
background-color: #653d24;
bottom: 0;
font-family: "Patrick Hand", arial, sans-serif;
padding: 60px 15px 0 15px;
position: fixed;
right: 100px;
z-index: 99999999;
bottom: -0;
-webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
}
.counter h3 {
background-image: url("/wp-content/themes/springfield/images/title-bg.png");
background-size: 100% auto;
font-size: 15px;
height: 88px;
left: 0;
right: 0;
top: -41px;
width: 305px;
line-height: 88px;
margin: 0 auto;
position: absolute;
text-align: center;
z-index: 10;
}
.counter .col {
width: 75px;
height: 172px;
text-align: center;
color: #fff;
margin: 0 15px;
position: relative;
float: left;
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.counter .team {
font-size: 20px;
left: -22px;
position: absolute;
top: 28px;
margin-top: 5px;
width: 119px;
-webkit-transform: rotate(-270deg);
-moz-transform: rotate(-270deg);
-ms-transform: rotate(-270deg);
-o-transform: rotate(-270deg);
transform: rotate(-270deg);
-webkit-transform-origin: 49% 52%;
-moz-transform-origin: 49% 52%;
-ms-transform-origin: 49% 52%;
-o-transform-origin: 49% 52%;
transform-origin: 49% 52%;
}
.counter .score {
bottom: 0;
font-size: 40px;
position: absolute;
width: 100%;
}
span.blue { color: #3597d0; }
span.orange { color: #ff9900; }
span.green { color: #99cc00; }
span.red { color: #ff0000; }
.counter .col.blue { background-color: #3597d0; }
.counter .col.orange { background-color: #ff9900; }
.counter .col.green { background-color: #99cc00; }
.counter .col.red { background-color: #ff0000; }
.team > span {
display: inline-block;
vertical-align: middle;
white-space: nowrap;
}
.show {
bottom: 0;
-webkit-transition: bottom 2s;
-moz-transition: bottom 2s;
-ms-transition: bottom 2s;
-o-transition: bottom 2s;
transition: bottom 2s;
}
<div class="counter hidden-mobile">
<div class="scores">
<div class="col blue">
<div class="team">
<span>Miners (2nd)</span>
</div>
<!-- .team -->
<div class="score">341</div>
<!-- .score -->
</div>
<!-- .col -->
<div class="col orange">
<div class="team">
<span>Brewers (1st)</span>
</div>
<!-- .team -->
<div class="score">
456
</div>
<!-- .score -->
</div>
<!-- .col -->
<div class="col green">
<div class="team">
<span>Foresters (3rd)</span>
</div>
<!-- .team -->
<div class="score">
259
</div>
<!-- .score -->
</div>
<!-- .col -->
<div class="col red">
<div class="team">
<span>Potters (4th)</span>
</div>
<!-- .team -->
<div class="score">
69
</div>
<!-- .score -->
</div>
<!-- .col -->
</div>
<!-- .scores -->
</div>
<!-- .counter -->