Jquery — Set child to fill remaining width of parent - javascript

I am building a responsive layout. I would like to know if anyone knows a way through JS/jQuery which I can set children to fill the remaining space of a parent only if there is space to fill (to the right).
Layout when above 900px
Layout when below 900px
HTML for reference
.row {
width: 100%;
}
.colm-span-2 {
position: relative;
float: left;
margin: 15px auto;
padding: 0px 15px 0px 15px;
background-color: #FFFFFF;
background-clip: content-box;
}
.colm-span-2 {
width: 33.3333333333%;
}
#media screen and (max-width: 900px) {
.colm-span-2 {
width: 50%;
}
}
<div class="row">
<div class="colm-span-2">
<div class="bg-white">
<div class="cont-span-1">
<h2>Test</h2>
<p>Lorem ipsum</p>
</div>
</div>
</div>
<div class="colm-span-2">
<div class="bg-cta-green">
<div class="cont-span-1">
<h2>Test</h2>
<p>Lorem ipsum</p>
</div>
</div>
</div>
<div class="colm-span-2">
<div class="bg-dark-purple">
<div class="cont-span-1">
<h2>Test</h2>
<p>Lorem ipsum</p>
</div>
</div>
</div>
</div>

I would suggest adding:
.colm-span-2:last-child {
width: 100%;
}
to your media query. This will change the final .colm-span-2 to have a 100% width.

With flexbox and :last-child (assuming you have rows) this is possible
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
::before,
::after {
box-sizing: inherit;
}
.bg-white {
background: whitesmoke;
}
.bg-cta-green {
background: green;
}
.bg-dark-purple {
background: rebeccapurple;
}
.row {
display: flex;
}
.colm-span-2 {
flex: 0 0 33%;
margin: .25em;
border: 1px solid grey;
}
.colm-span-2:last-child {
flex: 1;
}
<div class="row">
<div class="colm-span-2">
<div class="bg-white">
<div class="cont-span-1">
<h2>Test</h2>
<p>Lorem ipsum</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="colm-span-2">
<div class="bg-white">
<div class="cont-span-1">
<h2>Test</h2>
<p>Lorem ipsum</p>
</div>
</div>
</div>
<div class="colm-span-2">
<div class="bg-cta-green">
<div class="cont-span-1">
<h2>Test</h2>
<p>Lorem ipsum</p>
</div>
</div>
</div>
<div class="colm-span-2">
<div class="bg-dark-purple">
<div class="cont-span-1">
<h2>Test</h2>
<p>Lorem ipsum</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="colm-span-2">
<div class="bg-white">
<div class="cont-span-1">
<h2>Test</h2>
<p>Lorem ipsum</p>
</div>
</div>
</div>
<div class="colm-span-2">
<div class="bg-cta-green">
<div class="cont-span-1">
<h2>Test</h2>
<p>Lorem ipsum</p>
</div>
</div>
</div>
</div>

Related

Showing a popup modal when on the 3rd slide with slick js

