I have created pure css accordion for mobile and grid view for web.
now i'm facing issue with column width for web view. in current implementation column width is not same for all column.
I want to create an equal column using flex.
Note: this html is responsive for mobile there will be accordion for mobile and for web there will be row.
/*
CSS for the main interaction
*/
.accordion > input[name="collapse"] {
display: none;
/*position: absolute;
left: -100vw;*/
}
/* .accordion label,
.accordion .content{
max-width: 620px;
margin: 0 auto;
} */
.accordion .content {
background: #fff;
overflow: visible;
height: 0;
padding: 10px 0;
}
.accordion > input[name="collapse"]:checked ~ .content {
height: 200px;
transition: height 0.5s;
}
.accordion label {
display: block;
}
.edit-delete .item {
flex-direction: row;
}
.edit-delete a {
padding: 0 10px;
}
/* For Desktop */
#media only screen and (min-width: 1023px) {
.accordion > input[name="collapse"]:checked ~ .content {
height: auto;
}
.accordion .handle {
width: 300px;
}
.handle label,
.content,
.col,
.item {
display: flex;
width: 100%;
}
}
.accordion {
display: flex;
border-bottom: 1px solid #ddd;
}
.accordion > input[name="collapse"]:checked ~ .content {
border-top: 0;
transition: 0.3s;
}
.accordion .handle {
margin: 0;
font-size: 16px;
}
.accordion label {
cursor: pointer;
font-weight: normal;
padding: 10px 0;
user-select: none;
pointer-events: none;
}
/* .accordion label:hover,
.accordion label:focus {
background: #252525;
} */
.accordion .handle label:before {
content: "";
border: solid #008080;
border-width: 0 3px 3px 0;
padding: 4px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
float: right;
margin-top: 2px;
transition: 0.4s;
width: 6px;
height: 6px;
position: absolute;
right: 20px;
}
.handle label:before {
display: none;
}
.accordion > input[name="collapse"]:checked ~ .handle label:before {
content: "";
border: solid #008080;
border-width: 0 3px 3px 0;
padding: 4px;
-webkit-transform: rotate(220deg);
float: right;
margin-top: 2px;
transition: 0.4s;
width: 6px;
height: 6px;
position: absolute;
right: 20px;
}
.accordion p:last-child {
margin-bottom: 0;
}
/* .container{
max-width: 620px;
margin: 0 auto;
} */
.handle label,
.content,
.col {
display: flex;
}
.item {
display: flex;
flex-direction: column;
padding: 0 10px;
}
#media (max-width: 1023px) {
.content {
display: block;
}
.content .col {
padding: 10px 0;
}
.accordion {
flex-direction: column;
position: relative;
}
.accordion .content {
overflow: hidden;
transition: 0.5s;
padding: 0;
}
.accordion label {
pointer-events: all;
}
.handle label:before {
display: block;
}
.edit-delete {
position: absolute;
bottom: 0;
}
.accordion .handle {
height: 100px;
}
.handle .item {
padding: 0 10px;
width: auto;
}
.accordion > input[name="collapse"]:checked ~ .handle {
height: auto;
}
.item {
width: auto;
}
.item span:first-child {
width: 150px;
}
.edit-delete a {
padding-left: 0;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML Expand Collapse Text Example</title>
<meta name="author" content="Codeconvey" />
<!-- Font Awesome -->
<!-- Accordion CSS -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<section class="accordion">
<input type="radio" name="collapse" id="handle1" />
<div class="handle">
<label for="handle1">
<div class="item">
<span>Name</span>
<span>xyz</span>
</div>
<div class="item">
<span>Mobile Number</span>
<span>1234567890</span>
</div>
</label>
</div>
<div class="content">
<div class="col">
<div class="item">
<span>Gender</span>
<span>Male</span>
</div>
<div class="item">
<span>Dealership</span>
<span>fsdfsd</span>
</div>
</div>
<div class="col">
<div class="item">
<span>Branch</span>
<span>sdfsd</span>
</div>
<div class="item">
<span>User Type</span>
<span>Sales Executive</span>
</div>
</div>
<div class="col">
<div class="item">
<span>Status</span>
<span>Active</span>
</div>
</div>
<div class="col edit-delete">
<div class="item">
Edit
Delete
</div>
</div>
</div>
</section>
<section class="accordion">
<input type="radio" name="collapse" id="handle2" />
<div class="handle">
<label for="handle2">
<div class="item">
<span>Name</span>
<span>Zyz</span>
</div>
<div class="item">
<span>Mobile Number</span>
<span>1234567890</span>
</div>
</label>
</div>
<div class="content">
<div class="col">
<div class="item">
<span>Name</span>
<span>xyz</span>
</div>
<div class="item">
<span>Mobile Number</span>
<span>1234567890</span>
</div>
</div>
<div class="col">
<div class="item">
<span>Name</span>
<span>xyz</span>
</div>
<div class="item">
<span>Mobile Number</span>
<span>1234567890</span>
</div>
</div>
<div class="col">
<div class="item">
<span>Mobile Number</span>
<span>1234567890</span>
</div>
</div>
<div class="col edit-delete">
<div class="item">
Edit
Delete
</div>
</div>
</div>
</section>
<section class="accordion">
<input type="radio" name="collapse" id="handle3" />
<div class="handle">
<label for="handle3">
<div class="item">
<span>Name</span>
<span>xyz</span>
</div>
<div class="item">
<span>Mobile Number</span>
<span>1234567890</span>
</div>
</label>
</div>
<div class="content">
<div class="col">
<div class="item">
<span>Name</span>
<span>xyz</span>
</div>
<div class="item">
<span>Mobile Number</span>
<span>1234567890</span>
</div>
</div>
<div class="col">
<div class="item">
<span>Name</span>
<span>xyz</span>
</div>
<div class="item">
<span>Mobile Number</span>
<span>12345625320</span>
</div>
</div>
<div class="col">
<div class="item">
<span>Mobile Number</span>
<span>1212121212</span>
</div>
</div>
<div class="col edit-delete">
<div class="item">
Edit
Delete
</div>
</div>
</div>
</section>
</body>
</html>
Please check on fullscreen view
please see screenshot below for inconsistency column width
This could be achieved 3 steps:
set display: contents on .handle, .handle > label, .content, .col elements. This will make all .item elements children of section.accordion
For all .item elements set width: 0 and flex-grow: 1 this will makes all columns to have the same width.
adjust padding on section.accordion to match your first design.
Of course those have to be done for the web view only.
Related
I am trying to code a very simple HTML CSS file and here is my problem.
Here is my code
[https:// codepen.io/anhbui2904/pen/jOxeQgw][1]
My problem is, as you can see in this picture
Because of this code
.service-section .service-item{
flex: 0 0 33.33%;
max-width: 33.33%;
padding: 15px;
}
The pictures become 3 pictures per 1 line. As you can see in this picture
But I use this code
.work-section .work-item {
flex: 0 0 33.33%;
max-width: 33.33%;
padding: 15px;
}
As you can see, seems this code does not work ? The photos are still in line ? I do not know why ? Could you please give me some advice for this problem ? Thank you very much for your time.
#import url('https://fonts.googleapis.com/css?family=Raleway:300,400,700&display=swap');
body{
margin: 0;
line-height: 1.5;
background-color: #f3f2f1;
}
body,
input,textarea,
button{
font-family: 'Raleway', 'sans-serif';
font-weight: 400;
}
*{
box-sizing: border-box;
margin: 0;
}
.container{
max-width: 1170px;
margin: auto;
}
.row{
display: flex;
flex-wrap: wrap;
}
.align-items-center{
align-items: center;
}
.justify-content-between{
justify-content: space-between;
}
#keyframes ani01{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
.section-title{
flex: 0 0 100%;
max-width: 100%;
margin-bottom: 60px;
padding: 0 15px;
}
.section-title h1{
display: inline-block;
font-size: 40px;
color: #000000;
font-weight: 700;
margin: 0;
position: relative;
}
.section-title h1:before{
content: '';
box-sizing: border-box;
position: absolute;
left: 0;
bottom: -5px;
width: 80px;
height: 3px;
background-color: #ff9800;
}
.btn-01{
background-color: #ff9800;
color: #fff;
border: 2px solid transparent;
padding: 10px 35px;
border-radius: 30px;
line-height: 1.5;
cursor: pointer;
text-decoration: none;
font-size: 16px;
font-weight: 600;
display: inline-block;
transition: all 0.5s ease;
}
.btn-01:hover{
background-color: transparent;
border-color: #FF9800;
color:#ff9800;
}
.btn-01:focus{
outline: none;
}
/* preloader */
/*.preloader{
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: #111111;
z-index: 1099;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.6 ease;
}*/
.preloader.loaded{
visibility: hidden;
opacity: 0;
z-index: -99;
}
.preloader.loader{
height: 30px;
width: 30px;
border: 2px solid #FF9800;
border-right: 2px solid transparent;
border-radius: 50%;
animation: ani01 2s linear infinite;
}
/*Header*/
.header{
position: absolute;
left: 0;
top:0;
width: 99;
transition: all 0.5s ease;
}
.header .fixed{
background-color: #fff;
position: fixed;
}
.header .brand-name{
padding: 0 15px;
}
.header.brand-name a{
text-decoration: none;
font-size: 30px;
color: #fff;
text-transform: uppercase;
font-weight: 900;
letter-spacing: 2px;
transition: all 0.5s ease;
}
.header .fixed .brand-name a{
color: #0000;
}
.header .nav-toggle{
width: 40px;
height: 34px;
border: 1px solid #fff;
border-radius: 3px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.5s ease;
display: none;
}
.header .fixed .nav-toggle {
border-color: #000;
}
.header .nav-toggle span{
height: 1px;
display: block;
width: 16px;
background-color: #fff;
position: relative;
transition: all 0.5s ease;
}
.header .nav-toggle span::before,
.header .nav-toggle span::after{
content: '';
position: absolute;
left: 0;
top: 0;
height: 1px;
width: 100%;
background-color: #fff;
transition: all 0.5s ease;
}
.header .fixed .nav-toggle span,
.header .fixed .nav-toggle:before,
.header .fixed .nav-toggle::after{
background-color: #000000;
}
.header .nav-toggle span:before{
transform: translate(-6px);
}
.header .nav-toggle span:after{
transform: translate(6px);
}
.header .nav{
padding: 0 15px;
}
.header.nav ul{
list-style:none;
margin:0;
padding:0;
}
.header .nav ul li{
display: inline-block;
margin-left: 30px;
}
.header .nav ul li a {
text-decoration: none;
font-size: 16px;
font-weight: 600;
color: #ffffff;
padding: 25px 0;
display: block;
transition: all 0.5s ease;
}
.header .fixed .nav ul li a{
color: #000000;
}
.header .fixed .nav ul li a:hover,
.header .nav ul li a:hover{
color: #FF9800;
}
/* Home Section */
.home-section{
min-height: 100vh;
background-image: url('./img/moviebg.jpg');
background-size: cover;
background-position: center;
position: relative;
z-index: 1;
padding: 0 15px;
}
.home-section:before{
content: '';
position: absolute;
box-sizing: border-box;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: #000000;
opacity: 0.7;
z-index: -1;
}
.home-section .shape-01{
position:absolute;
height: 30px;
width:30px;
border: 2px solid #FF9800;
right: 5%;
top: 20%;
animation: ani01 5s linear infinite;
}
.home-section .row{
min-height: 100vh;
}
.home-section .home-content{
flex: 0 0 100%;
max-width: 100%;
text-align: center;
}
.home-section.home-content h4{
font-size: 20px;
color: #ffffff;
margin: 0;
}
.home-section .home-content h2{
font-size: 60px;
margin: 0;
color: #ffffff;
text-transform: uppercase;
font-weight: 900;
letter-spacing: 10px;
}
.home-section .scroll-down{
position: absolute;
left: 50%;
bottom: 30px;
height: 30px;
width: 30px;
margin-left: -15px;
animation: scrollDown 2s ease infinite;
}
#keyframes scrollDown{
0%,20%,50%,80%,100%{
transform: translateY(0);
}
40%{
transform: translateY(-30px);
}
60%{
transform: translateY(-15px);
}
}
.home-section .scroll-down img{
width: 25px;
display: block;
margin: 2px auto;
}
.about-section {
padding: 80px 0 0;
}
.about-section .about-img{
flex: 0 0 33.33%;
max-width: 33.33%;
padding: 0 15px;
}
.about-section .about-img .img-box{
position: relative;
}
.about-section .about-img .img-box .shape-02{
position: absolute;
height: 30px;
width: 30px;
border: 2px solid #FF9800;
left: 30px;
top: 30px;
animation: ani01 5s linear infinite;
}
.about-section .about-img .img-box img{
width: 100%;
display: block;
}
.about-section .about-content{
flex: 0 0 66.66%;
max-width: 66.66%;
padding: 0 15px;
}
.about-section .section-title{
margin-bottom: 30px;
padding: 0;
}
.about-section .about-content p{
font-size: 16px;
color: #555555;
line-height: 26px;
margin: 0;
}
.about-section .about-content .stats .stat-box{
flex: 0 0 25%;
max-width: 25%;
padding: 0 15px;
text-align: center;
margin-top: 30px;
}
.about-section.about-content.stats.stat-box h2{
font-size: 40px;
color: #000000;
margin: 0 0 5px;
}
.about-section .about-content .stats .stat-box h5{
font-size: 16px;
color: #555555;
font-weight: 600;
text-transform: uppercase;
}
.about-section .about-content .btn{
margin-top: 30px;
}
/*Categories*/
.service-section {
padding: 80px 0;
}
.service-section .service-item{
flex: 0 0 33.33%;
max-width: 33.33%;
padding: 15px;
}
.service-section .service-item-inner{
position: relative;
overflow: hidden;
}
.service-section .service-item-inner {
position: relative;
overflow: hidden;
}
.service-section .service-item-inner img{
width: 100%;
display: block;
filter:grayscale(100%);
transition: all 0.5s ease;
}
.service-section .service-item-inner:hover img{
filter:grayscale(0);
transform: scale(1.1);
}
.service-section .service-item-inner .overlay{
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: rgba(0,0,0,0.6);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.5s ease;
}
.service-section .service-item-inner:hover .overlay{
background-color: transparent;
}
.service-section .service-item-inner .overlay h3{
color: #ffffff;
font-size: 30px;
margin: 0;
text-align: center;
transition: all 0.5s ease;
text-transform: capitalize;
}
.service-section .service-item-inner .overlay:hover h4{
transform: translateX(30px);
opacity: 0;
}
/* Top-Rated*/
.work-section{
padding: 80px 0 0;
}
.work-section .work-item {
flex: 0 0 33.33%;
max-width: 33.33%;
padding: 15px;
}
.work-section .work-item-inner img{
width: 100%;
display: block;
transform: scale(1.1);
}
.work-section .work-item-inner:hover img{
filter: grayscale(100);
transform: scale(1);
}
.work-section .work-item-inner{
position: relative;
cursor: pointer;
overflow: hidden;
}
.work-section .work-item-inner .overlay{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
padding: 15px;
display: flex;
align-items: flex-end;
transition: all 0.5s ease;
background-color: rgba(0,0,0,0.6);
opacity: 0;
}
.work-section .work-item-inner:hover .overlay{
opacity: 1;
}
.work-section .work-item-inner:hover .overlay h4{
color: #ffffff;
font-size: 20px;
margin: 0;
transform: translateX(30px);
transition: all 0.5s ease;;
}
.work-section .work-item-inner:hover .overlay h4{
transform: translateX(0);
}
<body>
<!--preloader-->
<div class="preloader">
<div class="loader"></div>
</div>
<!--preloader ends-->
<!--Head section starts-->
<header class="header">
<div class="container">
<div class="row justify-content-between align-items-center">
<div class="brand-name">
Movie Mania
</div>
<div class="nav-toggle">
<span></span>
</div>
<nav class="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Categories</li>
<li>Top-Rated</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</header>
<!-- Header end -->
<!-- Home Section starts -->
<section class="home-section" id="home">
<div class="shape-01">
</div>
<div class="container">
<div class="row align-items-center">
<div class="home-content">
<h4>Download your favourite movie in just a click</h4>
<h2>Welcome to Movie Mania</h2>
</div>
</div>
<!--Scroll Down-->
<a href="#about" class="scroll-down">
<img src="https://i.postimg.cc/vHVsxYMk/arrow-down.png" alt="scroll down">
</a>
</div>
</section>
<!-- Home section end -->
<!-- About section start -->
<section class="about-section" id="about">
<div class="container">
<div class="row">
<div class="about-img">
<div class="img-box">
<div class="shape-02"></div>
<img src="https://i.postimg.cc/76tk0b58/about.jpg" width = "30" height = "auto" alt="About US">
</div>
</div>
<div class="about-content">
<div class="row">
<div class="section-title">
<h1>About Us</h1>
</div>
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
<div class="stats">
<div class="row">
<div class="stat-box">
<h2>150K+</h2>
<h5>Daily Downloads</h5>
</div>
<div class="stat-box">
<h2>2500+</h2>
<h5>Movies Available</h5>
</div>
<div class="stat-box">
<h2>1M+</h2>
<h5>Happy Clients</h5>
</div>
</div>
</div>
<!--Contact Button-->
Contact Us
</div>
</div>
</div>
</section>
<!--About us ends -->
<!--Categories section start-->
<section class="service-section" id="categories">
<div class="container">
<div class="row">
<div class="section-title">
<h1>Categories</h1>
</div>
</div>
<div class="row">
<!--categories start-->
<div class="service-item">
<div class="service-item-inner">
<img src="https://i.postimg.cc/YShKkMXd/1.jpg" alt="category 1" width = "300" height = "auto">
<div class="overlay">
<h3>Ha Noi</h3>
</div>
</div>
</div>
<div class="service-item">
<div class="service-item-inner">
<img src="https://i.postimg.cc/1z2x322s/2.jpg" alt="category 2" width = "300" height = "auto">
<div class="overlay">
<h3>Hai Phong</h3>
</div>
</div>
</div>
<div class="service-item">
<div class="service-item-inner">
<img src="https://i.postimg.cc/BQBGBhLB/3.jpg" alt="category 3" width = "300" height = "auto">
<div class="overlay">
<h3>Nam Dinh</h3>
</div>
</div>
</div>
<div class="service-item">
<div class="service-item-inner">
<img src="https://i.postimg.cc/XY2STpgZ/4.jpg" alt="category 4" width = "300" height = "auto">
<div class="overlay">
<h3>Thanh Hoa</h3>
</div>
</div>
</div>
<div class="service-item">
<div class="service-item-inner">
<img src="https://i.postimg.cc/28DDvp65/5.jpg" alt="category 5" width = "300" height = "auto">
<div class="overlay">
<h3>Vinh</h3>
</div>
</div>
</div>
<div class="service-item">
<div class="service-item-inner">
<img src="https://i.postimg.cc/jSqYgzy0/6.jpg" alt="category 6" width = "300" height = "auto">
<div class="overlay">
<h3>Hue</h3>
</div>
</div>
</div>
</div>
</div>
</section>
<!--Category section ends-->
<!--Top rated section start-->
<section class="work-section" id="top">
<div class="container">
<div class="row">
<div class="section-title">
<h1>Top-Rated Movies</h1>
</div>
</div>
<div class="row">
<div class="work-item">
<div class="work-item-inner">
<img src="https://i.postimg.cc/854hHgGV/1.jpg" width = "300" height = "auto" data-large="./img/works/large/1.png" alt="Movie 1">
<div class="overlay">
<h4>Paris</h4>
</div>
</div>
</div>
</div>
<div class="row">
<div class="work-item">
<div class="work-item-inner">
<img src="https://i.postimg.cc/jjz6DJk2/2.jpg" width = "300" height = "auto" data-large="./img/works/large/2.png" alt="Movie 1">
<div class="overlay">
<h4>Berlin</h4>
</div>
</div>
</div>
</div>
<div class="row">
<div class="work-item">
<div class="work-item-inner">
<img src="https://i.postimg.cc/sXsY7Dtc/3.jpg" width = "300" height = "auto" data-large="./img/works/large/3.jpg" alt="Movie 1">
<div class="overlay">
<h4>Vill</h4>
</div>
</div>
</div>
</div>
<div class="row">
<div class="work-item">
<div class="work-item-inner">
<img src="https://i.postimg.cc/PqGzfMy0/4.jpg" width = "300" height = "auto" data-large="./img/works/large/4.jpg" alt="Movie 1">
<div class="overlay">
<h4>Thuong Hai</h4>
</div>
</div>
</div>
</div>
<div class="row">
<div class="work-item">
<div class="work-item-inner">
<img src="https://i.postimg.cc/65mfgKvW/5.jpg" width = "300" height = "auto" data-large="./img/works/large/5.jpg" alt="Movie 1">
<div class="overlay">
<h4>Bac Kinh</h4>
</div>
</div>
</div>
</div>
<div class="row">
<div class="work-item">
<div class="work-item-inner">
<img src="https://i.postimg.cc/jSn4r1Hz/6.jpg" width = "300" height = "auto" data-large="./img/works/large/6.png" alt="Movie 1">
<div class="overlay">
<h4>Trung Khanh</h4>
</div>
</div>
</div>
</div>
</div>
</section>
<!--top rated end -->
<!--contact section start-->
<section class="contact-section" id="contact">
<div class="container">
<div class="row">
<div class="img-box">
<div class="section-title">
<h1>Contact Us</h1>
</div>
</div>
</div>
</div>
<div class="row">
<div class="contact-form">
<form class="form">
<div class="row">
<div class="left input-group">
<label>Name</label>
<input type="text" placeholder="Your Name Here" class="input-control">
</div>
<div class="right input-group">
<label>Email or Phone</label>
<input type="text" placeholder="Your Email or Phone Here" class="input-control">
</div>
</div>
<div class="row">
<div class="left input-group">
<label>Message</label>
<textarea class="input-control" placeholder="Your Message Here"></textarea>
</div>
</div>
<div class="form-btn">
<button type="button" class="btn btn-01" id="button">Send Message</button>
</div>
<div id="dialog">
I know you know this, but you are awesome. As we say au revoir to another #ResearchPride month,
</div>
</form>
</div>
</div>
<div class="row">
<div class="contact-info">
<div class="row">
<div class="info-item">
<h5>Address</h5>
<p>X5 T7 U8 USA</p>
</div>
<div class="info-item">
<h5>Phone</h5>
<p>090 8403 1789</p>
</div>
<div class="info-item">
<h5>Email</h5>
<p>maviemanie#mivie.com</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="social-links">
<img src="https://i.postimg.cc/6Q9JPCRx/facebook.png" width = "100" height = "auto" alt="facebook">
<img src="https://i.postimg.cc/zBvmz50d/twitter.png" width = "100" height = "auto" alt="twitter">
<img src="https://i.postimg.cc/7Pc4LGvS/linkedin.png" width = "100" height = "auto" alt="linkedin">
<img src="https://i.postimg.cc/rsdLJc4d/intagram.jpg" width = "200" height = "auto" alt="intagram">
</div>
</div>
</section>
<p class="copyright">© 2022 Movie Mania</p>
<!--light box start-->
<div class="lightbox">
<div class="img-box">
<div class="lightbox-close">×</div>
<img src="https://i.postimg.cc/qML93zSm/2.png" width = "100" height = "auto" class="lightbox-img" alt="img1">
<div class="lightbox-caption">
<div class="lightbox-category">
</div>
<div class="lightbox-counter">
</div>
</div>
<div class="lightbox-controls">
<div class="prev">
<img src="https://i.postimg.cc/W4XLct6F/previous.png" width = "100" height = "auto" alt="previous">
</div>
<div class="next">
<img src="https://i.postimg.cc/QdZrp2dt/next.png" width = "100" height = "auto" alt="next">
</div>
</div>
</div>
</div>
<!--light box end -->
</body>
#import url('https://fonts.googleapis.com/css?family=Raleway:300,400,700&display=swap');
body{
margin: 0;
line-height: 1.5;
background-color: #f3f2f1;
}
body,
input,textarea,
button{
font-family: 'Raleway', 'sans-serif';
font-weight: 400;
}
*{
box-sizing: border-box;
margin: 0;
}
.container{
max-width: 1170px;
margin: auto;
}
.row{
display: flex;
flex-wrap: wrap;
}
.align-items-center{
align-items: center;
}
.justify-content-between{
justify-content: space-between;
}
#keyframes ani01{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
.section-title{
flex: 0 0 100%;
max-width: 100%;
margin-bottom: 60px;
padding: 0 15px;
}
.section-title h1{
display: inline-block;
font-size: 40px;
color: #000000;
font-weight: 700;
margin: 0;
position: relative;
}
.section-title h1:before{
content: '';
box-sizing: border-box;
position: absolute;
left: 0;
bottom: -5px;
width: 80px;
height: 3px;
background-color: #ff9800;
}
.btn-01{
background-color: #ff9800;
color: #fff;
border: 2px solid transparent;
padding: 10px 35px;
border-radius: 30px;
line-height: 1.5;
cursor: pointer;
text-decoration: none;
font-size: 16px;
font-weight: 600;
display: inline-block;
transition: all 0.5s ease;
}
.btn-01:hover{
background-color: transparent;
border-color: #FF9800;
color:#ff9800;
}
.btn-01:focus{
outline: none;
}
/* preloader */
/*.preloader{
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: #111111;
z-index: 1099;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.6 ease;
}*/
.preloader.loaded{
visibility: hidden;
opacity: 0;
z-index: -99;
}
.preloader.loader{
height: 30px;
width: 30px;
border: 2px solid #FF9800;
border-right: 2px solid transparent;
border-radius: 50%;
animation: ani01 2s linear infinite;
}
/*Header*/
.header{
position: absolute;
left: 0;
top:0;
width: 99;
transition: all 0.5s ease;
}
.header .fixed{
background-color: #fff;
position: fixed;
}
.header .brand-name{
padding: 0 15px;
}
.header.brand-name a{
text-decoration: none;
font-size: 30px;
color: #fff;
text-transform: uppercase;
font-weight: 900;
letter-spacing: 2px;
transition: all 0.5s ease;
}
.header .fixed .brand-name a{
color: #0000;
}
.header .nav-toggle{
width: 40px;
height: 34px;
border: 1px solid #fff;
border-radius: 3px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.5s ease;
display: none;
}
.header .fixed .nav-toggle {
border-color: #000;
}
.header .nav-toggle span{
height: 1px;
display: block;
width: 16px;
background-color: #fff;
position: relative;
transition: all 0.5s ease;
}
.header .nav-toggle span::before,
.header .nav-toggle span::after{
content: '';
position: absolute;
left: 0;
top: 0;
height: 1px;
width: 100%;
background-color: #fff;
transition: all 0.5s ease;
}
.header .fixed .nav-toggle span,
.header .fixed .nav-toggle:before,
.header .fixed .nav-toggle::after{
background-color: #000000;
}
.header .nav-toggle span:before{
transform: translate(-6px);
}
.header .nav-toggle span:after{
transform: translate(6px);
}
.header .nav{
padding: 0 15px;
}
.header.nav ul{
list-style:none;
margin:0;
padding:0;
}
.header .nav ul li{
display: inline-block;
margin-left: 30px;
}
.header .nav ul li a {
text-decoration: none;
font-size: 16px;
font-weight: 600;
color: #ffffff;
padding: 25px 0;
display: block;
transition: all 0.5s ease;
}
.header .fixed .nav ul li a{
color: #000000;
}
.header .fixed .nav ul li a:hover,
.header .nav ul li a:hover{
color: #FF9800;
}
/* Home Section */
.home-section{
min-height: 100vh;
background-image: url('./img/moviebg.jpg');
background-size: cover;
background-position: center;
position: relative;
z-index: 1;
padding: 0 15px;
}
.home-section:before{
content: '';
position: absolute;
box-sizing: border-box;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: #000000;
opacity: 0.7;
z-index: -1;
}
.home-section .shape-01{
position:absolute;
height: 30px;
width:30px;
border: 2px solid #FF9800;
right: 5%;
top: 20%;
animation: ani01 5s linear infinite;
}
.home-section .row{
min-height: 100vh;
}
.home-section .home-content{
flex: 0 0 100%;
max-width: 100%;
text-align: center;
}
.home-section.home-content h4{
font-size: 20px;
color: #ffffff;
margin: 0;
}
.home-section .home-content h2{
font-size: 60px;
margin: 0;
color: #ffffff;
text-transform: uppercase;
font-weight: 900;
letter-spacing: 10px;
}
.home-section .scroll-down{
position: absolute;
left: 50%;
bottom: 30px;
height: 30px;
width: 30px;
margin-left: -15px;
animation: scrollDown 2s ease infinite;
}
#keyframes scrollDown{
0%,20%,50%,80%,100%{
transform: translateY(0);
}
40%{
transform: translateY(-30px);
}
60%{
transform: translateY(-15px);
}
}
.home-section .scroll-down img{
width: 25px;
display: block;
margin: 2px auto;
}
.about-section {
padding: 80px 0 0;
}
.about-section .about-img{
flex: 0 0 33.33%;
max-width: 33.33%;
padding: 0 15px;
}
.about-section .about-img .img-box{
position: relative;
}
.about-section .about-img .img-box .shape-02{
position: absolute;
height: 30px;
width: 30px;
border: 2px solid #FF9800;
left: 30px;
top: 30px;
animation: ani01 5s linear infinite;
}
.about-section .about-img .img-box img{
width: 100%;
display: block;
}
.about-section .about-content{
flex: 0 0 66.66%;
max-width: 66.66%;
padding: 0 15px;
}
.about-section .section-title{
margin-bottom: 30px;
padding: 0;
}
.about-section .about-content p{
font-size: 16px;
color: #555555;
line-height: 26px;
margin: 0;
}
.about-section .about-content .stats .stat-box{
flex: 0 0 25%;
max-width: 25%;
padding: 0 15px;
text-align: center;
margin-top: 30px;
}
.about-section.about-content.stats.stat-box h2{
font-size: 40px;
color: #000000;
margin: 0 0 5px;
}
.about-section .about-content .stats .stat-box h5{
font-size: 16px;
color: #555555;
font-weight: 600;
text-transform: uppercase;
}
.about-section .about-content .btn{
margin-top: 30px;
}
/*Categories*/
.service-section {
padding: 80px 0;
}
.service-section .service-item{
flex: 0 0 33.33%;
max-width: 33.33%;
padding: 15px;
}
.service-section .service-item-inner{
position: relative;
overflow: hidden;
}
.service-section .service-item-inner {
position: relative;
overflow: hidden;
}
.service-section .service-item-inner img{
width: 100%;
display: block;
filter:grayscale(100%);
transition: all 0.5s ease;
}
.service-section .service-item-inner:hover img{
filter:grayscale(0);
transform: scale(1.1);
}
.service-section .service-item-inner .overlay{
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: rgba(0,0,0,0.6);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.5s ease;
}
.service-section .service-item-inner:hover .overlay{
background-color: transparent;
}
.service-section .service-item-inner .overlay h3{
color: #ffffff;
font-size: 30px;
margin: 0;
text-align: center;
transition: all 0.5s ease;
text-transform: capitalize;
}
.service-section .service-item-inner .overlay:hover h4{
transform: translateX(30px);
opacity: 0;
}
/* Top-Rated*/
.work-section{
padding: 80px 0 0;
}
.work-section .work-item {
flex: 0 0 33.33%;
max-width: 33.33%;
padding: 15px;
}
.work-section .work-item-inner img{
width: 100%;
display: block;
transform: scale(1.1);
}
.work-section .work-item-inner:hover img{
filter: grayscale(100);
transform: scale(1);
}
.work-section .work-item-inner{
position: relative;
cursor: pointer;
overflow: hidden;
}
.work-section .work-item-inner .overlay{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
padding: 15px;
display: flex;
align-items: flex-end;
transition: all 0.5s ease;
background-color: rgba(0,0,0,0.6);
opacity: 0;
}
.work-section .work-item-inner:hover .overlay{
opacity: 1;
}
.work-section .work-item-inner:hover .overlay h4{
color: #ffffff;
font-size: 20px;
margin: 0;
transform: translateX(30px);
transition: all 0.5s ease;;
}
.work-section .work-item-inner:hover .overlay h4{
transform: translateX(0);
}
<body>
<!--preloader-->
<div class="preloader">
<div class="loader"></div>
</div>
<!--preloader ends-->
<!--Head section starts-->
<header class="header">
<div class="container">
<div class="row justify-content-between align-items-center">
<div class="brand-name">
Movie Mania
</div>
<div class="nav-toggle">
<span></span>
</div>
<nav class="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Categories</li>
<li>Top-Rated</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</header>
<!-- Header end -->
<!-- Home Section starts -->
<section class="home-section" id="home">
<div class="shape-01">
</div>
<div class="container">
<div class="row align-items-center">
<div class="home-content">
<h4>Download your favourite movie in just a click</h4>
<h2>Welcome to Movie Mania</h2>
</div>
</div>
<!--Scroll Down-->
<a href="#about" class="scroll-down">
<img src="https://i.postimg.cc/vHVsxYMk/arrow-down.png" alt="scroll down">
</a>
</div>
</section>
<!-- Home section end -->
<!-- About section start -->
<section class="about-section" id="about">
<div class="container">
<div class="row">
<div class="about-img">
<div class="img-box">
<div class="shape-02"></div>
<img src="https://i.postimg.cc/76tk0b58/about.jpg" width = "30" height = "auto" alt="About US">
</div>
</div>
<div class="about-content">
<div class="row">
<div class="section-title">
<h1>About Us</h1>
</div>
</div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
<div class="stats">
<div class="row">
<div class="stat-box">
<h2>150K+</h2>
<h5>Daily Downloads</h5>
</div>
<div class="stat-box">
<h2>2500+</h2>
<h5>Movies Available</h5>
</div>
<div class="stat-box">
<h2>1M+</h2>
<h5>Happy Clients</h5>
</div>
</div>
</div>
<!--Contact Button-->
Contact Us
</div>
</div>
</div>
</section>
<!--About us ends -->
<!--Categories section start-->
<section class="service-section" id="categories">
<div class="container">
<div class="row">
<div class="section-title">
<h1>Categories</h1>
</div>
</div>
<div class="row">
<!--categories start-->
<div class="service-item">
<div class="service-item-inner">
<img src="https://i.postimg.cc/YShKkMXd/1.jpg" alt="category 1" width = "300" height = "auto">
<div class="overlay">
<h3>Ha Noi</h3>
</div>
</div>
</div>
<div class="service-item">
<div class="service-item-inner">
<img src="https://i.postimg.cc/1z2x322s/2.jpg" alt="category 2" width = "300" height = "auto">
<div class="overlay">
<h3>Hai Phong</h3>
</div>
</div>
</div>
<div class="service-item">
<div class="service-item-inner">
<img src="https://i.postimg.cc/BQBGBhLB/3.jpg" alt="category 3" width = "300" height = "auto">
<div class="overlay">
<h3>Nam Dinh</h3>
</div>
</div>
</div>
<div class="service-item">
<div class="service-item-inner">
<img src="https://i.postimg.cc/XY2STpgZ/4.jpg" alt="category 4" width = "300" height = "auto">
<div class="overlay">
<h3>Thanh Hoa</h3>
</div>
</div>
</div>
<div class="service-item">
<div class="service-item-inner">
<img src="https://i.postimg.cc/28DDvp65/5.jpg" alt="category 5" width = "300" height = "auto">
<div class="overlay">
<h3>Vinh</h3>
</div>
</div>
</div>
<div class="service-item">
<div class="service-item-inner">
<img src="https://i.postimg.cc/jSqYgzy0/6.jpg" alt="category 6" width = "300" height = "auto">
<div class="overlay">
<h3>Hue</h3>
</div>
</div>
</div>
</div>
</div>
</section>
<!--Category section ends-->
<!--Top rated section start-->
<section class="work-section" id="top">
<div class="container">
<div class="row">
<div class="section-title">
<h1>Top-Rated Movies</h1>
</div>
</div>
<div class="row">
<div class="work-item">
<div class="work-item-inner">
<img src="https://i.postimg.cc/854hHgGV/1.jpg" width = "300" height = "auto" data-large="./img/works/large/1.png" alt="Movie 1">
<div class="overlay">
<h4>Paris</h4>
</div>
</div>
</div>
<div class="work-item">
<div class="work-item-inner">
<img src="https://i.postimg.cc/jjz6DJk2/2.jpg" width = "300" height = "auto" data-large="./img/works/large/2.png" alt="Movie 1">
<div class="overlay">
<h4>Berlin</h4>
</div>
</div>
</div>
<div class="work-item">
<div class="work-item-inner">
<img src="https://i.postimg.cc/sXsY7Dtc/3.jpg" width = "300" height = "auto" data-large="./img/works/large/3.jpg" alt="Movie 1">
<div class="overlay">
<h4>Vill</h4>
</div>
</div>
</div>
<div class="work-item">
<div class="work-item-inner">
<img src="https://i.postimg.cc/PqGzfMy0/4.jpg" width = "300" height = "auto" data-large="./img/works/large/4.jpg" alt="Movie 1">
<div class="overlay">
<h4>Thuong Hai</h4>
</div>
</div>
</div>
<div class="work-item">
<div class="work-item-inner">
<img src="https://i.postimg.cc/65mfgKvW/5.jpg" width = "300" height = "auto" data-large="./img/works/large/5.jpg" alt="Movie 1">
<div class="overlay">
<h4>Bac Kinh</h4>
</div>
</div>
</div>
<div class="work-item">
<div class="work-item-inner">
<img src="https://i.postimg.cc/jSn4r1Hz/6.jpg" width = "300" height = "auto" data-large="./img/works/large/6.png" alt="Movie 1">
<div class="overlay">
<h4>Trung Khanh</h4>
</div>
</div>
</div>
</div>
</div>
</section>
<!--top rated end -->
<!--contact section start-->
<section class="contact-section" id="contact">
<div class="container">
<div class="row">
<div class="img-box">
<div class="section-title">
<h1>Contact Us</h1>
</div>
</div>
</div>
</div>
<div class="row">
<div class="contact-form">
<form class="form">
<div class="row">
<div class="left input-group">
<label>Name</label>
<input type="text" placeholder="Your Name Here" class="input-control">
</div>
<div class="right input-group">
<label>Email or Phone</label>
<input type="text" placeholder="Your Email or Phone Here" class="input-control">
</div>
</div>
<div class="row">
<div class="left input-group">
<label>Message</label>
<textarea class="input-control" placeholder="Your Message Here"></textarea>
</div>
</div>
<div class="form-btn">
<button type="button" class="btn btn-01" id="button">Send Message</button>
</div>
<div id="dialog">
I know you know this, but you are awesome. As we say au revoir to another #ResearchPride month,
</div>
</form>
</div>
</div>
<div class="row">
<div class="contact-info">
<div class="row">
<div class="info-item">
<h5>Address</h5>
<p>X5 T7 U8 USA</p>
</div>
<div class="info-item">
<h5>Phone</h5>
<p>090 8403 1789</p>
</div>
<div class="info-item">
<h5>Email</h5>
<p>maviemanie#mivie.com</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="social-links">
<img src="https://i.postimg.cc/6Q9JPCRx/facebook.png" width = "100" height = "auto" alt="facebook">
<img src="https://i.postimg.cc/zBvmz50d/twitter.png" width = "100" height = "auto" alt="twitter">
<img src="https://i.postimg.cc/7Pc4LGvS/linkedin.png" width = "100" height = "auto" alt="linkedin">
<img src="https://i.postimg.cc/rsdLJc4d/intagram.jpg" width = "200" height = "auto" alt="intagram">
</div>
</div>
</section>
<p class="copyright">© 2022 Movie Mania</p>
<!--light box start-->
<div class="lightbox">
<div class="img-box">
<div class="lightbox-close">×</div>
<img src="https://i.postimg.cc/qML93zSm/2.png" width = "100" height = "auto" class="lightbox-img" alt="img1">
<div class="lightbox-caption">
<div class="lightbox-category">
</div>
<div class="lightbox-counter">
</div>
</div>
<div class="lightbox-controls">
<div class="prev">
<img src="https://i.postimg.cc/W4XLct6F/previous.png" width = "100" height = "auto" alt="previous">
</div>
<div class="next">
<img src="https://i.postimg.cc/QdZrp2dt/next.png" width = "100" height = "auto" alt="next">
</div>
</div>
</div>
</div>
<!--light box end -->
</body>
Trying to position my image without changing the position. When the wind text is turned off(js not working in codepen btw. ) ie not displayed under the temperature, the weatherimage is moving up. I tried to position this 'absolute' but not helping.
I am using reactjs to display the Widget on the right:
<div className="widget">
<div className="row">
<div className="col-lg-12 title">{title}</div>
</div>
<div className="row widgettop">
<div className="col-lg-6 topicon">
<img src={'http://openweathermap.org/img/w/' + icon + '.png'}></img>
</div>
<div className="col-lg-6 topdegrees">
{location}
<div className='degrees'>{degrees}°</div>
{wind && <div>Wind{' '}<span className='wind'>{speed}</span> {unitsType === 'metric' ? <span>km/h</span> : <span>mph</span>}</div>}
</div>
</div>
</div>
Based on the state.wind I display the wind details or not.
How can I keep the image in position when the Wind text/ other content is removed/changed?
codepen here
You can toggle the visibility property for the wind area using JS. The image holds its place when I added visibility: hidden to say #windArea - you can toggle between visible and hidden:
body {
margin: 0;
padding: 0;
font-family: sans-serif;
font-family: Lucida Grande;
}
input,
label {
display: block;
}
#tempArea input,
#tempArea label {
display: inline;
margin-bottom: 10px;
}
#windArea input,
#windArea label {
display: inline;
margin-bottom: 10px;
}
div#main {
background: #F2F2F2;
padding: 1vw 2vw;
width: 48%;
}
.spaceradio {
margin-right: 10px;
}
img {
width: 84% !important;
height: 100% !important;
margin-left: 20%;
position: relative;
}
.divider {
border-left: 1px solid lightgrey;
}
.widget {
box-shadow: 1px 2px 1px lightgray;
background-color: white;
margin-left: 10px;
height: 100%;
width: 90%;
position: absolute;
}
.title {
margin-left: 30px;
padding: 10px;
position: absolute;
}
.left {
margin-left: 20px;
padding: 10px;
vertical-align: top;
}
.text {
height: 40px;
width: 100%;
}
.top {
margin-top: 15px;
}
.widgettop {
margin-top: 15px;
}
.topdegrees {
margin-top: 40px;
}
.topicon {
margin-top: 20px;
}
.degrees {
font-size: xx-large;
font-weight: bold;
}
.wind {
font-size: small;
font-weight: bold;
}
.hline {
border-top: 4px solid blue;
padding: 0 !important;
margin-bottom: 10px;
width: 48%;
}
/* .abs
{
position: absolute;
} */
#windArea { /* ADDED */
visibility: hidden;
}
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="left">
<hr class="container hline">
<div id="main" class="container border">
<div class="row">
<div class="col-lg-6 top"><label for="title">Title</label><input id="title" type="text" placeholder=" Title of widget" name="title" class="text" value="">
<div class="top"><label for="radio">Temperature</label>
<div id="tempArea" class="row"><span class="col-lg-6"><input type="radio" id="one" class="spaceradio" value="metric" checked=""><label for="one">℃</label></span><span class="col-lg-6"><input type="radio" id="two" class="spaceradio" value="imperial"><label for="two">℉</label></span></div>
</div>
<div class="top"><label for="radio">Wind</label>
<div id="windArea" class="row"><span class="col-lg-6"><input type="radio" id="one" class="spaceradio" value="true"><label for="one">On</label></span><span class="col-lg-6"><input type="radio" id="two" class="spaceradio" value="false" checked=""><label for="two">Off</label></span></div>
</div>
</div>
<div class="col-lg-6 divider top">
<div class="widget">
<div class="row">
<div class="col-lg-12 title">FDSFSDFDSFDSFDS</div>
</div>
<div class="row widgettop">
<div class="col-lg-6 topicon"><img src="http://openweathermap.org/img/w/09d.png"></div>
<div class="col-lg-6 topdegrees abs">Paramatta
<div class="degrees">58.12°</div>
<div>Wind <span class="wind">23.04</span> <span>mph</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
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 created a grid of images with a hover effect. When you hover over the images it zooms in. It is working fine on safari but when I try it out on google chrome the images disappear when you hover over them instead of the zoom effect. I have provided my code below.
HTML :
<body>
<div class="message0">
<img
src="https://cdn.shopify.com/s/files/1/1312/0159/files/shutterstock_134800463.jpg?11249922432265530300" />
Wakeup And Makeup <img
src="https://cdn.shopify.com/s/files/1/1312/0159/files/shutterstock_134800463.jpg?11249922432265530300" />
</div>
<div class="masonry">
<div class="fader0">
<div class="item">
<img
src="https://cdn.shopify.com/s/files/1/1312/0159/files/shutterstock_113634307.jpg?3027373344113436523" />
</div>
</div>
<div class="my-wrapper">
<div class="item">
<a href="https://vipera-nyc.myshopify.com/collections/eyeshadow"><img
src="https://cdn.shopify.com/s/files/1/1312/0159/files/Vipera_cae46bcd-7bd4-4ed6-ab7d-5970f5d6fa44.jpg?5440451544572147338" /></a>
</div>
</div>
<div class="fader1">
<div class="item">
<img
src="https://cdn.shopify.com/s/files/1/1312/0159/files/shutterstock_313764047.jpg?453596164489734443" />
</div>
</div>
<div class="item">
<img
src="https://cdn.shopify.com/s/files/1/1312/0159/files/HelloG-5.jpg?7272790211589801407" />
</div>
<div class="fader">
<div class="item">
<img
src="https://cdn.shopify.com/s/files/1/1312/0159/files/EYEScool.jpg?3027373344113436523" />
</div>
</div>
<div class="item">
<img
src="https://cdn.shopify.com/s/files/1/1312/0159/files/shutterstock_91130072.jpg?3027373344113436523" />
</div>
<div class="item">
<img
src="https://cdn.shopify.com/s/files/1/1312/0159/files/Makeup-2.jpg?7468684895134417704" />
</div>
<div class="my-wrapper">
<div class="item">
<a href="https://twitter.com/ViperaNYC"><img
src="https://cdn.shopify.com/s/files/1/1312/0159/files/Tweet_us_your_look.jpg?453596164489734443" /></a>
</div>
</div>
<div class="item">
<img
src="https://cdn.shopify.com/s/files/1/1312/0159/files/glosssssss_5c5c5520-ea20-4c78-8830-e633e5bb1083.jpg?1992342090983963689" />
</div>
<div class="item">
<div class="my-wrapper">
<a
href="https://vipera-nyc.myshopify.com/collections/best-selling-products">
<img
src="https://cdn.shopify.com/s/files/1/1312/0159/files/Best_Selling_Products-3.jpg?887070778965157300" />
</a>
</div>
</div>
</div>
</body>
CSS:
.item img { /* Masonry bricks or child elements */
background-color: #eee;
display: inline-block;
margin: 0 0 1em;
width: 100%;
}
.itemkat img {
background-color: #eee;
display: inline-block;
margin: 0 0 1em;
width:100%;
}
.grid {
column-count: 3;
-webkit-column-gap: -10px; /* Chrome, Safari, Opera */
-moz-column-gap: -10px; /* Firefox */
column-gap: -10px;
line-height:100%;
}
.grid-item{
background-color: #eee;
display: inline-block;
margin: 0 0 1em;
width: 100%;
}
.message0
{
display:center;
font-size:30px;
}
.my-wrapper {
background-color: #f2f2f2;
}
.my-wrapper:hover img {
opacity:0.2;
}
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
.item {
position: relative;
/* margin: 0%; /*makes left margin closer */
overflow: hidden;
width: 470px;
}
.item img {
max-width: 100%; /*reduces space between images */
overflow: hidden;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.item:hover img {
overflow: hidden;
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.message0 {
font-family: Brush Script MT ;
font-size:120px;
text-align:center;
color:black;
letter-spacing: 5px;
}
I have provided a fiddle. ***IT WORKS ON OTHER INTERNET BROWSERS BUT NOT GOOGLE CHROME WHICH IS THE PROBLEM****
https://jsfiddle.net/getMecoffee56/o11hmwek/1/
I currently have an event tracker made using html and css. My issue is that I would like to get ride of display: flex; due to browser-compatibility issues. Is there an alternative to achieve the same result? I tried using display:inline-block because without flex all steps were coming in different lines.
HTML:
<div class="container">
<div class="row event">
<div class="col-xs-3 event-step">
<p class="event-stepnum">Step 1</p>
<div class="progress">
<div class="progress-bar"></div>
</div>
</div>
<div class="col-xs-3 event-step complete">
<p class="event-stepnum">Step 2</p>
<div class="progress">
<div class="progress-bar"></div>
</div>
</div>
<div class="col-xs-3 event-step">
<p class="event-stepnum">Step 3</p>
<div class="progress">
<div class="progress-bar"></div>
</div>
</div>
</div>
</div>
CSS:
.event > .event-step {
padding: 0;
position: relative;
}
.event > .event-step .event-stepnum {
color: #595959;
font-size: 16px;
margin-bottom: 5px;
}
.steps .step-on,
.steps .step-done {
background-color: #1b7e28;
color: #1b7e28;
border: 1px solid transparent;
}
.progress {
position: relative;
border-radius: 0px;
height: 5px;
box-shadow: none;
margin: 20px 0;
}
.progress > .progress-bar {
width: 0px;
box-shadow: none;
background: #fbe8aa;
}
.event-step.complete > .progress > .progress-bar {
width: 100%;
}
.row {
display:flex;
}
JSFiddle Demo
Just replace the display:flex by display:inline-block and give your step divs a fixed width:
.event > .event-step {
padding: 0;
position: relative;
width: 200px;
}
.row {
display: inline-block;
}
https://jsfiddle.net/onk2cqhg/