body {
margin-left: 50px !important;
margin-right: 50px !important;
}
.section {
background: rgba(255, 255, 255, 0.69);
height: 200px;
border: 1px solid #000;
}
.outer {
display: table;
width: 100%;
height: 100vh;
}
.inner {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.parent-div {
margin: 0 auto;
width: 82%;
}
.table-parent {
display: table;
}
.table-child {
display: table-cell;
vertical-align: middle;
}
.section:hover {
color: #ececeb;
transition: all 0.3s;
cursor: pointer;
}
.table-child .fa {
padding-right: 6px !important;
}
.section:hover .item-overlay.bottom {
bottom: 0;
}
.item-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
overflow: hidden;
width: 100%;
-moz-transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
-webkit-transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
transition: top 0.3s, right 0.3s, bottom 0.3s, left 0.3s;
}
.item-overlay.bottom {
bottom: 100%;
}
.table-child p {
display: inline-block;
text-rendering: auto;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate(0, 0);
}
a {
text-decoration: none;
color: #333 !important;
}
#AddProduct {
display: inline-block;
}
#media screen and (max-width: 767px) {
.col-xs-12 {
width: 100% !important;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<body>
<div class="row outer">
<div class="row inner">
<div class="clearfix parent-div">
<a data-toggle="modal" data-target="#myModal">
<div class="col-md-4 col-sm-6 col-xs-12 section table-parent">
<div class="item-overlay bottom"></div>
<h4 class="table-child"><i class="fa fa-plus-circle" aria-hidden="true"></i>
<p>ADD A PRODUCT</p>
</h4>
</div>
</a>
<a>
<div class="col-md-4 col-sm-6 col-xs-12 section table-parent">
<div class="item-overlay bottom"></div>
<h4 class="table-child"><i class="fa fa-pencil" aria-hidden="true"></i>
<p>EDIT A PRODUCT</p>
</h4>
</div>
</a>
<a data-toggle="modal" data-target="#removeModal">
<div class="col-md-4 col-sm-6 col-xs-12 section table-parent">
<div class="item-overlay bottom"></div>
<h4 class="table-child"><i class="fa fa-minus-circle" aria-hidden="true"></i>
<p>REMOVE A PRODUCT</p>
</h4>
</div>
</a>
<div class="col-md-4 col-sm-6 col-xs-12 section table-parent">
<div class="item-overlay bottom"></div>
<h4 class="table-child"><i class="fa fa-bars" aria-hidden="true"></i>
<p>USER'S LIST</p>
</h4>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 section table-parent">
<div class="item-overlay bottom"></div>
<h4 class="table-child"><i class="fa fa-sort" aria-hidden="true"></i>
<p>ORDERS</p>
</h4>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 section table-parent">
<div class="item-overlay bottom"></div>
<h4 class="table-child"><i class="fa fa-power-off" aria-hidden="true"></i>
<p>LOGOUT</p>
</h4>
</div>
</div>
</div>
</div>
</body>
I am using Bootstrap v3. The divs are not taking 100% width in mobile devices with col-xs-12. Code is working fine for medium and small screens but retaining the 50% width for screens less than 768. Here is the link to the screenshot of the behaviour.
Image
Gone through all other available solutions but none worked for me.
I don't know how to put this into words but I am getting the desired output on resizing the browser window but the code doesn't seem to work on the actual device and the web inspector. Screenshot of the device Image
Additionally I tried with !important as well at the end of css but facing the same problem.
Taken from comment of chetan kalra and posting answer for quick reference for others. I also faced this issue and found viewport meta tag was missing. Adding below line did the trick.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Related
2 image appear in same time, up and down.
I want hover image display none.
Hover image is appear below primary image.
Primary image is hide when hover.
Seems like dont work. and really need help on this.
.card-img-top {
border-radius: 0;
height: 250px;
width: 100%;
top: 50%;
left: 50%;
transform: translate(0%, 0%);
object-fit: cover;
margin-bottom: 20px;
}
.card a img {
display: block;
}
.card a:hover img:first-child {
display: none;
}
<div class="card col-12 col-md-6 col-sm-12 col-lg-6 col-xl-4">
<a href="#">
<img class="card-img-top" src="images/True Blue Asia.jpg"/>
<img class="card-img-top" src="images/Asia Bagus.jpg"/>
<div class="card-img-overlay d-table-cell align-middle">
<p>true blue asia</p>
</div>
<div class="card-body">
<div class="row">
<div class="col-12 col-md-3">
<div class="card-date">Oct 2019</div>
</div>
<div class="col-12 col-md-9">
<div class="card-title">Roots, Heritage, Authenticity</div>
<div class="card-content">Asia’s myriad cultures manifest in practices derived from traditional value systems.</div>
</div>
</div>
</div>
</a>
</div>
<div class="card">
<img src="/image_displayed_as_default" class="hover-hidden"/>
<img src="/image_displayed_when_hover" class="hover-only"/>
</div>
.card img {
opacity: 1;
transition: opacity 200ms;
}
.card:hover img.hover-hidden,
.card:not(:hover) img.hover-only {
opacity: 0;
}
You are looking for this
Pure CSS solution
#aks {
width:0px;
height:0px;
background:url('http://dummyimage.com/100x100/000/fff');
padding:50px;
}
#aks:hover {
background: url('http://dummyimage.com/100x100/eb00eb/fff');
}
<img id="aks" src="http://dummyimage.com/100x100/000/fff"/>
Your code solution
Issue i you are not hide second image initially
.card-img-top {
border-radius: 0;
height: 250px;
width: 100%;
top: 50%;
left: 50%;
transform: translate(0%, 0%);
object-fit: cover;
margin-bottom: 20px;
}
.card a img {
display: block;
}
.card a:hover img:first-child {
display: none;
}
.card a .card-img-below{
display: none;
}
.card a:hover .card-img-below {
display: block;
}
a{
display:block;
}
<div class="card col-12 col-md-6 col-sm-12 col-lg-6 col-xl-4">
<a href="#">
<img class="card-img-above" src="https://cdn4.iconfinder.com/data/icons/imoticons/105/imoticon_15-128.png"/>
<img class="card-img-below" src="https://cdn4.iconfinder.com/data/icons/imoticons/105/imoticon_12-128.png"/>
<div class="card-img-overlay d-table-cell align-middle">
<p>true blue asia</p>
</div>
<div class="card-body">
<div class="row">
<div class="col-12 col-md-3">
<div class="card-date">Oct 2019</div>
</div>
<div class="col-12 col-md-9">
<div class="card-title">Roots, Heritage, Authenticity</div>
<div class="card-content">Asia’s myriad cultures manifest in practices derived from traditional value systems.</div>
</div>
</div>
</div>
</a>
</div>
Change the image url
With Bootstrap 4 I would like to have a row, which fills up the remaining height of the page, but the content of it should not extend the height over the place given. The content should be scrollable by buttons, the scrollbar at best should not be visible.
I tried to break down my layout to this. Please feel free to correct - this is really not my strong suit.
JSFiddle
HTML:
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" type="text/css" href="/library/bootstrap-4.1.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/library/fontawesome-5.0.10/css/fontawesome-all.min.css">
<link rel="stylesheet" type="text/css" href="/css/screen/presentation.css"/>
<title>Test</title>
</head>
<body>
<div id="wrapper">
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
</ul>
</div>
<div id="page-content-wrapper">
<div class="container-fluid d-flex h-100 flex-column">
<div class="row">
<div class="col">
<i class="fas fa-bars fa-3x"></i>
</div>
</div>
<div class="container h-100 flex-column d-flex">
<div class="row">
<div class="col headline-col bg-warning">
<h5 class="align-middle">Headline 1</h5>
</div>
</div>
<div class="section-div h-100 flex-column d-flex">
<div class="row bg-success">
<div class="col">
<h5>Subtitle 1</h5>
</div>
</div>
<div class="row flex-fill bg-danger d-flex">
<div class="col">
<h5>Subtitle 2</h5>
<p>
This should fill the remaining height, but the content should not use more space than available.
So it should be scrollable, best without scrollbar and scrolling by buttons
</p>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col last-col bg-success text-right">
This should always be at the bottom of the page.
<button class="btn btn-primary btn-scroll-up" type="button">Sroll Up</button>
<button class="btn btn-primary btn-scroll-down" type="button">Scroll Down</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="/library/jquery-3.3.1/jquery-3.3.1.min.js"></script>
<script src="/library/bootstrap-4.1.0/js/bootstrap.bundle.min.js"></script>
<script src="/javascript/presentation.js"></script>
</body>
</html>
CSS:
html {
height: 100%;
}
body {
overflow-x: hidden;
height: 100%;
}
.flex-fill {
flex: 1;
}
.startpage-col, .headline-col {
border-top-left-radius: 15px 15px;
border-top-right-radius: 15px 15px;
}
.headline-col {
height: 40px;
line-height: 40px;
}
.headline-col h5 {
vertical-align: middle;
display: inline-block;
}
.last-col {
border-bottom-left-radius: 15px 15px;
border-bottom-right-radius: 15px 15px;
height: 50px;
}
#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
height:100%;
}
#wrapper.toggled {
padding-left: 350px;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 350px;
width: 0;
height: 100%;
margin-left: -350px;
overflow-y: auto;
background: #fff;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled #sidebar-wrapper {
width: 350px;
}
#page-content-wrapper {
width: 100%;
height: 100%;
position: absolute;
padding: 15px;
background: #000;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -350px;
}
/* Sidebar Styles */
.sidebar-nav {
position: absolute;
top: 0;
width: 350px;
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li i {
text-indent: 0px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #666;
}
.sidebar-nav li a:hover {
text-decoration: none;
color: #000;
}
.sidebar-nav li a:active, .sidebar-nav li a:focus {
text-decoration: none;
color: #000;
}
.sidebar-nav>.sidebar-brand {
height: 65px;
font-size: 18px;
line-height: 60px;
}
.sidebar-nav>.sidebar-brand a {
color: #999999;
}
.sidebar-nav>.sidebar-brand a:hover {
color: #fff;
background: none;
}
#media(min-width:768px) {
#wrapper {
padding-left: 0;
}
#wrapper.toggled {
padding-left: 350px;
}
#sidebar-wrapper {
width: 0;
}
#wrapper.toggled #sidebar-wrapper {
width: 350px;
}
#page-content-wrapper {
padding: 20px;
position: relative;
}
#wrapper.toggled #page-content-wrapper {
position: relative;
margin-right: 0;
}
}
JS:
$('#menu-toggle').click(function(e) {
e.preventDefault();
$('#wrapper').toggleClass('toggled');
});
Thank you very much!
I had a similar issue: Flexbox height issue with nested flex-grow boxes in Bootstrap 4
Instead of using h-100. which will force the containers to be 100% of viewport height rather than remaining height, use the Bootstrap 4.1 flex grow utils...
flex-grow-1 to fill remaining height of flex container
flex-shrink-0 to make other rows shrink without squishing
Then set overflow:auto on the appropriate div so that it scrolls.
Demo: https://codeply.com/go/lk58xAjDc7
Template (using only Bootstrap classes):
<div id="wrapper">
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
...
</ul>
</div>
<div id="page-content-wrapper" class="min-vh-100 p-0 d-flex flex-column overflow-hidden">
<div class="container-fluid d-flex flex-column overflow-auto flex-fill">
<div class="row flex-shrink-1">
<div class="col">
<i class="fas fa-bars fa-2x"></i>
</div>
</div>
<div class="container flex-fill flex-column d-flex">
<div class="row flex-shrink-0">
<div class="col headline-col bg-warning">
<h5 class="align-middle">Headline 1</h5>
</div>
</div>
<div class="section-div flex-grow-1 flex-column d-flex">
<div class="row flex-shrink-0 bg-success">
<div class="col py-1">
<h5>Subtitle 1</h5>
</div>
</div>
<div class="row flex-fill bg-danger d-flex">
<div class="col overflow-auto flex-shrink-1 position-relative">
<div class="position-absolute">
<h5>Subtitle 2</h5>
<p> ... content </p>
</div>
</div>
</div>
</div>
</div>
<div class="container flex-shrink-1">
<div class="row">
<div class="col last-col bg-success text-right"> This should always be at the bottom of the page.
</div>
</div>
</div>
</div>
</div>
</div>
Zim's solution simplified:
<html class="h-100">
<body class="h-100">
<div class="h-100 d-flex flex-column">
<div style="background: lightblue;">
top
</div>
<div class="flex-grow-1 overflow-auto" style="background: lightgreen;">
bottom
</div>
</div>
</body>
</html>
hello guys I am designing a website which consist of an image and a hover effect which fades out a text. it is pretty working fine but it became a mess when i resized the browser window, the image is still positioned but the hover content resizes i just want it to be the same size with the image on resize.
Any way out of this mess, any answer is appreciated thanks.
figure {
overflow: hidden;
margin: 0;
padding: 0;
}
figure:hover img {
transition-duration: 0.8s;
}
figure figcaption {
position: absolute;
top: 0;
left: 20px;
width: 90% !important;
height: 95%;
opacity: 0;
transition-duration: 0.8s;
color: #000;
}
figure:hover figcaption {
opacity: 1;
}
.styleme {
background: #fff;
font-family: playball;
margin-top: 36%;
height: 80px;
}
<div class="row">
<div class="col-lg-6 col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<figure>
<img class="img-responsive" src="macbookair11_lifestyle_20.jpg" />
<figcaption>
<div class="styleme">
<p>This is the Apple macbook and it is pro <i class="fa fa-apple"></i> justclick to purchase</p>
<p>Proccessor: works at 3.14Ghz</p>
<p>Internal Ram: It has a Ram of 8GB <i class="fa fa-bars" aria-hidden="true"></i></p>
</div>
</figcaption>
</figure>
</div>
</div>
</div>
Evidently, your image must be very large if you want it to fill most of the page. I have used a small image and sized appropriately for demo purposes.
The key difference I made was to use display:block and position:relative.
It's good to minimise the use of absolute positioning where possible. (That's why I adjusted the top and left to margin-top and margin-left)
Adjust the numbers in the css as you see appropriate
Hope this helps
figure {
overflow: hidden;
margin: 0;
padding: 0;
}
figure:hover img {
transition-duration: 0.8s;
}
figure figcaption {
display:block;
position: relative;
margin-top: 0;
margin-left: 20px;
width: 400px !important;
height: 450px;
opacity: 0;
transition-duration: 0.8s;
color: #000;
}
figure:hover figcaption {
opacity: 1;
}
.styleme {
background: #fff;
font-family: playball;
margin-top: 10%;
height: 80px;
}
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-lg-6 col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<figure>
<img class="img-responsive" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSs87UCUOVgNUoz7-AlLppXgeDyC1DnITzZjk6xMJN4P94oMps1" />
<figcaption>
<div class="styleme">
<p>This is the Apple macbook and it is pro <i class="fa fa-apple"></i> justclick to purchase</p>
<p>Proccessor: works at 3.14Ghz</p>
<p>Internal Ram: It has a Ram of 8GB <i class="fa fa-bars" aria-hidden="true"></i></p>
</div>
</figcaption>
</figure>
</div>
</div>
</div>
EDIT: (snippet 2 with larger image)
*{margin:0; padding:0;}
.thumbnail{
background: #fff;
}
figure img{
width:90%!important;
height: auto;
overflow: hidden;
margin: 0 auto;
}
figure:hover img {
transition-duration: 0.8s;
}
figure figcaption{
display:block;
position: relative;
opacity: 0;
transition-duration: 0.8s;
color: #000;
}
figure:hover figcaption {
opacity: 1;
}
.styleme {
background: #fff;
font-family: playball;
padding-top: 5%;
padding-left: 20px;
width:90%;
height:10%;
}
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-lg-6 col-md-4 col-sm-6 col-xs-12">
<div class="thumbnail">
<figure>
<img class="img-responsive" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQmGtZotDeGTAe1MOM1QZ-g6HfFnBCE3ASqsoUcSmfcMgHLPSOMyw" />
<figcaption>
<div class="styleme">
<p>This is the Apple macbook and it is pro <i class="fa fa-apple"></i> just click to purchase</p>
<p>Processor: works at 3.14Ghz</p>
<p>Internal Ram: It has a Ram of 8GB <i class="fa fa-bars" aria-hidden="true"></i></p>
</div>
</figcaption>
</figure>
</div>
</div>
</div>
https://jsfiddle.net/RachGal/4yqLeey9/
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
So I built a menu and would like to be able to toggle it. I'm simply animation the width using CSS3.
-webkit-transition: width 1s;
transition: width 1s;
Now, when the menu is closed and you re-open it, the menu items "pop in", as shown here: https://gyazo.com/6dfee24687fff026e464323882770959
I think it's because the sentences are wrapping. I've tried everything to stop that from happening, to no avail.
This is my structure:
<div id="menu" class="col-md-2 col-xs-12 nopad closed">
<div id="togglemenu" class="col-xs-12 nopad">
<div class="hidden-xs hidden-sm col-md-3 menu-icon" onclick="document.querySelector('#menu').classList.toggle('closed')">
<div class="vertical">
<div>
<i class="fa fa-bars" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
<div class="nopad menu-header col-xs-12" onclick="document.querySelector('#menu').classList.toggle('closed')">
<div class="vertical">
<div class="pull-right menu-toggle">
<i class="fa fa-bars" aria-hidden="true"></i>
</div>
<div>MENU</div>
</div>
</div>
<div class="col-xs-12 nopad">
<div class="hidden-xs hidden-sm col-md-3 menu-icon">
<div class="vertical">
<div>
<i class="fa fa-usd" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="col-xs-12 col-md-9 menu-item active">
<div class="vertical">
<div>Menu item</div>
</div>
</div>
</div>
<div class="nopad menu-header btop col-xs-12">
<div class="vertical">
<div>Menu divider</div>
</div>
</div>
</div>
And the CSS that goes along with it:
#menu {
min-height: 65vh;
background: #1c2329;
-webkit-transition: width 1s;
transition: width 1s;
}
#menu div {
text-overflow: clip;
}
.togglemenu {
cursor: pointer;
}
.menu-header {
text-align: center;
color: white;
text-transform: uppercase;
background: #181d21;
}
.menu-header.btop {
border-top: 1px solid #3de66e;
}
.vertical {
display: table-cell;
vertical-align: middle;
}
.menu-icon {
background: #1c252a;
text-align: center;
font-size: 2.1vh;
color: #3de66e;
}
.menu-item {
background: #1c2329;
text-transform: uppercase;
cursor: pointer;
}
.menu-item.active {
border-right: 3px solid #3de66e;
}
.menu-icon, .menu-header, .menu-item {
height: 5vh;
display: table;
overflow: hidden;
}
#menu.closed .menu-item, #menu.closed .col-md-9, #menu.closed .menu-header {
display: none;
}
#menu.closed .menu-item div {
display: block;
}
#menu.closed {
width: 3vw;
}
#menu.closed .menu-part {
display: none;
}
#togglemenu {
display: none;
}
#menu.closed #togglemenu {
display: block;
}
I was hoping someone could help me. Thanks in advance!