hello I have a problem and I have a question about slick.js. I have a feature, I have a slider. If you want to see more about the content, the registration modals will appear.
I have made the code as below. Is it possible,i want the slider runs normally until the 2nd slide and when the 3rd slide will appear the modals register?
and when the user wants to go to slide 3 it will continue to be directed to the modals register so that the user cannot reach the fourth slide. Is that possible?
Can anyone help me? I don't know how
My Codepen
My JS
var $slider = $('.slider-banner');
var $progressBar = $('.progress');
var $status = $('.pagingInfo');
var $progressBarLabel = $( '.slider__label' );
$slider.on('init reInit afterChange', function (event, slick, currentSlide, nextSlide) {
//currentSlide is undefined on init -- set it to 0 in this case (currentSlide is 0 based)
if(!slick.$dots){
return;
}
var i = (currentSlide ? currentSlide : 0) + 1;
$status.text((i-1) + '-' + (i) + '/' + slick.slideCount);
});
// Progress Bar
$slider.on('beforeChange', function(event, slick, currentSlide, nextSlide) {
var calc = ( (nextSlide) / (slick.slideCount-1) ) * 100;
$progressBar
.css('background-size', calc + '% 100%')
.attr('aria-valuenow', calc );
$progressBarLabel.text( calc + '% completed' );
});
$('.slider-banner').slick({
// arrows: false,
dots: true,
slidesToShow: 2,
slidesToScroll: 1,
prevArrow: "<button class='arrowBannerLeft'><i class='fas fa-chevron-left'></i></button>",
nextArrow: "<button class='arrowBannerRight' data-toggle='modal' data-target='#exampleModal'><i class='fas fa-chevron-right'></i></button>",
});
My CSS
#bannerHome{
height: 100vh ;
background-color: #c6c6c6;
}
#bannerHome #homeBanner {
height: 100vh ;
padding: 0;
position:relative;
}
#bannerHome #homeBanner .slider-banner {
height: 100%;
width: 100%;
}
#bannerHome #homeBanner .slider-banner .item {
height: 100vh ;
margin: 0 5px;
}
#bannerHome #homeBanner .slider-banner .item .content{
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
height: 100%;
padding: 0 10%;
}
#bannerHome #homeBanner .slider-banner .item .content .second-layer .title{
width:55%;
}
#bannerHome #homeBanner .slider-banner .item .content .second-layer h1{
color: #fff;
font-size: 25px;
line-height: 25px;
}
.arrowBannerLeft{
position: absolute;
background: transparent;
border: none;
top: 50%;
left: 2%;
transform: translate(-2%, -50%);
z-index: 1;
}
.arrowBannerLeft:focus{
outline: none;
box-shadow: none;
}
.arrowBannerRight{
position: absolute;
background: transparent;
border: none;
top: 50%;
right: 2%;
transform: translate(-2%, -50%);
z-index: 1;
}
.arrowBannerRight:focus{
outline: none;
box-shadow: none;
}
.pagingInfo{
position:absolute;
bottom: 7%;
left:50%;
transform:translate(-50%,-50%);
}
.progress {
position:absolute;
bottom: 5%;
left:50%;
transform:translate(-50%,-50%);
display: block;
width: 100%;
height: 5px;
border-radius: 5px;
overflow: hidden;
background-color: #f5f5f5;
background-image: linear-gradient(to right, #ED951E ,#ED951E);
background-repeat: no-repeat;
background-size: 0 100%;
transition: background-size .4s ease-in-out;
}
ul.slick-dots {
display: none;
}
My HTML
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>
<section id="bannerHome">
<div class="container-fluid">
<div class="row">
<div class="col-12" id="homeBanner">
<div class="slider-banner">
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet.
</h1>
</div>
</div>
</div>
</div>
</div>
<!-- Number Indicator -->
<span class="pagingInfo"></span>
<!-- Progress Indicator -->
<div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100">
<span class="slider__label sr-only"></span>
</div>
</div>
</div>
</section>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
You need to call the modal window if slide index more than 2 and turn slider back to the second slide without animation.
var $slider = $('.slider-banner');
var $progressBar = $('.progress');
var $status = $('.pagingInfo');
var $progressBarLabel = $('.slider__label');
$slider.on('init reInit afterChange', function(event, slick, currentSlide, nextSlide) {
//currentSlide is undefined on init -- set it to 0 in this case (currentSlide is 0 based)
if (!slick.$dots) {
return;
}
var i = (currentSlide ? currentSlide : 0) + 1;
$status.text((i - 1) + '-' + (i) + '/' + slick.slideCount);
});
// Progress Bar
$slider.on('beforeChange', function(event, slick, currentSlide, nextSlide) {
var calc = ((nextSlide) / (slick.slideCount - 1)) * 100;
$progressBar
.css('background-size', calc + '% 100%')
.attr('aria-valuenow', calc);
$progressBarLabel.text(calc + '% completed');
});
//slide limiter
$slider.on('afterChange',function(e,slick,currentSlide){
if(currentSlide >= 2){
$('#exampleModal').modal('show');
setTimeout(function(){
$slider.slick('slickGoTo',1,true)
},1)
}
})
$('.slider-banner').slick({
dots: true,
slidesToShow: 2,
slidesToScroll: 1,
prevArrow: "<button class='arrowBannerLeft'><i class='fas fa-chevron-left'></i></button>",
nextArrow: "<button class='arrowBannerRight'><i class='fas fa-chevron-right'></i></button>",
});
#bannerHome {
height: 100vh;
background-color: #c6c6c6;
}
#bannerHome #homeBanner {
height: 100vh;
padding: 0;
position: relative;
}
#bannerHome #homeBanner .slider-banner {
height: 100%;
width: 100%;
}
#bannerHome #homeBanner .slider-banner .item {
height: 100vh;
margin: 0 5px;
}
#bannerHome #homeBanner .slider-banner .item .content {
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
height: 100%;
padding: 0 10%;
}
#bannerHome #homeBanner .slider-banner .item .content .second-layer .title {
width: 55%;
}
#bannerHome #homeBanner .slider-banner .item .content .second-layer h1 {
color: #fff;
font-size: 25px;
line-height: 25px;
}
.arrowBannerLeft {
position: absolute;
background: transparent;
border: none;
top: 50%;
left: 2%;
transform: translate(-2%, -50%);
z-index: 1;
}
.arrowBannerLeft:focus {
outline: none;
box-shadow: none;
}
.arrowBannerRight {
position: absolute;
background: transparent;
border: none;
top: 50%;
right: 2%;
transform: translate(-2%, -50%);
z-index: 1;
}
.arrowBannerRight:focus {
outline: none;
box-shadow: none;
}
.pagingInfo {
position: absolute;
bottom: 7%;
left: 50%;
transform: translate(-50%, -50%);
}
.progress {
position: absolute;
bottom: 5%;
left: 50%;
transform: translate(-50%, -50%);
display: block;
width: 100%;
height: 3px;
border-radius: 5px;
overflow: hidden;
background-color: #f5f5f5;
background-image: linear-gradient(to right, #ED951E, #ED951E);
background-repeat: no-repeat;
background-size: 0 100%;
transition: background-size .4s ease-in-out;
}
ul.slick-dots {
display: none;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" integrity="sha512-wR4oNhLBHf7smjy0K4oqzdWumd+r5/+6QO/vDda76MW5iug4PT7v86FoEkySIJft3XA0Ae6axhIvHrqwm793Nw==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" integrity="sha512-6lLUdeQ5uheMFbWm3CP271l14RsX1xtx+J5x2yeIDkkiBpeVTNhTqijME7GgRKKi6hCqovwCoBTlRBEC20M8Mg==" crossorigin="anonymous" />
<section id="bannerHome">
<div class="container-fluid">
<div class="row">
<div class="col-12" id="homeBanner">
<div class="slider-banner">
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet 1.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet 2.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet 3.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet 4.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet 5.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet 6.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet 7.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet 8.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet 9.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet 10.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet 11.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet 12.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet 13.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet 14.
</h1>
</div>
</div>
</div>
</div>
</div>
<!-- Number Indicator -->
<span class="pagingInfo"></span>
<!-- Progress Indicator -->
<div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100">
<span class="slider__label sr-only"></span>
</div>
</div>
</div>
</section>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous"></script>

How to align images in card with dynamic title?

I will have several different cards with dynamic titles coming from the backend. What I need is to align pictures in a same line, no matter how long the title is, it should be aligned based on the longest title. Here is the picture bellow what I need, and here is the JSfiddle link to the code so far.
This is how it should look like
.wrapper {
width: 100%;
display: flex;
}
.card{
text-align: center;
width: 33%;
background: pink;
margin-right: 10px;
padding: 20px 5px;
}
.image {
margin-top: 20px;
}
<div class="wrapper">
<div class="card">
<div class="head">
<div class="title">
Hello
</div>
<div class="image">
<img src="https://www.freepnglogos.com/uploads/netflix-red-logo-circle-png-14.png" />
</div>
</div>
</div>
<div class="card">
<div class="head">
<div class="title">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div class="image">
<img src="https://www.freepnglogos.com/uploads/netflix-red-logo-circle-png-14.png" />
</div>
</div>
</div>
</div>
You need to incorporate flexbox into the children and then force the image to always be at the bottom of the column.
Note...this only works when there are two children...aligning multiple children is not fully supported see Align child elements of different blocks
.wrapper {
width: 100%;
display: flex;
}
.card {
text-align: center;
width: 33%;
background: pink;
margin-right: 10px;
padding: 20px 5px;
display: flex;
flex-direction: column;
}
.title {
flex: 1;
}
.image {
margin-top: auto;
}
.head {
display: flex;
flex: 1;
flex-direction: column;
}
<div class="wrapper">
<div class="card">
<div class="head">
<div class="title">
Hello
</div>
<div class="image">
<img src="https://www.freepnglogos.com/uploads/netflix-red-logo-circle-png-14.png" />
</div>
</div>
</div>
<div class="card">
<div class="head">
<div class="title">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</div>
<div class="image">
<img src="https://www.freepnglogos.com/uploads/netflix-red-logo-circle-png-14.png" />
</div>
</div>
</div>
</div>

How to make bootstrap card clickable?

In order to use on my website, I am trying to make bootstrap cards clickable.
But when I wrap boxes with "ahref" link, there are a lot of styling problems.
The boxes becomes smaller. I tried a lot of alternatives however I couldn't find why I am having problem with it.
You can also find https://codepen.io/snarex/pen/ebQdgj which I have made some test.
section {
padding-top: 4rem;
padding-bottom: 5rem;
background-color: #f1f4fa;
}
.wrap {
display: flex;
background: white;
padding: 1rem 1rem 1rem 1rem;
border-radius: 0.5rem;
box-shadow: 7px 7px 30px -5px rgba(0,0,0,0.1);
margin-bottom: 2rem;
}
.wrap:hover {
background: linear-gradient(135deg,#6394ff 0%,#0a193b 100%);
color: white;
}
.ico-wrap {
margin: auto;
}
.mbr-iconfont {
font-size: 4.5rem !important;
color: #313131;
margin: 1rem;
padding-right: 1rem;
}
.vcenter {
margin: auto;
}
.mbr-section-title3 {
text-align: left;
}
h2 {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.display-5 {
font-family: 'Source Sans Pro',sans-serif;
font-size: 1.4rem;
}
.mbr-bold {
font-weight: 700;
}
p {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
line-height: 25px;
}
.display-6 {
font-family: 'Source Sans Pro',sans-serif;
font-size: 1re
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<section>
<div class="container">
<div class="row mbr-justify-content-center">
<div class="col-lg-6 mbr-col-md-10">
<div class="wrap">
<div class="ico-wrap">
<span class="mbr-iconfont fa-volume-up fa"></span>
</div>
<div class="text-wrap vcenter">
<h2 class="mbr-fonts-style mbr-bold mbr-section-title3 display-5">Stay <span>Successful</span></h2>
<p class="mbr-fonts-style text1 mbr-text display-6">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum</p>
</div>
</div>
</div>
<div class="col-lg-6 mbr-col-md-10">
<div class="wrap">
<div class="ico-wrap">
<span class="mbr-iconfont fa-calendar fa"></span>
</div>
<div class="text-wrap vcenter">
<h2 class="mbr-fonts-style mbr-bold mbr-section-title3 display-5">Create
<span>An Effective Team</span>
</h2>
<p class="mbr-fonts-style text1 mbr-text display-6">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum</p>
</div>
</div>
</div>
<div class="col-lg-6 mbr-col-md-10">
<div class="wrap">
<div class="ico-wrap">
<span class="mbr-iconfont fa-globe fa"></span>
</div>
<div class="text-wrap vcenter">
<h2 class="mbr-fonts-style mbr-bold mbr-section-title3 display-5">Launch
<span>A Unique Project</span>
</h2>
<p class="mbr-fonts-style text1 mbr-text display-6">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum</p>
</div>
</div>
</div>
<div class="col-lg-6 mbr-col-md-10">
<div class="wrap">
<div class="ico-wrap">
<span class="mbr-iconfont fa-trophy fa"></span>
</div>
<div class="text-wrap vcenter">
<h2 class="mbr-fonts-style mbr-bold mbr-section-title3 display-5">Achieve <span>Your Targets</span></h2>
<p class="mbr-fonts-style text1 mbr-text display-6">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum</p>
</div>
</div>
</div>
</div>
</div>
</section>
You could try making your a tags position: absolute; like so...
HTML
<div class="wrap">
</div>
CSS
.wrap{
position: relative;
}
.wrap a{
position: absolute;
width:100%;
height:100%;
top:0px;
left:0px;
}
The a tag now sits on top of your card and should grow and shrink with the card as needed. You can also add border-radius to the a tag to match the corners of your card.
I also updated your CODEPEN so you can see the changes in the inspector to get a better idea of whats going on.

CSS columns separating divs

I am building platform with template like a https://pinterest.com and
I have html structure like this:
<div class="main">
<div class="content">
<div class="content_publisher">
</div>
<div class="content-text">
</div>
</div>
</div>
And i have style.css like this:
body {
width:1358px;
}
.main {
column-width:339.33px;
column-gap: 0;
column-count:4;
position:relative;
top:50px;
width:100%;
}
.content {
display:block;
margin-bottom:10px;
width:337px;
-webkit-box-shadow:inset 0px 0px 10px;
}
My page is devided to 4 columns... Look at the image you will understand what i want exaclty..
https://i.stack.imgur.com/fPfDp.png As you can see at the end of the column, The column is separating divs inside in content div..
Use display: inline-block on .content.
body {
width: 1358px;
}
.main {
column-width: 339.33px;
column-gap: 0;
column-count: 4;
position: relative;
top: 50px;
width: 100%;
}
.content {
display: inline-block;
margin-bottom: 10px;
width: 337px;
-webkit-box-shadow: inset 0px 0px 10px;
height: 200px;
background: #eee;
}
.content:nth-child(odd) {
height: 150px;
}
<div class="main">
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
<div class="content">
</div>
</div>

How to Scroll vertically in one div and at the same time affecting another div that scrolls horizontally

I have 2 div, A and B, I need a way that when I scroll vertically in A, the div B also move at the same time in the Horizontal direction.
I searched and can't find a solution to this problem, and if possible, a solution without a framework.
click here to see what I mean in on picture
.content-up-down {
background: pink;
margin: auto;
width : 400px;
height: 300px;
overflow-y: scroll;
}
.content-1 {
background: rgb(250,230,230);
padding : 32px;
margin: 16px;
}
.content-left-right {
background: rgb(200,250,200);
margin: auto;
margin-top:32px;
padding-top: 16px;
width : 400px;
height: 96px;
overflow-x: scroll;
overflow-y: hidden;
}
.wrap-content-2 {
white-space: nowrap;
}
.content-2 {
background: rgb(100,255,150);
display: inline-block;
width:64px;
height: 64px;
margin:0px 32px;
}
<div class="content-up-down">
<div class="content-1"> </div>
<div class="content-1"> </div>
<div class="content-1"> </div>
<div class="content-1"> </div>
<div class="content-1"> </div>
<div class="content-1"> </div>
<div class="content-1"> </div>
<div class="content-1"> </div>
<div class="content-1"> </div>
<div class="content-1"> </div>
<div class="content-1"> </div>
<div class="content-1"> </div>
<div class="content-1"> </div>
<div class="content-1"> </div>
<div class="content-1"> </div>
</div>
<div class="content-left-right">
<div class="wrap-content-2">
<div class="content-2"> </div>
<div class="content-2"> </div>
<div class="content-2"> </div>
<div class="content-2"> </div>
<div class="content-2"> </div>
<div class="content-2"> </div>
<div class="content-2"> </div>
<div class="content-2"> </div>
<div class="content-2"> </div>
<div class="content-2"> </div>
<div class="content-2"> </div>
</div>
</div>
For this, you would need to listen for scrolling on the pink div using jQuery. Here's a rough estimate:
$(".pink").scroll(function() {
$(".green").scrollLeft(($(".pink").scrollTop() / $(".pink").height()) * $(".green").width());
});
.pink {
background-color: pink;
height: 100px;
overflow-y: scroll;
padding: 10px;
}
.green {
background-color: green;
height: 25px;
overflow-x: scroll;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pink">
a
<br>
b
<br>
c
<br>
d
<br>
a
<br>
b
<br>
c
<br>
d
<br>
a
<br>
b
<br>
c
<br>
d
<br>
a
<br>
b
<br>
c
<br>
d
<br>
a
<br>
b
<br>
c
<br>
d
<br>
</div>
<div class="green"> efghefghefghefghefghefghefghefghefghefghefghefghefghefghefefghefghefghefghefghefghefghefghefghefghefghefghefghefghefefghefghefghefghefghefghefghefghefghefghefghefghefghefghefefghefghefghefghefghefghefghefghefghefghefghefghefghefghefefghefghefghefghefghefghefghefghefghefghefghefghefghefghef
</div>
Hope the code makes enough sense.

Categories

Resources