I am working on a website (html), and am having some trouble making elements line up properly. Right now, my page looks like HERE, but I want it to look like HERE.
Essentially, I want to create a 2 by 2 grid.
I don't know which part of the code is not permitting me from having 2 elements on one line.
Thanks in advance for your help!
<title></title>
<style type="text/css">body {
color: #404040;
font-size: 14px;
line-height: 22px;
padding-top: 20px;
}
.card {
display: inline-block;
box-shadow: 0 1px 2px 0 rgba(0,0,0,.15);
margin: 5px;
position: relative;
margin-bottom: 50px;
transition: all .2s ease-in-out;
}
.card:hover {
/*box-shadow: 0 5px 22px 0 rgba(0,0,0,.25);*/
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
margin-bottom: 54px;
}
.image {
height: 200px;
opacity: .7;
overflow: hidden;
transition: all .2s ease-in-out;
}
.image:hover,
.card:hover .image {
height: 200px;
opacity: 1;
}
.text {
background: #FFF;
padding: 20px;
min-height: 200px;
}
.text p {
margin-bottom: 0px;
}
.fab {
width: 60px;
height: 60px;
border-radius: 50%;
position: absolute;
margin-top: -50px;
right: 20px;
box-shadow: 0px 2px 6px rgba(0, 0, 0, .3);
color: #fff;
font-size: 48px;
line-height: 48px;
text-align: center;
background: #0066A2;
-webkit-transition: -webkit-transform .2s ease-in-out;
transition: transform .2s ease-in-out;
}
.fab:hover {
background: #910500;
cursor: pointer;
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
</style>
<div class="container">
<div class="row">
<div class="col-md-3 col-lg-3 col-xs-3 col-sm-3">
<div class="card">
<div class="image"><img src="/sites/default/files/BannerTest.jpg" width="100%" /></div>
<div class="text">
<div class="fab">+</div>
<h3>Our Community</h3>
<p>Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample</p>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-3 col-lg-3 col-xs-3 col-sm-3">
<div class="card">
<div class="image"><img src="/sites/default/files/BannerTest.jpg" width="100%" /></div>
<div class="text">
<div class="fab">+</div>
<h3>Our Community</h3>
<p>Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample</p>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-3 col-lg-3 col-xs-3 col-sm-3">
<div class="card">
<div class="image"><img src="/sites/default/files/BannerTest.jpg" width="100%" /></div>
<div class="text">
<div class="fab">+</div>
<h3>Our Community</h3>
<p>Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample</p>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-3 col-lg-3 col-xs-3 col-sm-3">
<div class="card">
<div class="image"><img src="/sites/default/files/BannerTest.jpg" width="100%" /></div>
<div class="text">
<div class="fab">+</div>
<h3>Our Community</h3>
<p>Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample</p>
</div>
</div>
</div>
</div>
</div>
Here is the correct code:
<title></title>
<style type="text/css">
body {
color: #404040;
font-size: 14px;
line-height: 22px;
padding-top: 20px;
}
.card {
display: inline-block;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .15);
margin: 5px;
position: relative;
margin-bottom: 50px;
transition: all .2s ease-in-out;
}
.card:hover {
/*box-shadow: 0 5px 22px 0 rgba(0,0,0,.25);*/
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
margin-bottom: 54px;
}
.image {
height: 200px;
opacity: .7;
overflow: hidden;
transition: all .2s ease-in-out;
}
.image:hover,
.card:hover .image {
height: 200px;
opacity: 1;
}
.text {
background: #FFF;
padding: 20px;
min-height: 200px;
}
.text p {
margin-bottom: 0px;
}
.fab {
width: 60px;
height: 60px;
border-radius: 50%;
position: absolute;
margin-top: -50px;
right: 20px;
box-shadow: 0px 2px 6px rgba(0, 0, 0, .3);
color: #fff;
font-size: 48px;
line-height: 48px;
text-align: center;
background: #0066A2;
-webkit-transition: -webkit-transform .2s ease-in-out;
transition: transform .2s ease-in-out;
}
.fab:hover {
background: #910500;
cursor: pointer;
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
.row {
display: flex;
}
</style>
<div class="container">
<div class="row">
<div class="col-md-3 col-lg-3 col-xs-3 col-sm-3">
<div class="card">
<div class="image"><img src="/sites/default/files/BannerTest.jpg" width="100%" /></div>
<div class="text">
<div class="fab">+</div>
<h3>Our Community</h3>
<p>Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample</p>
</div>
</div>
</div>
<div class="col-md-3 col-lg-3 col-xs-3 col-sm-3">
<div class="card">
<div class="image"><img src="/sites/default/files/BannerTest.jpg" width="100%" /></div>
<div class="text">
<div class="fab">+</div>
<h3>Our Community</h3>
<p>Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample</p>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-3 col-lg-3 col-xs-3 col-sm-3">
<div class="card">
<div class="image"><img src="/sites/default/files/BannerTest.jpg" width="100%" /></div>
<div class="text">
<div class="fab">+</div>
<h3>Our Community</h3>
<p>Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample</p>
</div>
</div>
</div>
<div class="col-md-3 col-lg-3 col-xs-3 col-sm-3">
<div class="card">
<div class="image"><img src="/sites/default/files/BannerTest.jpg" width="100%" /></div>
<div class="text">
<div class="fab">+</div>
<h3>Our Community</h3>
<p>Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample</p>
</div>
</div>
</div>
</div>
check this
wrap the elements in div then use display:flex
https://jsfiddle.net/rkv88/ug3qk1m5
To keep 2 or more divs inline we can use different css properties like:
display: inlie-block, float: left, useing table, display: table and display:table-cell, flex box and so on. Here is a simple example below
body * {
box-sizing: border-box; /* very usefull for responsive design */
}
.container {
width: 100%;
float: left; /* not necessary all the times, depends*/
}
.card {
width: 50%;
float: left;
padding: 10px;
}
.card:nth-child(:nth-child(2n+1) {
clear: left
}
As you can see in the example below, you can achieve your goal:
.wrapper {
display: flex;
flex-wrap: wrap;
}
.item {
height: 100px;
flex-basis: 50%;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}
.cyan {
background-color: cyan;
}
<div class="wrapper">
<div class="item red">item 1</div>
<div class="item blue">item 2</div>
<div class="item green">item 3</div>
<div class="item cyan">item 4</div>
</div>
Hope this help you.
body {
color: #404040;
font-size: 14px;
line-height: 22px;
padding-top: 20px;
}
.card {
display: inline-block;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .15);
margin: 5px;
position: relative;
margin-bottom: 50px;
transition: all .2s ease-in-out;
}
.card:hover {
/*box-shadow: 0 5px 22px 0 rgba(0,0,0,.25);*/
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
margin-bottom: 54px;
}
.image {
height: 200px;
opacity: .7;
overflow: hidden;
transition: all .2s ease-in-out;
}
.image:hover,
.card:hover .image {
height: 200px;
opacity: 1;
}
.text {
background: #FFF;
padding: 20px;
min-height: 200px;
}
.text p {
margin-bottom: 0px;
}
.fab {
width: 60px;
height: 60px;
border-radius: 50%;
position: absolute;
margin-top: -50px;
right: 20px;
box-shadow: 0px 2px 6px rgba(0, 0, 0, .3);
color: #fff;
font-size: 48px;
line-height: 48px;
text-align: center;
background: #0066A2;
-webkit-transition: -webkit-transform .2s ease-in-out;
transition: transform .2s ease-in-out;
}
.fab:hover {
background: #910500;
cursor: pointer;
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.1.3/darkly/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-md- col-lg-6 col-xs-6 col-sm-6">
<div class="card">
<div class="image"><img src="/sites/default/files/BannerTest.jpg" width="100%" /></div>
<div class="text">
<div class="fab">+</div>
<h3>Our Community</h3>
<p>Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-6 col-xs-6 col-sm-6">
<div class="card">
<div class="image"><img src="/sites/default/files/BannerTest.jpg" width="100%" /></div>
<div class="text">
<div class="fab">+</div>
<h3>Our Community</h3>
<p>Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample</p>
</div>
</div>
</div>
</div>
</div>
Related
I am trying to create 3 cards that stand at the bottom of the webpage but the 3 cards are overlapping. Can you help me find my mistake please? :)
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.144);
transition: 0.3s;
border-radius: 13px;
width: 320px;
height: 455px;
cursor: pointer;
position: absolute;
margin-left: 4%;
bottom: 10px;
margin-right: 4%;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.397);
}
.container {
padding: 2px 16px;
font-family: 'Rubik', sans-serif;
cursor: pointer;
}
.row {
display: flex;
}
.row::after {
content: "";
clear: both;
display: table;
}
<div class="row">
<div class="card">
<img src="resources/images/Front1.png" style="width: 100%;" height="320px">
<div class="container">
<h3><b>Create checklists</b></h3>
<p>Make your own customizable checklist to remain happy and healthy</p>
</div>
</div>
<div class="card">
<img src="resources/images/Front2.jpeg" style="width: 100%;">
<div class="container">
<h3><b>Take notes</b></h3>
<p>Write your own notes with fun, colourful tools</p>
</div>
</div>
<div class="card">
<img src="resources/images/Front3.jpeg" style="width: 100%;" height="320px">
<div class="container">
<h3><b>Create calendars</b></h3>
<p>Add pictures to your calendars and customize according to your preferences</p>
</div>
</div>
</div>
The problem was caused by the position: absolute; style in your CSS. Basically, you set all 3 cards to the same position which is why they overlapped.
I also changed your card's height to min-height. This is because the text was flowing out of the card and min-height would prevent this.
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.144);
transition: 0.3s;
border-radius: 13px;
width: 320px;
min-height: 455px;
cursor: pointer;
margin-left: 4%;
margin-right: 4%;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.397);
}
.container {
padding: 2px 16px;
font-family: 'Rubik', sans-serif;
cursor: pointer;
}
.row {
display: flex;
}
.row::after {
content: "";
clear: both;
display: table;
}
<div class="row">
<div class="card">
<img src="resources/images/Front1.png" style="width: 100%;" height="320px">
<div class="container">
<h3><b>Create checklists</b></h3>
<p>Make your own customizable checklist to remain happy and healthy</p>
</div>
</div>
<div class="card">
<img src="resources/images/Front2.jpeg" style="width: 100%;">
<div class="container">
<h3><b>Take notes</b></h3>
<p>Write your own notes with fun, colourful tools</p>
</div>
</div>
<div class="card">
<img src="resources/images/Front3.jpeg" style="width: 100%;" height="320px">
<div class="container">
<h3><b>Create calendars</b></h3>
<p>Add pictures to your calendars and customize according to your preferences</p>
</div>
</div>
</div>
remove "position: absolute" and things would work fine. Or if you're trying to display somethign else?
I am having some big problems with padding. Before the description of my problem make sense, there is 2 pages to see in the inspector window - and look in the mobile view device section:
1: This demopage is working as it should.
2: This demopage is not working.
The difference between the 2 pages is that I added one more row with three pictures in it. The row with 3 pictures is basic builded up like this:
<div class="row wrapping">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-8 margin_bottom">
<!-- Picture 1 -->
</div>
<div class="col-sm-4">
<div class="row">
<div class="col-sm-12 margin_bottom">
<!-- Picture 2 -->
</div>
</div>
<div class="row">
<div class="col-sm-12 margin_bottom">
<!-- Picture 3 -->
</div>
</div>
</div>
</div>
</div>
</div>
As I see it there is set a padding on the inner columns col > row > col? How can I remove that padding? I removed the padding on the rows with the below code, and thought that would also count for all columns.
.row.wrapping {
margin-right: 0;
margin-left: 0;
}
.wrapping > [class^="col-"], .wrapping > [class^=" col-"] {
padding-right: 0;
padding-left: 0;
}
The most important thing is that I cannot start overwriting Bootstrap classes since the whole site is building up with bootstrap. So every change I am overwriting in the bootstrap framework has to be named unique.
#front .row {
padding-bottom: 0px!important;
}
body {
background-color: #f5f5f5;
}
/* Removes default right padding */
.row.wrapping {
margin-right: 0;
margin-left: 0;
}
.wrapping>[class^="col-"],
.wrapping>[class^=" col-"] {
padding-right: 0;
padding-left: 0;
}
/* Set width between grid 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;
}
.margin_bottom {
margin-bottom: 10px;
}
.img-responsive {
height: 100%;
}
/* Position of buttons/text in a single grid element */
.inner-wrapper {
background: none;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.bottom-right {
position: absolute;
bottom: 8px;
right: 16px;
}
.bottom-left {
position: absolute;
bottom: 2%;
left: 6%;
}
/* Position text on full width banner */
.header-container {
color: white;
margin: 0 5%;
}
.banner-text {
position: absolute;
bottom: 3%;
left: 1%;
width: 80%;
}
/* Color on text */
.dark-font {
color: #333;
}
.light-font {
color: #fff;
text-transform: uppercase;
}
.blue-font {
color: #00a9ff;
text-transform: uppercase;
margin-top: -10px;
}
/* Set full width on columns */
#media (max-width: 768px) {
.img-responsive {
width: 100%;
height: auto;
}
/* btn-success: */
.btn-success {
width: fit-content;
}
}
#media (max-width: 991px) {
h3 {
font-size: 1.2em;
}
}
/* Hover for grid elements that contains text */
.hovereffect {
display: inline-block;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
}
.hovereffect .overlay {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
transition: all 0.4s ease-in-out;
}
.hovereffect:hover .overlay {
background-color: rgba(170, 170, 170, 0.4);
}
.hovereffect h2,
.hovereffect img {
transition: all 0.4s ease-in-out;
}
.hovereffect img {
display: block;
position: relative;
transform: scale(1.1);
}
.hovereffect:hover img {
transform: scale(1);
}
.hovereffect h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.6);
}
.hovereffect p.info {
text-decoration: none;
color: #fff;
border: 1px solid #fff;
background-color: transparent;
opacity: 0;
transform: scale(1.5);
transition: all 0.4s ease-in-out;
font-weight: normal;
height: 90%;
width: 90%;
top: 5%;
/* (100% - 85%)/2 */
left: 5%;
position: absolute;
text-align: left;
padding: 20px 20px 20px 20px;
}
.hovereffect:hover p.info {
opacity: 1;
transform: scale(1);
background-color: rgba(0, 0, 0, 0.4);
}
/* Hover fadeout head and subline */
.hovereffect:hover .inner-wrapper.bottom-left h3,
.hovereffect:hover .inner-wrapper.bottom-left span {
transition: all 0.4s ease-in-out;
}
.hovereffect:hover .inner-wrapper.bottom-left h3,
.hovereffect:hover .inner-wrapper.bottom-left span {
opacity: 0;
}
/* Hover opacity for grid elements without text*/
.column {
padding: 0;
}
.column:last-child {
padding-bottom: 60px;
}
.column::after {
content: '';
clear: both;
display: block;
}
.column div {
position: relative;
float: left;
width: 300px;
height: 200px;
margin: 0 0 0 25px;
padding: 0;
}
.column div:first-child {
margin-left: 0;
}
figure {
margin: 0;
padding: 0;
background: #fff;
}
figure:hover+span {
bottom: -36px;
opacity: 1;
}
/* Opacity #1 */
.hover11 figure img {
opacity: 1;
-webkit-transition: .3s ease-in-out;
transition: 0.8s ease-in-out;
}
.hover11 figure:hover img {
opacity: .5;
}
<div class="wrapper">
<div class="row wrapping">
<div class="col-xs-12 col-sm-12 margin_bottom">
<!--<div class="hover11 column">-->
<a href="#">
<picture>
<source media="(min-width: 650px)" srcset="https://mimsi.dk/Static/Cms/d211428c-7ea9-4805-8b66-ee73d7f1df2d.jpg"></source>
<source media="(min-width: 320px)" srcset="https://mimsi.dk/Static/Cms/b1cbb0f1-9e91-4d55-8a8e-65631432c38b.jpg"></source>
<img src="http://mimsi.dk/Static/Cms/d211428c-7ea9-4805-8b66-ee73d7f1df2d.jpg" alt="mimsi Partnerværksteder" style="width:100%;"></img>
</picture>
<div class="inner-wrapper banner-text">
<div class="header-container">
<h2 class="blue-font" style="text-shadow: 2px 2px #000000;">Find nærmeste mimsi </h2>
<p class="light-font" style="text-shadow: 2px 2px #000000;">#</p>
<!--<span class="btn btn-primary" role="button">Lorem Ipsum</span>-->
</div>
</div>
</a>
<!--</div>-->
</div>
</div>
<!-- DELETE THIS ROW IN THE INSPECT WINDOW -->
<div class="row wrapping">
<div class="col-sm-12">
<div class="row">
<a href="/da-dk/page/bmw-packages/">
<div class="col-sm-8 margin_bottom">
<div class="hover11 column">
<figure>
<picture>
<source media="(min-width: 650px)" srcset="https://mimsi.dk/Static/Cms/f30dfbf6-047a-4aa4-829f-48d4223d05be.jpg"></source>
<source media="(min-width: 320px)" srcset="https://mimsi.dk/Static/Cms/ce50c03a-0e95-4760-95a4-e2ad2a1b6e43.jpg"></source>
<img src="https://mimsi.dk/Static/Cms/f30dfbf6-047a-4aa4-829f-48d4223d05be.jpg" alt="Lorem Ipsum" style="width:100%;"></img>
</picture>
</figure>
</div>
<div class="inner-wrapper bottom-left">
<h3 class="light-font" style="color:#333">Lorem Ipsum</h3>
<span class="light-font" style="color:#00a9ff">Lorem Ipsum</span>
<!--<button class="btn btn-success btn-lg">Læs mere</button>-->
</div>
</div>
</a>
<div class="col-sm-4">
<div class="row">
<a href="#">
<div class="col-sm-12 margin_bottom">
<div class="hover11 column">
<figure>
<img src="https://mimsi.dk/Static/Cms/7da4b142-e174-4dd4-aa44-cb175c1f92f0.jpg" alt="mimsi Lorem Ipsum" class="img-responsive"></img>
</figure>
</div>
<div class="inner-wrapper bottom-left">
<h4 class="light-font" style="color:#00a9ff">Vi er eneforhandler I Danmark</h4>
<span class="light-font">Lorem Ipsum</span>
<!--<button class="btn btn-success btn-lg">Læs mere</button>-->
</div>
</div>
</a>
</div>
<div class="row">
<a href="#">
<div class="col-sm-12 margin_bottom">
<div class="hover11 column">
<figure>
<a href="#" data-toggle="modal" data-target="#nyhedsbrev-tilmelding">
<img src="https://mimsi.dk/Static/Cms/d065fdf8-a5b1-4137-ba54-74c351185d36.jpg" alt="Signup newsletter" class="img-responsive"></img>
</a>
</figure>
</div>
<div class="modal fade" id="nyhedsbrev-tilmelding" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div id="mc_embed_signup">
</div>
</div>
</div>
</div>
</div>
<div class="inner-wrapper bottom-left"></div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
I'm not sure what you want to achieve, but for me, if you make a very little change at page https://koed.dk/da-dk/page/stack like below, then effect is great:
.row.wrapping,
.row.wrapping .row {
margin-left: -5px;
margin-right: -5px;
}
.wrapping [class^=col-] {
padding-left: 5px;
padding-right: 5px;
}
Brother in your styles you have this code .
.margin_bottom {
margin-bottom: 10px;
}
Remove it. That'll solve your problem.
One solution to your problem is that make a new css class no-padding like this
.no-padding{
padding-right: 0!important;
padding-left: 0!important;
}
And then add the no-padding class to your html row or col for which you want to remove padding like this.
<div class="row wrapping">
<div class="col-sm-12 no-padding"> <!-- notice here -->
<div class="row">
<div class="col-sm-8 margin_bottom no-padding"><!-- notice here -->
<!-- Picture 1 -->
</div>
<div class="col-sm-4 no-padding"><!-- notice here -->
<div class="row">
<div class="col-sm-12 margin_bottom no-padding"><!-- notice here -->
<!-- Picture 2 -->
</div>
</div>
<div class="row">
<div class="col-sm-12 margin_bottom no-padding"><!-- notice here -->
<!-- Picture 3 -->
</div>
</div>
</div>
</div>
</div>
</div>
In this way you won't have to override the bootstrap classes and you won't break the layout.
I have a button near the bottom of the page that is centered. Additionally, I have three images that I centered by making each image a col-lg-2 with 3 empty columns in between each one. I cannot figure out why these two items don't line up nicely, and which one is the one that is off center.
https://codepen.io/colesam/full/OgamyB/
SCSS:
a {
color: $blue;
font-size: 1.4vw;
font-weight: 500;
line-height: 1.7vw;
transition: all 0.2s;
&:hover {
color: $orange;
font-size: 1.7vw;
cursor: pointer;
text-decoration: none;
}
&:focus {
color: $blue;
text-decoration: none;
&:hover {
color: $orange;
cursor: pointer;
}
}
}
body {
background: white;
color: $black;
font-family: 'Roboto', sans-serif;
font-weight: 300;
text-shadow: $text-shadow-light;
}
h2 {
font-size: 5vh;
margin-top: 5vh;
}
p {
font-size: 3vh;
letter-spacing: 2px;
margin-top: 3vh;
text-shadow: none;
}
.btn-next {
bottom: 0;
padding-bottom: 5vh;
position: absolute;
text-align: center;
transition: all 0.3s;
a {
font-size: 5vw;
&:hover {
font-size: 5.5vw;
}
}
}
.center-text {
text-align: center;
}
.left-text {
text-align: left;
}
.no-margin {
margin: 0;
}
.right-text {
text-align: right;
}
.title {
padding-left: 4vw;
h3 {
font-size: 3vw;
text-shadow: $text-shadow;
}
}
#portfolio-page {
min-height: 100vh;
position: relative;
}
h4 {
font-size: 2vw;
}
.active-item {
box-shadow: $box-shadow-o;
-moz-box-shadow: $box-shadow-o;
-webkit-box-shadow: $box-shadow-o;
}
.btn-portfolio {
padding-top: 20vh;
text-align: center;
transition: all 0.3s;
a {
font-size: 5vw;
&:hover {
font-size: 5.5vw;
}
}
}
#featured-content {
background: rgba(0, 0, 0, 0.1);
height: 65vh;
margin-top: 2vh;
padding: 3vh 0;
}
#featured-img img {
box-shadow: $box-shadow-light;
-moz-box-shadow: $box-shadow-light;
-webkit-box-shadow: $box-shadow-light;
}
#primary-featured {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
height: 45.5vh;
top: 10%;
}
#secondary-featured {
margin-top: 3vh;
}
HTML(inside a div.container):
<div id="portfolio-page">
<div class="row">
<div class="col-lg-4 col-lg-offset-4">
<h2 class="center-text">My Portfolio</h2>
<hr>
</div>
</div>
<div class="row">
<div class="col-lg-12" id="featured-content">
<div class="row no-margin">
<div class="col-lg-1 btn-portfolio" id="left-button">
<a><i class="glyphicon glyphicon-chevron-left"></i></a>
</div>
<div class="col-lg-8 col-lg-offset-1" id="primary-featured">
<div class="row">
<div class="col-lg-5" id="featured-img">
<img src="includes/img/headers.jpg" alt="A cluster of header images." class="img-responsive">
</div>
<div class="col-lg-6 col-lg-offset-1" class="center-text">
<h4 id="featured-title">Placeholder</h4>
<hr>
<p id="featured-description">Placeholder text.</p>
</div>
</div>
</div>
<div class="col-lg-1 col-lg-offset-1 btn-portfolio" id="right-button">
<a><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
<div class="col-lg-6 col-lg-offset-3" id="secondary-featured">
<div class="row">
<div class="col-lg-2" id="secondary-feature1">
<img src="includes/img/placeholder.jpg" alt="A placeholder image." class="img-responsive">
</div>
<div class="col-lg-2 col-lg-offset-3" id="secondary-feature2">
<img src="includes/img/placeholder.jpg" alt="A placeholder image." class="img-responsive">
</div>
<div class="col-lg-2 col-lg-offset-3" id="secondary-feature3">
<img src="includes/img/placeholder.jpg" alt="A placeholder image." class="img-responsive">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 btn-next">
<a>
<i class="glyphicon glyphicon-chevron-down"></i>
</a>
</div>
</div>
</div>
Edit: Your problem is with position: absolute on .btn-next.
For absolutely positioned elements
This property specifies the distance between the left margin edge of
the element and the left edge of its containing block.
You have margin-left: -15px, so it aligns to center with the margin-left: -15px.
How to fix:
Add this to .btn-next:
right: 0;
left: 0;
...or you can remove position: absolute from .btn-next.
Alternative option:
The "down arrow" at the bottom isn't centered, because it's in the row class and that class has margin-left: 15px and margin-right: 15px.
If you give it margin: 0px, it'll be fine.
Rename div class="row" to something else or give it another class like div class="row down".
Examples:
<div class="down">
<div class="col-lg-12 btn-next">
<a>
<i class="glyphicon glyphicon-chevron-down"></i>
</a>
</div>
</div>
or
<div class="row down">
<div class="col-lg-12 btn-next">
<a>
<i class="glyphicon glyphicon-chevron-down"></i>
</a>
</div>
</div>
CSS (only if using second option):
.row.down {
margin: 0px;
}
I have 2 columns inside of a div, with each column containing 3 divs each. As this is for a mobile site, I want them to be aligned in the center responsively. They're aligned fine when resized for a standard mobile (320px, 375px) like so: http://imgur.com/a/WDwSL, but when resized at tablet size, they don't center align at all. http://imgur.com/a/mMTRG
How can I get them to stay in the center no matter what size the phone size? I tried media queries and other responsive grids but they didn't work. Any help would be appreciated. Thanks!
.two-circles {
width: 100%;
}
.circles-left {
width: 37%;
float: left;
margin-left: 18%;
padding: 0;
display: block;
}
.circles-right {
width: 37%;
padding-bottom: 13%;
float: left;
display: block;
}
.clear {
clear: both;
}
.rate-circles {
border: 3px solid white;
border-radius: 50%;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
filter: alpha(opacity=60);
opacity: 1;
text-align: center;
font-family: 'Montserrat', sans-serif;
font-size: 50px;
line-height: 75px;
color: #0E3475;
text-shadow: none;
-webkit-box-shadow: 0 0 1px 0px rgb( 255, 255, 255);
box-shadow: none;
width: 75px;
height: 75px;
z-index: 86;
-webkit-transition: background-color .5s ease-in-out;
-moz-transition: background-color .5s ease-in-out;
-o-transition: background-color .5s ease-in-out;
-ms-transition: background-color .5s ease-in-out;
transition: background-color .5s ease-in-out;
}
h5.circles {
font-size: 18px;
text-align: center;
margin-top: -25px;
}
h1.rate {
color: #1E53A8;
font-weight: bold;
text-align: center;
}
.two-circles a {
list-style-type: none;
text-decoration: none;
}
<div data-role="content" id="cmp-postlist">
<h1 class="rate"> RATE YOUR ANXIETY</h1>
<div class="two-circles">
<div class="circles-left">
<a href="cmp-grounding.html" rel="external">
<div class="rate-circles">1
<h5 class="circles">Nervous</h5>
</div>
</a>
</div>
<div class="circles-right">
<a href="cmp-grounding.html" rel="external">
<div class="rate-circles">2
<h5 class="circles">Uneasy</h5>
</div>
</a>
</div>
<div class="circles-left">
<a href="cmp-grounding.html" rel="external">
<div class="rate-circles">3
<h5 class="circles">Anxious</h5>
</div>
</a>
</div>
<div class="circles-right">
<a href="cmp-grounding.html" rel="external">
<div class="rate-circles">4
<h5 class="circles">Worried</h5>
</div>
</a>
</div>
<div class="circles-left">
<a href="cmp-grounding.html" rel="external">
<div class="rate-circles">5
<h5 class="circles">Fearful</h5>
</div>
</a>
</div>
<div class="circles-right">
<a href="cmp-grounding.html" rel="external">
<div class="rate-circles">6
<h5 class="circles">Panicked</h5>
</div>
</a>
</div>
</div>
<div class="clear"></div>
</div>
JSFIDDLE
.two-circles {
width: 100%;
}
.circles-left,.circles-right {
width: 45%;
padding-bottom: 13%;
float: left;
}
.circles-right {
text-align:left;
padding-left: 5%;
}
.circles-left {
text-align:right;
padding-right: 5%;
}
.clear {
clear: both;
}
.rate-circles {
border: 3px solid white;
border-radius: 50%;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
filter: alpha(opacity=60);
opacity: 1;
text-align: center;
font-family: 'Montserrat', sans-serif;
font-size: 50px;
line-height: 75px;
color: #0E3475;
text-shadow: none;
-webkit-box-shadow: 0 0 1px 0px rgb( 255, 255, 255);
box-shadow: none;
width: 75px;
height: 75px;
z-index: 86;
-webkit-transition: background-color .5s ease-in-out;
-moz-transition: background-color .5s ease-in-out;
-o-transition: background-color .5s ease-in-out;
-ms-transition: background-color .5s ease-in-out;
transition: background-color .5s ease-in-out;
display: inline-block;
}
h5.circles {
font-size: 18px;
text-align: center;
margin-top: -25px;
}
h1.rate {
color: #1E53A8;
font-weight: bold;
text-align: center;
}
.two-circles a {
list-style-type: none;
text-decoration: none;
}
<div data-role="content" id="cmp-postlist">
<h1 class="rate"> RATE YOUR ANXIETY</h1>
<div class="two-circles">
<div class="circles-left">
<a href="cmp-grounding.html" rel="external"><div class="rate-circles">1
<h5 class="circles">Nervous</h5>
</div></a>
</div>
<div class="circles-right">
<a href="cmp-grounding.html" rel="external"><div class="rate-circles">2
<h5 class="circles">Uneasy</h5>
</div></a>
</div>
<div class="circles-left">
<a href="cmp-grounding.html" rel="external"><div class="rate-circles">3
<h5 class="circles">Anxious</h5>
</div></a>
</div>
<div class="circles-right">
<a href="cmp-grounding.html" rel="external"><div class="rate-circles">4
<h5 class="circles">Worried</h5>
</div></a>
</div>
<div class="circles-left">
<a href="cmp-grounding.html" rel="external"><div class="rate-circles">5
<h5 class="circles">Fearful</h5>
</div></a>
</div>
<div class="circles-right">
<a href="cmp-grounding.html" rel="external"><div class="rate-circles">6
<h5 class="circles">Panicked</h5>
</div></a>
</div>
</div>
<div class="clear"></div>
</div>
use this css. i didnt make any changes in HTML. my suggestion is you need to do some changes in both HTML and CSS
.wrapper{
width: 1170px;
max-width: 90%;
margin: 0 auto;
padding: 0 20px;
text-align: center;
}
.column{
width: 48%;
display: inline-block;
margin: 0 .5%;
}
.item{
width: 100%;
background-color: blue;
color: white;
margin-bottom: 20px;
display: inline-block;
}
<div class="wrapper">
<h2>2 column center divs</h2>
<div class="column">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<div class="column">
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
</div>
Would personally change your approach
There are many ways to do it but the most efficient and simplest way would be to use the CSS3 Flexbox. Designed to solve exactly these sort of layout issues.
Code reduces significantly as well. All you need is to give the outer .two-circles and inner .circles-left, .circles-right a property display: flex. Most importantly the justify-content: center to the inner circles to align it to the center. Shown below:
.two-circles {
width:100%;
display: flex;
flex-wrap: wrap;
}
.circles-left, .circles-right {
width:48%;
display: flex;
justify-content: center;
padding-bottom: 13%;
}
That's it! The rest of the code from .clear remains the same as you require.
Fiddle updated here
Using FLex will make this easier. See below.
body {
background: #ccc;
}
.two-circles {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.circles-left, .circles-right {
width: 37%;
text-align: center;
}
.circles-right {
padding-bottom: 13%;
}
.rate-circles {
border: 3px solid white;
border-radius: 50%;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
filter: alpha(opacity=60);
opacity: 1;
text-align: center;
font-family: 'Montserrat', sans-serif;
font-size: 50px;
line-height: 75px;
color: #0E3475;
text-shadow: none;
-webkit-box-shadow: 0 0 1px 0px rgb( 255, 255, 255);
box-shadow: none;
width: 75px;
height: 75px;
z-index: 86;
-webkit-transition: background-color .5s ease-in-out;
-moz-transition: background-color .5s ease-in-out;
-o-transition: background-color .5s ease-in-out;
-ms-transition: background-color .5s ease-in-out;
transition: background-color .5s ease-in-out;
}
h5.circles {
font-size: 18px;
text-align: center;
margin-top: -25px;
}
h1.rate {
color: #1E53A8;
font-weight: bold;
text-align: center;
}
.two-circles a {
list-style-type: none;
text-decoration: none;
display: inline-block;
}
<div data-role="content" id="cmp-postlist">
<h1 class="rate"> RATE YOUR ANXIETY</h1>
<div class="two-circles">
<div class="circles-left">
<a href="cmp-grounding.html" rel="external">
<div class="rate-circles">1
<h5 class="circles">Nervous</h5>
</div>
</a>
</div>
<div class="circles-right">
<a href="cmp-grounding.html" rel="external">
<div class="rate-circles">2
<h5 class="circles">Uneasy</h5>
</div>
</a>
</div>
<div class="circles-left">
<a href="cmp-grounding.html" rel="external">
<div class="rate-circles">3
<h5 class="circles">Anxious</h5>
</div>
</a>
</div>
<div class="circles-right">
<a href="cmp-grounding.html" rel="external">
<div class="rate-circles">4
<h5 class="circles">Worried</h5>
</div>
</a>
</div>
<div class="circles-left">
<a href="cmp-grounding.html" rel="external">
<div class="rate-circles">5
<h5 class="circles">Fearful</h5>
</div>
</a>
</div>
<div class="circles-right">
<a href="cmp-grounding.html" rel="external">
<div class="rate-circles">6
<h5 class="circles">Panicked</h5>
</div>
</a>
</div>
</div>
<!--<div class="clear"></div> Remove-->
</div>
.heading{
margin: 40px 0px;
}
.heading h1{
text-align: center;
}
.block{
width: 100%;
text-align: center;
display: inline-flex;
}
.block_left, .block_right{
width: 50%;
}
.sub_block{
background: transparent;
border: 1px solid #ccc;
padding: 25px 30px;
border-radius: 50%;
}
.block_head{
margin: 40px 0px;
font-weight: bold;
}
<div class="heading">
<h1 class="">
RATE YOUR ANXIETY
</h1>
</div>
<div class="block">
<div class="block_left">
<span class="sub_block">
1
</span>
<div class="block_head">
Nervous
</div>
</div>
<div class="block_right">
<span class="sub_block">
2
</span>
<div class="block_head">
Uneasy
</div>
</div>
</div>
<!-- Third block row -->
<div class="block">
<div class="block_left">
<span class="sub_block">
5
</span>
<div class="block_head">
Fearful
</div>
</div>
<div class="block_right">
<span class="sub_block">
6
</span>
<div class="block_head">
Panicked
</div>
</div>
</div>
<!-- second block row -->
<div class="block">
<div class="block_left">
<span class="sub_block">
3
</span>
<div class="block_head">
Anxious
</div>
</div>
<div class="block_right">
<span class="sub_block">
4
</span>
<div class="block_head">
Worried
</div>
</div>
</div>
Since you mentioned grids, have you tried the concepts of display:inline-blocks?
CSS
.circles {
width:48%;
margin:1%; //not really required
display: inline-block;
}
.circle-wrapper {
text-align: center;
}
HTML
<div class="circle-wrapper">
<div class="circle">
<!-- content here -->
</div>
</div>
What display:inline-block does is that it wraps the space required to be exactly as much as the content it has (unless you define the width and height of course)
Thus with that you are able to place your elements the way you want.
What i have done in circles is I have defined the width of the circle to be 48% of the entire screen. Thus the content inside receives that much amount of space. (i could go for 50 but then there won't be space for margins and stuffs).
The wrapper class aligns these inline blocks to the center just like text blocks. :)
After all. text can be treated as inline-blocks
I'm trying to achieve this CSS animation but don't know how to do it. I want to rotate the top-border around the circle but the whole thing is rotating including text. I just want to rotate the top-border on 360 degree. Here is my code snippet below:
div#skill {
/*background: url(../img/white.jpg) center no-repeat;
background-size: cover;*/
background-color: rgba(144, 0, 64,0.8);
color: #fff;
padding: 10px 0;
}
div#skill h3 {
color: #fff;
text-transform: none;
}
div#skill .row {
margin-right: -15px;
margin-left: -15px;
padding: 15px 150px;
}
div#skill .circle {
height: 120px;
width: 120px;
border: 5px solid #ccc;
border-top-color: orange;
border-radius: 60px;
background-color: #74002f;
/*Making the top border to spin*/
animation: spin 2s linear infinite;
}
div#skill .circle:after {
content: url(../img/icons/arrow-point-to-right.png);
position: absolute;
top: 25px;
right: 0;
}
div#skill .circle.last:after{
display: none;
}
.circle .caption {
font-weight: bold;
padding: 20px 24px;
}
.caption h6 {
font-size: 15px;
}
/*Animation on circle*/
#keyframes spin {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
<div id="skill">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h3>My development process</h3>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="circle">
<div class="caption text-center">
<h6>1</h6>
<h6>Concept</h6>
</div>
</div>
</div>
<div class="col-md-3">
<div class="circle">
<div class="caption text-center">
<h6>2</h6>
<h6>Design</h6>
</div>
</div>
</div>
<div class="col-md-3">
<div class="circle">
<div class="caption text-center">
<h6>3</h6>
<h6>Code</h6>
</div>
</div>
</div>
<div class="col-md-3">
<div class="circle last">
<div class="caption text-center">
<h6 class="text-center">4</h6>
<h6 class="text-center">Launch</h6>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<h3>about my skills</h3>
</div>
<div class="col-md-6">
</div>
</div>
</div>
</div>
Please help me out! Will really appreciate your help in this.Thank you in advance!
div#skill {
/*background: url(../img/white.jpg) center no-repeat;
background-size: cover;*/
background-color: rgba(144, 0, 64, 0.8);
color: #fff;
padding: 10px 0;
}
div#skill h3 {
color: #fff;
text-transform: none;
}
div#skill .row {
margin-right: -15px;
margin-left: -15px;
padding: 15px 150px;
}
div#skill .circle {
height: 120px;
width: 120px;
border: 5px solid #ccc;
border-top-color: orange;
border-radius: 50%;
background-color: #74002f;
/*Making the top border to spin*/
animation: spin 2s linear infinite;
}
div#skill .circle:after {
content: url(../img/icons/arrow-point-to-right.png);
position: absolute;
top: 25px;
right: 0;
}
div#skill .circle.last:after {
display: none;
}
.circle .caption {
font-weight: bold;
padding: 20px 24px;
}
.caption h6 {
font-size: 15px;
}
/*Animation on circle*/
#keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.col-md-3 {
position: relative;
}
.caption {
position: absolute;
z-index: 10;
text-align: center;
left: 65px; /* (120px width + 5+5px border )/2 */
transform: translate(-50%, 0);
}
<div id="skill">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h3>My development process</h3>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="caption text-center">
<h6>1</h6>
<h6>Concept</h6>
</div>
<div class="circle">
</div>
</div>
<div class="col-md-3">
<div class="caption text-center">
<h6>2</h6>
<h6>Design</h6>
</div>
<div class="circle">
</div>
</div>
<div class="col-md-3">
<div class="caption text-center">
<h6>3</h6>
<h6>Code</h6>
</div>
<div class="circle">
</div>
</div>
<div class="col-md-3">
<div class="caption text-center">
<h6 class="text-center">4</h6>
<h6 class="text-center">Launch</h6>
</div>
<div class="circle last">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<h3>about my skills</h3>
</div>
<div class="col-md-6">
</div>
</div>
</div>
</div>
The solution is to make another div that will be behind the .circle with position:absolute; that how, it will "take" the .circle size but not contains the .circle content.
div#skill {
/*background: url(../img/white.jpg) center no-repeat;
background-size: cover;*/
background-color: rgba(144, 0, 64,0.8);
color: #fff;
padding: 10px 0;
}
div#skill h3 {
color: #fff;
text-transform: none;
}
div#skill .row {
margin-right: -15px;
margin-left: -15px;
padding: 15px 150px;
}
div#skill .circle {
position:relative;
height: 120px;
width: 120px;
border: 5px solid #ccc;
/*border-top-color: orange;*/
border-radius: 50%;
background-color: #74002f;
}
div#skill .circle:after {
content: url(../img/icons/arrow-point-to-right.png);
position: absolute;
top: 25px;
right: 0;
}
div#skill .circle.last:after{
display: none;
}
.circle .caption {
font-weight: bold;
padding: 20px 24px;
position:relative;
z-index:1;
}
.caption h6 {
font-size: 15px;
}
.circle-rotate {
height: 100%;
width: 100%;
border-top: 5px solid orange;
border-radius: 60px;
background-color: #74002f;
/*Making the top border to spin*/
animation: spin 2s linear infinite;
position:absolute;
top:0;
left:0;
}
/*Animation on circle*/
#keyframes spin {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
<div id="skill">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h3>My development process</h3>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="circle">
<div class="circle-rotate"></div>
<div class="caption text-center">
<h6>1</h6>
<h6>Concept</h6>
</div>
</div>
</div>
<div class="col-md-3">
<div class="circle">
<div class="caption text-center">
<h6>2</h6>
<h6>Design</h6>
</div>
</div>
</div>
<div class="col-md-3">
<div class="circle">
<div class="caption text-center">
<h6>3</h6>
<h6>Code</h6>
</div>
</div>
</div>
<div class="col-md-3">
<div class="circle last">
<div class="caption text-center">
<h6 class="text-center">4</h6>
<h6 class="text-center">Launch</h6>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<h3>about my skills</h3>
</div>
<div class="col-md-6">
</div>
</div>
</div>
</div>