I'm trying to emulate flipbook-vue component, but with pure CSS.
I would like to combine that component with this CSS example on CodePen.
On the flipbook-vue side, I like how the book remains centered when the first page opens, is that possible to do with CSS only? I tried, but the book doesn't expand as the cover rotates.
Also, do the pages need to go backwards like on CodePen example?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test page flip</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
width: 100vw;
height: 100vh;
overflow: hidden;
text-align: center;
}
div {
height: 100%;
}
#book {
border: 1px solid blue;
display: inline-block;
background: #eee;
text-align: center;
}
div.page {
border: 1px solid red;
width: 40vw;
height: 60%;
}
div.page.flipped {
transition: transform 1s;
transform: rotateY(180deg);
transform-origin: left center;
}
</style>
<script>
window.onload = () => {
setTimeout(flipPage, 1000);
}
flipPage = () => {
document.getElementById('page-1').classList.add('flipped');
}
</script>
</head>
<body>
<div id="book">
<div class="page" id="page-1">
PAGE 1
</div>
<div class="page" id="page-2">
PAGE 2
</div>
</div>
</body>
</html>
I think I'm happy enough with the solution I came up with
var page = 1;
var timerId = null;
window.onload = () => {
timerId = setInterval(flipPage, 1000);
}
toggleClass = (id, cssClass) => {
document.getElementById(id).classList.toggle(cssClass);
}
flipPage = () => {
if (page === 1) {
toggleClass('book', 'two-pages');
} else if (page === 8) {
toggleClass('book', 'closed');
toggleClass('book', 'two-pages');
clearInterval(timerId);
}
toggleClass('page-' + page, 'flipped');
page ++;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--page-width: 40vw;
--transition-speed: 2s;
}
body {
width: 100vw;
height: 100vh;
overflow: hidden;
perspective: 400vw;
background: #ccc;
}
body, .page > div {
display: flex;
align-items: center;
justify-content: center;
}
#book, .page {
width: var(--page-width);
height: 80vh;
}
#book {
transform-style: preserve-3d;
backface-visibility: visible;
flex-shrink: 0;
transition: var(--transition-speed) all ease;
position: relative;
margin: 0 auto;
}
#book.two-pages {
width: calc(2 * var(--page-width));
}
#book.closed {
width: calc(3 * var(--page-width));
}
.front, .back {
background: navy;
}
.page {
background: white;
border: 1px solid red;
position: absolute;
right: 0;
}
div.page.flipped {
transform: rotateY(180deg);
transition: transform var(--transition-speed);
transform-origin: left center;
}
.page > div {
position: absolute;
width: 100%;
height: 100%;
}
.page > div.back-face {
opacity: 0;
}
.page.flipped > div.front-face {
transition-property: opacity;
transition-delay: calc(0.3 * var(--transition-speed));
opacity: 0;
}
.page.flipped > div.back-face {
opacity: 0;
}
.page.flipped > div.back-face {
transition-property: opacity;
transition-delay: calc(0.3 * var(--transition-speed));
opacity: 1;
}
#page-1.flipped {
transform: rotateY(-180.04deg);
}
#page-2.flipped {
transform: rotateY(-180.03deg);
}
#page-3.flipped {
transform: rotateY(-180.02deg);
}
#page-4.flipped {
transform: rotateY(-180.01deg);
}
#page-5.flipped {
transform: rotateY(-180.0deg);
}
#page-6.flipped {
transform: rotateY(-179.99deg);
}
#page-7.flipped {
transform: rotateY(-179.98deg);
}
#page-8.flipped {
transform: rotateY(-179.97deg);
}
<div id="book" class="book">
<div class="page back" id="page-8">
<div class="front-face">PAGE 8</div>
<div class="back-face">BYE</div>
</div>
<div class="page page6" id="page-7">
<div class="front-face">PAGE 7</div>
<div class="back-face"></div>
</div>
<div class="page page5" id="page-6">
<div class="front-face">PAGE 6</div>
<div class="back-face"></div>
</div>
<div class="page page4" id="page-5">
<div class="front-face">PAGE 5</div>
<div class="back-face"></div>
</div>
<div class="page page3" id="page-4">
<div class="front-face">PAGE 4</div>
<div class="back-face"></div>
</div>
<div class="page page2" id="page-3">
<div class="front-face">PAGE 3</div>
<div class="back-face"></div>
</div>
<div class="page page1" id="page-2">
<div class="front-face">PAGE 2</div>
<div class="back-face"></div>
</div>
<div class="page front" id="page-1">
<div class="front-face">HELLO</div>
<div class="back-face">TO</div>
</div>
</div>
Related
I ran into this issue where I am trying to rotate this div on hover, but when I hover, it tries to hover but then it goes back to the normal position. could you please help?
here is my fiddle: https://jsfiddle.net/Lcb7okfn/
.section-tours{
background-color:pink;
padding:5rem 0 50rem 0;
}
.center-text{
background-color:blue;
padding:30px 0;
}
.col-1-of-3{
width: calc((100%-20px)/3);
}
.card{
background-color: orange;
height:15rem;
transition: all .8s;
perspective: 1000px;
-moz-perspective: 1000px;
}
.card:hover{
transform: rotateY(180deg);
}
Apply the hover to a parent element and also move the perspective declaration to the parent:
.section-tours {
background-color: pink;
padding: 5rem 0 50rem 0;
}
.center-text {
background-color: blue;
padding: 30px 0;
}
h2 {
padding: 0;
margin: 0;
}
.col-1-of-3 {
width: calc((100%-20px)/3);
perspective: 1000px;
}
.card {
background-color: orange;
height: 15rem;
transition: all .8s;
}
.col-1-of-3:hover .card {
transform: rotateY(180deg);
}
<section class="section-tours">
<div class="center-text">
<h2>
Most popular tours
</h2>
</div>
<div class="row">
<div class="col-1-of-3">
<div class="card">
<div class="card class_side">
TEXT
</div>
</div>
</div>
<div class="col-1-of-3">
</div>
<div class="col-1-of-3">
</div>
</div>
</section>
I am attempting to create a slideshow and have the text elements sit inline with the images as per the image example below. I am trying to use display grid to display the elements but I have been stuck on this for ages
Does anyone have any suggestions?
Here is my pen https://codepen.io/anon/pen/XQeGMZ
HTML
<div class="bareEditorial">
<div class="slideshow-container">
<h1>Bare Boutique Campaign</h1>
<div class="mySlides fade">
<div class="numbercounter">
<div class="numbertext">1 / 3</div>
</div>
<div class="image">
<img src="https://static1.squarespace.com/static/5a24d00449fc2b2179f0b620/t/5c7118acc830251242312b94/1550915797860/web+7.jpg?format=2500w" onclick="plusSlides(1)">
</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<div class="image">
<img src="https://static1.squarespace.com/static/5a24d00449fc2b2179f0b620/5c7116541905f442e8f008e0/5c7124951905f442e8f048fd/1550918837321/web+3.jpg?format=1000w" onclick="plusSlides(1)">
</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<div class="image">
<img src="https://static1.squarespace.com/static/5a24d00449fc2b2179f0b620/t/5c711846ec212dd3a55665b8/1550915727165/web+5.jpg?format=2500w" onclick="plusSlides(1)">
</div>
</div>
<div class="nextprevious">
<a class="prev" onclick="plusSlides(-1)">Next</a>
<a class="next" onclick="plusSlides(1)">Previous</a>
</div>
</div>
</div>
CSS
.bareEditorial {
margin: 0;
width: 100vw;
background-color: #e2be9f;
display: block;
position: relative;
height: 100%;
}
.image {
width: 38vw;
grid-column-start: 2;
}
/* Slideshow container */
.slideshow-container {
width: 100%;
padding: 80px;
display: grid;
grid-template-columns: repeat(2, 1fr);
padding: 100px;
}
.numbercounter {
grid-column-start: 1;
display: inline-block;
}
.nextprevious {
grid-column-start: 1;
grid-row-start: 2;
display: inline-block;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
color: white;
font-weight: 400;
font-size: 18px;
display: inline-block;
user-select: none;
}
/* Number text (1/3 etc) */
.numbertext {
color: #fff;
font-size: 12px;
padding: 8px 12px;
display: inline-block;
grid-column-start: 1;
}
Since you are using JS, you can put the numbers in same wrapper as next/previous and dynamically change the values.
I have also corrected some values related to your grid and removed useless styles
var slideIndex = 1;
var indexes = document.querySelectorAll(".numbertext span");
var slides = document.getElementsByClassName("mySlides");
indexes[1].innerHTML = slides.length;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
indexes[0].innerHTML = slideIndex;
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex - 1].style.display = "block";
}
body {
margin: 0;
overflow-x: hidden;
font-family: helvetica, sans-serif;
background-color: #fff;
}
* {
font-weight: 400;
}
img {
margin: 0;
padding: 0;
max-width: 100%;
}
/*///////////////////// 2.BARE EDITORIAL /////////////////////*/
.bareEditorial {
background-color: #e2be9f;
}
.wrapper {
padding: 100px;
}
.mySlides {
grid-column-start: 2;
grid-row:1/span 2; /*added this*/
}
.image {
width: 38vw;
}
/* Slideshow container */
.slideshow-container {
padding: 80px;
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.nextprevious {
grid-column-start: 1;
grid-row-start: 2;
margin-top: auto; /*added this*/
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
color: white;
font-weight: 400;
font-size: 18px;
display: inline-block;
user-select: none;
}
/* Number text (1/3 etc) */
.numbertext {
color: #fff;
font-size: 12px;
padding: 8px 12px;
display:inline-block;
}
/* Fading animation */
.fade {
animation-name: fade;
animation-duration: 1s;
}
#keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
.wrapper {
padding: 100px;
}
<div class="parallax"></div>
<div class="bareEditorial">
<div class="slideshow-container">
<h1>Bare Boutique Campaign</h1>
<div class="mySlides fade">
<div class="image">
<img src="https://static1.squarespace.com/static/5a24d00449fc2b2179f0b620/t/5c7118acc830251242312b94/1550915797860/web+7.jpg?format=2500w" onclick="plusSlides(1)">
</div>
</div>
<div class="mySlides fade">
<div class="image">
<img src="https://static1.squarespace.com/static/5a24d00449fc2b2179f0b620/5c7116541905f442e8f008e0/5c7124951905f442e8f048fd/1550918837321/web+3.jpg?format=1000w" onclick="plusSlides(1)">
</div>
</div>
<div class="mySlides fade">
<div class="image">
<img src="https://static1.squarespace.com/static/5a24d00449fc2b2179f0b620/t/5c711846ec212dd3a55665b8/1550915727165/web+5.jpg?format=2500w" onclick="plusSlides(1)">
</div>
</div>
<div class="nextprevious">
<a class="prev" onclick="plusSlides(-1)">Previous</a>
<a class="next" onclick="plusSlides(1)">Next</a>
<div class="numbertext">(<span>3</span> / <span>3</span>)</div>
</div>
</div>
</div>
.nextprevious {
grid-column-start: 1;
grid-row-start: 2;
display: inline-block;
margin: -40px 0 0 0;
}
if you just want to align with the slide you can use minus margin and align but if you want to maintain grid i think the structure have to be changed the way you develope the html structure may not get you the output
Made some changes to the HTML: structure Flattened it.
Made changes to the CSS: Used grid areas.
Made changes to JavaScript: Change class names instead of styles.
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides((slideIndex += n));
}
function currentSlide(n) {
showSlides((slideIndex = n));
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {
slideIndex = 1;
}
if (n < 1) {
slideIndex = slides.length;
}
for (var slide of slides) {
slide.classList.remove("active");
}
for (var dot of dots) {
dot.classList.remove("active");
}
slides[slideIndex - 1].classList.add("active");
dots[slideIndex - 1].classList.add("active");
}
.mySlides {
display: none;
}
.mySlides.active {
display: block;
}
body {
margin: 0;
overflow-x: hidden;
font-family: helvetica, sans-serif;
width: 100%;
height: 100%;
background-color: #fff;
}
* {
font-weight: 400;
}
img {
margin: 0;
padding: 0;
max-width: 100%;
}
/*///////////////////// 2.BARE EDITORIAL /////////////////////*/
.bareEditorial {
margin: 0;
width: 100vw;
background-color: #e2be9f;
display: block;
position: relative;
height: 100%;
}
.wrapper {
padding: 100px;
}
.mySlides {
grid-area: image;
justify-self: end;
align-self: end;
}
.image {
width: 38vw;
}
/* Slideshow container */
.slideshow-container {
width: 100%;
padding: 80px;
box-sizing: border-box;
display: grid;
grid-template-columns: min-content min-content auto auto;
grid-template-areas: "title title title image" "prev next count image";
/* grid-template-columns: repeat(2, 1fr); */
}
.slideshow-container h1 {
grid-area: title;
}
.dot {
grid-area: count;
display: none;
align-self: end;
white-space: nowrap;
color: #fff;
font-size: 12px;
padding: 8px 12px 0;
}
.dot.active {
display: block;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
color: white;
font-weight: 400;
font-size: 18px;
display: inline-block;
user-select: none;
display: flex;
align-items: flex-end;
}
.prev {
grid-area: prev;
padding: 8px 12px 0;
}
.next {
grid-area: next;
padding: 8px 12px 0;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1s;
animation-name: fade;
animation-duration: 1s;
}
#-webkit-keyframes fade {
from {
opacity: 0.4;
}
to {
opacity: 1;
}
}
#keyframes fade {
from {
opacity: 0.4;
}
to {
opacity: 1;
}
}
.wrapper {
padding: 100px;
}
<div class="parallax"></div>
<div class="bareEditorial">
<div class="slideshow-container">
<h1>Bare Boutique Campaign</h1>
<div class="mySlides fade">
<div class="image">
<img src="https://static1.squarespace.com/static/5a24d00449fc2b2179f0b620/t/5c7118acc830251242312b94/1550915797860/web+7.jpg?format=2500w" onclick="plusSlides(1)">
</div>
</div>
<div class="dot">1 / 3</div>
<div class="mySlides fade">
<div class="image">
<img src="https://static1.squarespace.com/static/5a24d00449fc2b2179f0b620/5c7116541905f442e8f008e0/5c7124951905f442e8f048fd/1550918837321/web+3.jpg?format=1000w" onclick="plusSlides(1)">
</div>
</div>
<div class="dot">2 / 3</div>
<div class="mySlides fade">
<div class="image">
<img src="https://static1.squarespace.com/static/5a24d00449fc2b2179f0b620/t/5c711846ec212dd3a55665b8/1550915727165/web+5.jpg?format=2500w" onclick="plusSlides(1)">
</div>
</div>
<div class="dot">3 / 3</div>
<a class="prev" onclick="plusSlides(-1)">Previous</a>
<a class="next" onclick="plusSlides(1)">Next</a>
</div>
</div>
I have a set of tabs that each contain a child element that animates. What happens when I click each tab is that the animation of the child element within the tab runs. I do not want it to run. I want the animation to run the first time then not replay when it's parent switch from display:none to display:block.
In the example I made below I have 2 parent divs, each with a child div that animates over to the right. When each parent is set to block the animation replays, I do not want that to happen. I want each child to stay positioned over to the right. How can I make that happen?
$(".toggler").on("click", function() {
$(".parent").toggleClass("active");
});
.parent {
display: none;
cursor: pointer;
}
.child {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation: move 200ms cubic-bezier(.91, .8, .54, 1.39);
}
.active {
display: block;
}
.child.red {
background-color: red;
}
.child.blue {
background-color: blue;
}
#keyframes move {
from {
left: 0;
}
to {
left: 180px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="toggler">Click this</a>
<div class="parent active">
<div class="child red"></div>
</div>
<div class="parent">
<div class="child blue"></div>
</div>
Fiddle Demo
Yes, animations will restart every time the display value is changed from none to something else.
As per W3C Spec: (emphasis is mine)
Setting the display property to ‘none’ will terminate any running animation applied to the element and its descendants. If an element has a display of ‘none’, updating display to a value other than ‘none’ will start all animations applied to the element by the ‘animation-name’ property, as well as all animations applied to descendants with display other than ‘none’.
There is no direct way to prevent this from happening because that is the intended behavior. You can workaround the situation by using other methods to hide the element instead of using display: none.
Following are a few suggestions on how the element could be hidden without display: none. It is not mandatory to use only one of the following workarounds, it could be some other way also as long as it doesn't involve changing the display property of the element.
Using height: 0, width: 0, overflow: hidden to hide the element.
$(".toggler").on("click", function() {
$(".parent").toggleClass("active");
});
.parent {
height: 0;
width: 0;
overflow: hidden;
cursor: pointer;
}
.child {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation: move 200ms cubic-bezier(.91, .8, .54, 1.39) forwards;
}
.active {
height: auto;
width: auto;
overflow: visible;
}
.child.red {
background-color: red;
}
.child.blue {
background-color: blue;
}
#keyframes move {
from {
left: 0;
}
to {
left: 180px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="toggler">Click this</a>
<div class="parent active">
<div class="child red"></div>
</div>
<div class="parent">
<div class="child blue"></div>
</div>
Adding a container, using position: absolute and opacity: 0 to hide the element.
$(".toggler").on("click", function() {
$(".parent").toggleClass("active");
});
.container {
position: relative;
}
.parent {
position: absolute;
opacity: 0;
cursor: pointer;
}
.child {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation: move 200ms cubic-bezier(.91, .8, .54, 1.39) forwards;
}
.active {
opacity: 1;
}
.child.red {
background-color: red;
}
.child.blue {
background-color: blue;
}
#keyframes move {
from {
left: 0;
}
to {
left: 180px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="toggler">Click this</a>
<div class='container'>
<div class="parent active">
<div class="child red"></div>
</div>
<div class="parent">
<div class="child blue"></div>
</div>
</div>
Adding a container, using position: absolute and visibility: hidden to hide the element.
$(".toggler").on("click", function() {
$(".parent").toggleClass("active");
});
.container {
position: relative;
}
.parent {
position: absolute;
visibility: hidden;
cursor: pointer;
}
.child {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation: move 200ms cubic-bezier(.91, .8, .54, 1.39) forwards;
}
.active {
visibility: visible;
}
.child.red {
background-color: red;
}
.child.blue {
background-color: blue;
}
#keyframes move {
from {
left: 0;
}
to {
left: 180px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="toggler">Click this</a>
<div class='container'>
<div class="parent active">
<div class="child red"></div>
</div>
<div class="parent">
<div class="child blue"></div>
</div>
</div>
Adding a container, using position: absolute and z-index to hide the element.
$(".toggler").on("click", function() {
$(".parent").toggleClass("active");
});
.container {
position: relative;
}
.parent {
position: absolute;
z-index: -1;
cursor: pointer;
}
.child {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation: move 200ms cubic-bezier(.91, .8, .54, 1.39) forwards;
}
.active {
z-index: 1;
}
.child.red {
background-color: red;
}
.child.blue {
background-color: blue;
}
#keyframes move {
from {
left: 0;
}
to {
left: 180px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="toggler">Click this</a>
<div class='container'>
<div class="parent active">
<div class="child red"></div>
</div>
<div class="parent">
<div class="child blue"></div>
</div>
</div>
I'm struggling a bit with creating a responsive divider in Bootstrap. By responsive divider I mean a divider which is vertical on large screens and horizontal on smaller screens.
Vertical divider:
Horizontal divider:
This is a simple example how to make a responsive horizontal line with words by Bootstrap 4.1
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex">
<hr class="my-auto flex-grow-1">
<div class="px-4">SOME TEXT HERE</div>
<hr class="my-auto flex-grow-1">
</div>
This has to be done using a class which can change with media queries. Check this link out for a solution http://www.bootply.com/cwvl8JaIEi. Its basically what you have already with a few additions as follows:
A class for the line
media queries
.sepText {
background: #ffffff;
margin: -15px 0 0 -38px;
padding: 5px 0;
position: absolute;
left: 43%;
text-align: center;
}
hr{-webkit-transform: translate(-45px, -11px) rotate(90deg) scale(0.8);
-ms-transform: translate(-45px, -11px) rotate(90deg) scale(0.8);
transform: translate(-45px, -11px) rotate(90deg) scale(0.8);}
#media only screen and (max-width: 999px) {
hr{
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
.sepText {
left: 50%;
top:50%
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-5">
<h2>Lorem ipsum</h2>
<p>blah blach hery asd
ad a dsasdadjaudn dadas asd ads a da d ad ad a d ad ad a d<br>asd ads asd da da da dada
</p>
</div>
<div class="col-md-2">
<div class="sep">
<hr><div class="sepText">
OR
</div>
</div>
</div>
<div class="col-md-5">
<h2>Lorem lorem</h2>
<p>ok ok ok</p>
</div>
</div>
The columns really need to be be equal height so Flexbox seems optimal
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
margin: 0;
padding: 0;
}
.row {
display: flex;
}
.sep {
display: flex;
flex-direction: column;
justify-content: center;
}
.sepText {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex: 1;
}
.sepText::before,
.sepText::after {
content: '';
flex: 1;
width: 1px;
background: currentColor;
/* matches font color */
margin: .25em;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-sm-5">
<h2>Lorem ipsum</h2>
<p>blah blach hery asd ad a dsasdadjaudn dadas asd ads a da d ad ad a d ad ad a d
<br>asd ads asd da da da dada
</p>
</div>
<div class="col-sm-2 sep">
<span class="sepText">
OR
</span>
</div>
<div class="col-sm-5">
<h2>Lorem lorem</h2>
<p>ok ok ok</p>
</div>
</div>
</div>
Codepen Demo
here is working Demo.
HTML
<div class="row">
<div class="col-sm-5"><h2>lorem Ipsum</h2><p>lorem ipsum dummt text is here for you</p></div>
<div class="col-sm-2 seprator_class">
<div class="sep">
<div class="sep-text">
or
</div>
</div>
</div>
<div class="col-sm-5"><h2>lorem Ipsum</h2><p>lorem ipsum dummt text is here for you</p>
</div>
</div>
CSS
.seprator_class {position: relative;}
.sep {position: absolute; left:50%; top:0; bottom:0; width: 1px; background:#ccc; display:table; height:100%;}
.sep-text { display:table-cell; vertical-align:middle; background: #fff; padding: 5px;}
#media screen and (max-width: 768px) {
.sep {position: absolute; left:0; top:50%; bottom:auto; right:0 width: 100%; background:#ccc; display:block; height: 1px; text-align:center;}
.sep-text { display:inline-block;}
}
The answer is disappearing <hr> + disappearing <div> + margin-left: -1px;
<div class="container">
<div class="row">
<div class="col-md-7">
1 of 2
</div>
<div class="border-left d-sm-none d-md-block" style="width: 0px;"></div>
<div class="col-md-5" style="margin-left: -1px;">
<hr class="d-sm-block d-md-none">
2 of 2
</div>
</div>
</div>
https://jsfiddle.net/8z1pag7s/
tested on Bootstrap 4.1
Here is a codepen for an unlimited number of cells : https://codepen.io/pg-dev/pen/vYyKEaN
Code:
var detectWrap = function(className) {
var midLine = [];
var lastLine = [];
var lastColItems = [];
var prevItem = null;
var item = null;
var items = document.getElementsByClassName(className);
for (const [pos, item] of Object.entries(items)) {
if (prevItem != null &&
prevItem.getBoundingClientRect().top < item.getBoundingClientRect().top) {
lastColItems.push(prevItem)
midLine.push(...lastLine)
lastLine = []
}
//Suppose this is the last line, if not (detect a new line) then move last to mid
lastLine.push(item)
if (parseInt(pos, 0) === items.length - 1) {
lastColItems.push(item)
}
prevItem = item;
};
return {
"mid": midLine,
"last": lastLine,
"last-item": lastColItems
};
}
function grid() {
var wrappedItems = detectWrap("item");
var items = document.getElementsByClassName("item");
for ([key, item] of Object.entries(items)) {
item.classList.remove("last-item-of-line")
item.classList.remove("last-line")
item.classList.add("line")
}
for ([key, item] of Object.entries( wrappedItems["last"])) {
item.classList.add("last-line")
}
for ([key, item] of Object.entries(wrappedItems["last-item"])) {
item.classList.add("last-item-of-line")
}
}
window.onresize = function(event){
grid();
};
//when document ready
document.addEventListener('DOMContentLoaded', function() {
grid();
});
body {
background: grey;
}
div {
display: flex;
flex-wrap: wrap;
}
div > div {
flex-grow: 1;
flex-shrink: 1;
justify-content: center;
background-color: #222222;
padding: 20px 0px;
color: #FFFFFF;
font-family: Arial;
min-width: 250px;
}
div > div.wrapped {
background-color: red;
}
.line {
border-top: none;
border-bottom: 1px solid white;
border-right: 1px solid white;
border-left: none;
}
.last-item-of-line {
border-right: none !important;
}
.last-line {
border-top: none;
border-bottom: none;
border-left: none;
border-right: 1px solid white;
}
<div>
<div class="item">A</div>
<div class="item">B</div>
<div class="item">C</div>
<div class="item">D</div>
<div class="item">E</div>
<div class="item">F</div>
<div class="item">G</div>
<div class="item">H</div>
</div>
My page is divided in rows with limited width. (<div class='row'>)
I would like to apply a background (color) to each row, but I would like the back ground not to take into consideration the width limit of the div, is there a way to achieve this ?
Thanks!
Were you going for something like this? It'd be easier to answer your question if you provided a fiddle or atleast some code so we can help you with your problem.
I came to this solution:
<div class="row1">
...
</div>
<div class="row2">
...
</div>
.row1 {
background-color: red;
width: 100%;
height: 50%;
}
.row2 {
background-color: pink;
width: 100%;
height: 50%;
}
You can run it here: JSFiddle
This is possible with a pseudo-element, no need for additional HTML.
.wrapper {
width: 50%;
margin: auto;
}
[class^=row] {
height: 50px;
position: relative;
margin-bottom: 10px;
}
[class^=row]:before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
height: 100%;
width: 100vw;
background: purple;
z-index: -1;
}
.row1 {
background-color: red;
}
.row2 {
background-color: pink;
}
<div class="wrapper">
<div class="row1">...</div>
<div class="row2">...</div>
</div>
You may be better to place each row inside a .container-fluid div with a {min-width: 100%} and a custom class for the colour you need
.container-fluid {
min-width: 100%
}
.row {
max-width: 300px;
margin: 0 auto;
padding: 10px;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
<div class="container-fluid red">
<div class="row">
<p>Row Content 1</p>
</div>
</div>
<div class="container-fluid green">
<div class="row">
<p>Row Content 2</p>
</div>
</div>
<div class="container-fluid blue">
<div class="row">
<p>Row Content 3</p>
</div>
</div>