Slider in Apple store style - javascript

I know I would show some effort in this but I have no idea... I'm trying to make a slider like the one in the store section of Apple website.
https://www.apple.com/store
The slider has to be aligned to the left side of the grid when the page is loaded and then it has to go full width when the user scrolls it. I can't find any solution. Can someone point me to the right direction?

there is a simple solution in this codepen:
https://codepen.io/ezadoo/pen/VwWEZBZ
var swiper = new Swiper(".snapslider-overflow", {
cssMode: true,
speed: 1000,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
},
//wrapperClass: "snapslider-scroll",
//slideClass: "snapslider-card",
slidesPerView: "auto",
mousewheel: true,
keyboard: true,
});
#import url("https://fonts.googleapis.com/css?family=IBM+Plex+Sans:100,200,300,400,500,600,700&display=swap");
$mobile-break: 668px;
$desktop-break: 1024px;
:root {
--feat-leftpadding: 5rem;
#media only screen and (min-width: $desktop-break) {
//--feat-leftpadding: 6.5rem;
}
}
body {
margin: 0;
padding: 0;
background-color: #f5f5f7;
}
.ezd-feature-headline {
padding-left: var(--feat-leftpadding);
max-width: 30rem;
font-family: "IBM Plex Sans", sans-serif;
line-height: 1.15em;
letter-spacing: -0.03em;
font-size: 1.25rem;
#media only screen and (min-width: $desktop-break) {
font-size: 1.75rem;
max-width: 45rem;
}
.headline-primary {
color: rgba(0, 0, 0, 1);
}
.headline-secondary {
color: rgba(128, 128, 128, 1);
}
&.has-big {
font-size: 2rem;
#media only screen and (min-width: $desktop-break) {
font-size: 3rem;
}
}
}
.snapslider-card {
font-size: 1.25rem;
display: block;
// background-color: red;
width: 14.5em;
height: 18.5em;
//border: 1px solid black;
padding-top: 0.5em;
padding-bottom: 0.5em;
padding-right: 0.75em;
//float: left;
flex-grow: 0;
flex-shrink: 0;
scroll-snap-align: start;
#media only screen and (min-width: $desktop-break) {
font-size: 1.75rem;
}
&:nth-child(even) {
// background-color: blue;
}
&:first-child {
padding-left: var(--feat-leftpadding);
}
&:last-child {
//padding-right: 0;
}
//box-sizing: border-box;
.card-content {
border-radius: 0.75em;
background: #ffffff;
width: 100%;
height: 100%;
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}
}
.ezd-snapslider {
margin-bottom: 2rem;
position: relative;
&::-webkit-scrollbar {
//display: none;
}
.snapslider-overflow {
//padding-left: 6rem;
//width: calc(100% - 6rem);
//overflow: visible;
&::-webkit-scrollbar {
//display: none;
}
}
.snapslider-scroll {
display: flex;
flex-wrap: nowrap;
height: auto;
width: auto;
//padding-left: 6rem;
//overflow: visible;
overflow-x: scroll;
scroll-snap-type: x mandatory;
//scroll-padding: 0 var(--feat-leftpadding);
scroll-padding: 0 5rem;
-ms-overflow-style: none;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
}
}
<script src="https://unpkg.com/swiper#8/swiper-bundle.min.js"></script>
<div class="ezd-content">
<h2 class="ezd-feature-headline has-big">
<span class="headline-primary">Slider.</span>
<span class="headline-secondary">This is for demonstration purposes, to show the need of scroll-padding.</span>
</h2>
<h3 class="ezd-feature-headline">
<span class="headline-primary">Another Line.</span>
<span class="headline-secondary">Simply here for more text.</span>
</h3>
<div class="ezd-snapslider">
<div class="snapslider-wrapper">
<div class="snapslider-overflow">
<div class="snapslider-scroll swiper-wrapper">
<div class="snapslider-card swiper-slide">
<div class="card-content"></div>
</div>
<div class="snapslider-card swiper-slide">
<div class="card-content"></div>
</div>
<div class="snapslider-card swiper-slide">
<div class="card-content"></div>
</div>
<div class="snapslider-card swiper-slide">
<div class="card-content"></div>
</div>
<div class="snapslider-card swiper-slide">
<div class="card-content"></div>
</div>
<div class="snapslider-card swiper-slide">
<div class="card-content"></div>
</div>
<div class="snapslider-card swiper-slide">
<div class="card-content"></div>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</div>
</div>
</div>

Related

Navigation menu sidebar not closing with click on document

I made the header menu of my website become a sidebar with the screen width. Everything was working fine, the menu could be toggled by clicking the icon. But then i noticed the majority of websites had this property that the menu would close if the user clicks anywhere in the screen. I tryed everything i could but everythime i add the event listener to the code (to remove the class that makes the menu visible), the onclick event that adds the class stops working.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio.</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#300;400;700&display=swap" rel="stylesheet">
<link rel="apple-touch-icon" sizes="180x180" href="Favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="Favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="Favicon/favicon-16x16.png">
<link rel="shortcut icon" href="Favicon/favicon.ico" type="image/x-icon" />
<link rel="manifest" href="Favicon/site.webmanifest">
<link rel="stylesheet" href="https://unpkg.com/boxicons#latest/css/boxicons.min.css">
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
</head>
<body>
<!-- Header -->
<header id="header">
<div id="container">
<nav id="nav-bar">
Portfolio.
<ul id="nav-menu">
<div id="nav"><li><a id="link" href="#about-me">Sobre mim</a></li></div>
<div id="nav"><li><a id="link" href="#experience">Experiência</a></li></div>
<div id="nav"><li><a id="link" href="#projects">Projetos</a></li></div>
<div id="nav"><li><a id="link" href="#habilities">Competências</a></li></div>
<div id="nav"><button id="resume-btn">Currículo</button></li></div>
</ul>
<div class="menu-icon">
<h3 onclick="handleMenuToggle()">&#9776</h3>
</div>
</nav>
</div>
</header>
<!-- Sections -->
<main>
<section id="hero"> <!-- Main section -->
<div id="hero-txt">
<h2>
Seja bem vindo, eu sou
</h2>
<h1>
Yan Calvo
</h1>
<p>
Estudante de Ciência da computação e desenvolvedor web
</p>
<div class="social">
<i class='bx bxl-linkedin' ></i>
<i class='bx bxl-github' ></i>
</div>
</div>
</section>
<section id="about-me"> <!-- About section -->
<div id="txt-container" class="container reveal fade-left">
<h2>Sobre mim</h2>
<p>
Sou estudante de Ciência da computação, também
focado em aprender tecnologias de forma
independente. No momento me encontro dedicado a
aprimorar as minhas habilidades através da
experiência profissional e contato com outros
profissionais dedicados.<br><br>
O que mais me entusiasma em trabalhar com programação é poder projetar e criar coisas que tenham propósito e resolvam problemas reais.
Apoiar-se na pesquisa e percepção do cliente, encontrar as formas certas e dinâmicas de resolver determinados problemas, aprender com o processo e, em seguida, iterar e melhora-lo é a chave para um ótimo design.
</p>
</div>
<div class="container reveal fade-left">
<h4 id="quote">
“<br>
Knowledge has to be improved, challenged, and increased constantly, or it vanishes.<br>
”
</h4>
<h5>― Peter Drucker</h5>
</div>
</section>
<section id="experience"> <!-- Experience section -->
<div id="txt-container" class="container reveal fade-right">
<h2>Onde trabalhei </h2>
<p>
Ainda em busca de oportunidades profissionais
</p>
</div>
</section>
<section id="projects"> <!-- Projects section -->
<div id="txt-container" class="container reveal fade-left">
<h2>Projetos</h2>
<p>Trabalhos pessoais</p>
</div>
<div id="portfolio-content" class="container reveal fade-left">
<div class="col">
<img src="Img/work3.jpg">
<div class="layer">
<h3>Web Design</h3>
<h5>Popup</h5>
</div>
</div>
<div class="col">
<img src="Img/work3.jpg">
<div class="layer">
<h3>Web Design</h3>
<h5>Popup</h5>
</div>
</div>
<div class="col">
<img src="Img/work3.jpg">
<div class="layer">
<h3>Web Design</h3>
<h5>Popup</h5>
</div>
</div>
<div class="col">
<img src="Img/work3.jpg">
<div class="layer">
<h3>Web Design</h3>
<h5>Popup</h5>
</div>
</div>
<div class="col">
<img src="Img/work3.jpg">
<div class="layer">
<h3>Web Design</h3>
<h5>Popup</h5>
</div>
</div>
<div class="col">
<img src="Img/work3.jpg">
<div class="layer">
<h3>Web Design</h3>
<h5>Popup</h5>
</div>
</div>
</div>
</section>
<section id="habilities"> <!-- Contact section -->
<div id="txt-container" class="container reveal fade-right">
<h2>Competências</h2>
<div id="habilities-container">
<div id="hability-icons-container"></div>
<img id="hability-icon" src="Img/icons8-javascript-144.png" alt="">
<img id="hability-icon" src="Img/icons8-html-5-144.png" alt="">
<img id="hability-icon" src="Img/icons8-css3-144.png" alt="">
<img id="hability-icon" src="Img/icons8-git-144.png" alt="">
<img id="hability-icon" src="Img/icons8-github-128.png" alt="">
<div id="habilities-description"></div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer id="footer">
<div id="footer-copyright">
<h6>Projetado por Yan Calvo</h6>
</div>
<div id="social">
<h6>Email para contato: yancalvo#gmail.com</h6>
</div>
</footer>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
scroll-padding-top: 70px;
}
body {
position: relative;
background-color: #ece7e1;
}
html, body {
overflow-x: hidden;
}
/* Header */
header {
position: fixed;
top: 0;
width: 100%;
background-color: rgba(27,26,33,255);
z-index: 200;
}
#container {
width: 1800px;
margin: auto;
}
#nav-bar {
width: 95%;
margin: auto;
min-height: 70px;
display: flex;
justify-content: space-between;
align-items: center;
}
#nav-brand {
color: white;
text-decoration: none;
font-size: 30px;
}
#nav-menu {
display: flex;
justify-content: space-between;
align-items: center;
}
#nav {
margin: auto 30px;
}
.menu-icon {
display: none;
}
#link {
margin-right: 15px;
color: white;
text-decoration: none;
transition: color 0.15s;
}
#link:hover {
color: gray;
font-style: italic;
}
#resume-btn {
width: 100px;
font-weight: bold;
font-size: 15px;
color: rgba(27,26,33,255);
background-color: #ece7e1;
border-radius: 23.5px;
border-style: solid;
border-color: #ece7e1;
padding: 10px;
cursor: pointer;
transition: color 0.15s, border-color 0.15s, width 1.0s;
}
#resume-btn:hover {
width: 150px;
}
/* Sections */
main {
padding-top: 70px;
}
section {
padding: 0px 100px;
}
#hero {
position: relative;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
grid-gap: 4rem;
}
.social a {
color: white;
width: 35px;
height: 35px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(27,26,33,255);
font-size: 17px;
margin-right: 22px;
margin-bottom: 30px;
margin-top: 20px;
}
.social a:hover{
transform: scale(1.1);
transition: .5s;
}
#about-me {
background-color: #191919;
min-height: 500px;
padding-top: 40px;
margin-bottom: 100px;
display: grid;
grid-template-columns: repeat(2, 2fr);
grid-gap: 2rem;
white-space: normal;
}
#experience {
min-height: 300px;
padding-top: 40px;
margin-bottom: 100px;
display: flex;
justify-content: center;
text-align: center;
white-space: normal;
}
#projects {
background-color: #191919;
min-height: 800px;
padding-top: 40px;
margin-bottom: 100px;
display: flex;
flex-direction: column;
text-align: center;
align-items: center;
grid-gap: 2rem;
}
#portfolio-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, auto));
grid-gap: 2rem;
align-items: center;
margin-top: 5rem;
text-align: center;
cursor: pointer;
}
.layer{
background: transparent;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
border-radius: 12px;
transition: all .40s;
}
.layer:hover{
background: linear-gradient(rgba(0,0,0,0.5) 0%, #191919);
}
.layer h3{
position: absolute;
width: 100%;
font-size: 25px;
font-weight: 500;
color: white;
bottom: 0;
left: 50%;
transform: translateX(-50%);
opacity: 0;
transition: all .40s;
margin-bottom: 7px;
}
.layer:hover h3{
bottom: 52%;
opacity: 1;
}
.layer h5{
position: absolute;
width: 100%;
font-size:17px;
font-weight: 500;
color: white;
bottom: 0;
left: 50%;
transform: translateX(-50%);
opacity: 0;
transition: all .40s;
}
.layer:hover h5{
bottom: 48%;
opacity: 1;
}
.col {
position: relative;
}
.col img {
max-width: 100%;
width: 550px;
height: auto;
object-fit: cover;
border-radius: 12px;
}
#habilities {
min-height: 500px;
width: 90%;
margin-left: auto;
margin-right: auto;
display: flex;
justify-content: center;
text-align: center;
}
li {
list-style: none;
}
h1 {
font-size: 90px;
color: rgba(27,26,33,255);
margin: 10px 0px 25px;
}
h2 {
font-size: 30px;
margin-bottom: 60px;
}
#about-me h2,
#projects h2
{
color: #ece7e1;
}
#experience h2,
#habilities h2 {
color: #191919;
}
#habilities-container {
display: flex;
flex-direction: column;
align-items: ;
}
#hability-icon {
width: 144px;
height: 144px;
transition: all 0.8s;
}
#hability-icon:hover {
height: 155px;
width: 155px;
}
h6 {
font-size: 20px;
color: white;
}
h4 {
font-size: 40px;
color: #ece7e1;
font-style: italic;
}
h5 {
color: rgba(27,26,33,255);
}
p {
color: gray;
text-align: justify;
}
#footer {
background-color: #191919;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 100px;
}
.reveal {
position: relative;
opacity: 0;
}
.reveal.active {
opacity: 1;
}
.active.fade-left {
animation: fade-left 0.5s ease-in;
}
.active.fade-right {
animation: fade-right 0.5s ease-in;
}
#keyframes fade-left {
0% {
transform: translateX(-100px);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
#keyframes fade-right {
0% {
transform: translateX(100px);
opacity: 0;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
#media(max-width:1800px) {
#container {
width: 100%;
}
}
#media only screen and (max-width: 1015px) {
#nav-menu {
position: fixed;
top: 70px;
right: -100%;
display: block;
background-color: rgba(27,26,33,255);
margin: 0;
height: 100%;
-webkit-box-shadow: 1px 6px 0px 6px rgba(0,0,0,0.13);
-moz-box-shadow: 1px 6px 0px 6px rgba(0,0,0,0.13);
box-shadow: 1px 6px 0px 6px rgba(0,0,0,0.13);
width: 250px;
transition: all 0.3s ease;
}
#nav-menu.show-nav {
right: 0;
}
#nav {
text-align: center;
margin: 20px auto;
}
.menu-icon {
color: white;
display: block;
margin: auto 0;
padding: 0 20px;
font-size: 30px;
cursor: pointer;
}
#brush-img {
display: none;
}
#about-me {
display: flex;
flex-direction: column;
}
}
Javascript:
//Toggle sidebar
const navContainer = document.getElementById('nav-menu')
function handleMenuToggle() {
navContainer.classList.add('show-nav')
}
document.onclick = function(e) {
if (e.target.id !== 'nav-menu' && e.target.id !== 'show-nav') {
navContainer.classList.remove('show-nav')
}
}
//Scroll animation
function reveal() {
var reveals = document.querySelectorAll(".reveal");
for (var i = 0; i < reveals.length; i++) {
var windowHeight = window.innerHeight;
var elementTop = reveals[i].getBoundingClientRect().top;
var elementVisible = 150;
if (elementTop < windowHeight - elementVisible) {
reveals[i].classList.add("active");
} else {
reveals[i].classList.remove("active");
}
}
}
window.addEventListener("scroll", reveal);
I just cannot make it work, i'm probably missing something or making some ugly mistakes in the structure of the code.
By taking a look at : this question you could try to do it this way : create a navbar sublcass called like :
navbar.open , and assign it these css properties :
/* If you use an id use #id_name or .classname if you use a class
*/
#id_of_navbar.open {
right: 0;
}
/* OR
.classname.open {
right: 0;
}
*/
And then add to your javascript :
var yournavbar = document.getElementById("id_of_navbar")
//Close menu when document is clicked anywhere
document.onclick = function () {
yournavbar.classList.remove("open");
};
And if you want your navbar to close if you click a part of it, just add this function :
//stop propagation on the side nav element
yournavbar.onclick = function(e) {
e.stopPropagation()
}
I tried that solution and it worked for me so I really hope it helps! Let me know if you are still trying to make it work without success despite this solution.

my carousel items are gone on the webpage but it worked before adding some new things

I made a carousel with bootstrap (v5) and modified it to be 3 besides each other on large screen and only one on small screens. It worked just fine, but after adding some javascript and google analytics and coockies, the carousel items dissapear on small screens.
html part of the carousel:
<section id="diensten">
<h2>diensten</h2>
<div id="carouselExample" class="carousel">
<div class="carousel-inner">
<div class="carousel-item">
<div class="card">
<div class="img-wrapper">
<img src="images/webhosting.svg" class="card-img-top" alt="man who has an idea">
</div>
<div class="card-body">
<p class="card-title my-3">hosting</p>
<div>
<button onclick="openHosting()" class="extra-btn" type="button"><i class="fa-solid fa-plus"></i><span>more</span></button>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="card">
<div class="img-wrapper">
<img src="images/webdesign.svg" class="card-img-top" alt="man who has an idea">
</div>
<div class="card-body">
<p class="card-title my-3">webdesign</p>
<div>
<button onclick="openWebdesign()" class="extra-btn" type="button"><i class="fa-solid fa-plus"></i><span>more</span></button>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="card">
<div class="img-wrapper">
<img src="images/photography.png" class="card-img-top" alt="man who has an idea">
</div>
<div class="card-body">
<p class="card-title my-3">fotografie</p>
<div>
<button onclick="openFotografie()" class="extra-btn" type="button"><i class="fa-solid fa-plus"></i><span>more</span></button>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="card">
<div class="img-wrapper">
<img src="images/domain_name.png" class="card-img-top" alt="man who has an idea">
</div>
<div class="card-body">
<p class="card-title my-3">domein naam</p>
<div>
<button onclick="openDomeinNaam()" class="extra-btn" type="button"><i class="fa-solid fa-plus"></i><span>more</span></button>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="card">
<div class="img-wrapper">
<img src="images/seo.png" class="card-img-top" alt="man who has an idea">
</div>
<div class="card-body">
<p class="card-title my-3">SEO</p>
<div>
<button onclick="openSeo()" class="extra-btn" type="button"><i class="fa-solid fa-plus"></i><span>more</span></button>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="card">
<div class="img-wrapper">
<img src="images/undraw_maintenance_re_59vn.svg" class="card-img-top" alt="man who has an idea">
</div>
<div class="card-body">
<p class="card-title my-3">onderhoud</p>
<div>
<button onclick="openOnderhoud()" class="extra-btn" type="button"><i class="fa-solid fa-plus"></i><span>more</span></button>
</div>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</section>
css part of the carousel (for small screens):
/* styling for the 'diensten' section */
h2 {
font-size: 18px;
text-transform: uppercase;
text-align: center;
margin: 50px 0;
}
.card {
margin: 0 1em;
border: none;
max-width: 400px;
}
.card img {
max-width: 100%;
max-height: 100%;
}
.carousel-inner {
padding: 1em;
}
.img-wrapper {
max-width: 100%;
height: 65vw;
display: flex;
justify-content: center;
align-items: center;
}
.card-title {
font-size: 20px;
font-weight: 100;
text-align: center;
text-transform: uppercase;
margin-bottom: 10px;
}
.carousel-control-prev, .carousel-control-next {
width: 5vh;
height: 5vh;
background-color: #0D283C;
border-radius: 50%;
top: 50%;
transform: translateY(-50%);
}
.card-body div {
text-align: center;
}
.extra-btn {
border: none;
border-radius: 100%;
padding: 6px 10px;
background-color: #0D283C;
color: white;
margin: auto;
transition: 0.2s;
}
.extra-btn:hover {
background-color: #3461AB;
}
.extra-btn span {
display: none;
}
/* extra info screens */
.overlay {
position: fixed;
width: 100%;
/* Full width (cover the whole page) */
height: 100%;
/* Full height (cover the whole page) */
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .4);
}
.extra-info-card {
padding: 10px;
text-align: center;
border-radius: 30px;
margin: auto;
max-width: 600px;
background-color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.extra-info-card>div {
position: relative;
}
.close-btn {
border: none;
border-radius: 100%;
padding: 3px 5px;
background-color: #0D283C;
color: white;
font-size: 2px;
transition: .2s;
}
.close-btn:hover {
background-color: #3461AB;
}
.close-btn span {
display: none;
}
.extra-info-card h1 {
text-transform: uppercase;
margin: 0;
}
.extra-info-card p {
margin: 15px auto;
max-width: 90%;
font-size: 14px;
font-weight: 100;
}
.extra-info-card img {
display: none;
margin: auto;
max-width: 30%;
}
.hidden {
display: none;
transition: .2s;
}
css for the bigger screens
#media screen and (min-width: 576px) {
.carousel-inner {
display: flex;
}
.carousel-item {
display: block;
margin-right: 0;
flex: 0 0 calc(100%/3);
}
.img-wrapper {
height: 23vw;
}
.close-btn {
padding: 6px 10px;
font-size: 10px;
}
}
#media screen and (min-width: 768px) {
h2 {
font-size: 25px;
}
header section:first-child img {
width: 100px;
}
.nav-item {
font-size: 30px;
}
.text-part {
text-align: left;
}
header section:last-child img {
display: block;
}
section:nth-child(2) h1 {
font-size: 24px;
}
section:nth-child(2) a {
font-size: 15px;
}
#over-ons, #diensten, #proces, #contact, #landing {
max-width: 90%;
margin: 150px auto;
}
#over-ons h2 {
margin-bottom: 10px;
padding-left: 5px;
text-align: left;
border-left: 3px solid #0D283C;
}
#over-ons p {
text-align: left;
font-size: 16px;
}
#over-ons img {
display: block;
}
#proces img {
display: block;
width: 75%;
margin: auto;
}
#landing {
height: 100%;
}
.close-btn {
position: absolute;
top: 10px;
right: 10px;
}
.extra-info-card img {
display: block;
}
#proces h3 {
font-size: 18px;
}
#proces p {
font-size: 16px;
}
}
#media screen and (min-width:992px) {
#over-ons, #diensten, #proces, #contact, #landing {
max-width: 992px;
margin: 150px auto;
}
section:nth-child(2) h1 {
font-size: 30px;
}
section:nth-child(2) a {
font-size: 20px;
}
}
The 2 different javascript files (make it 3 items & extra info button functionality)
const multiItemCarousel = document.querySelector('#carouselExample')
if (window.matchMedia("(min-width:576px)").matches) {
const carousel = new bootstrap.Carousel(multiItemCarousel, {
interval: false
})
var carouselWidth = $('.carousel-inner')[0].scrollWidth;
var cardWidth = $('.carousel-item').width();
var scrollPosition = 0;
$('.carousel-control-next').on('click', function () {
if (scrollPosition < (carouselWidth - (cardWidth * 4))) {
scrollPosition = scrollPosition + cardWidth;
$('.carousel-inner').animate({ scrollLeft: scrollPosition }, 600);
};
});
$('.carousel-control-prev').on('click', function () {
if (scrollPosition > 0) {
scrollPosition = scrollPosition - cardWidth;
$('.carousel-inner').animate({ scrollLeft: scrollPosition }, 600);
};
});
};
function openHosting() {
console.log("open")
var hosting = document.getElementById("hosting");
hosting.classList.remove("hidden")
}
function openWebdesign() {
var webDesign = document.getElementById("webdesign");
webDesign.classList.remove("hidden")
}
function openFotografie() {
var fotografie = document.getElementById("fotografie");
fotografie.classList.remove("hidden")
}
function openDomeinNaam() {
var domeinNaam = document.getElementById("domein-naam");
domeinNaam.classList.remove("hidden")
}
function openSeo() {
var seo = document.getElementById("seo");
seo.classList.remove("hidden")
}
function openOnderhoud() {
var onderhoud = document.getElementById("onderhoud");
onderhoud.classList.remove("hidden")
}
//alle functies voor het sluiten van de verschillende extra info secties
function closeHosting() {
console.log("close")
var hosting = document.getElementById("hosting")
hosting.classList.add("hidden")
}
function closeWebdesign() {
var webDesign = document.getElementById("webdesign");
webDesign.classList.add("hidden")
}
function closeFotografie() {
var fotografie = document.getElementById("fotografie");
fotografie.classList.add("hidden")
}
function closeDomeinNaam() {
var domeinNaam = document.getElementById("domein-naam");
domeinNaam.classList.add("hidden")
}
function closeSeo() {
var seo = document.getElementById("seo");
seo.classList.add("hidden")
}
function closeOnderhoud() {
var onderhoud = document.getElementById("onderhoud");
onderhoud.classList.add("hidden")
}

I'm trying hide div 1 when hovering it, then show div 2 when div 1 is hidden

I'm in need of hiding a div on mouse hover and then show another div instead, I'm trying to achieve this by using css but when I test the code, both divs are hidden. Maybe this can only be achieved using jQuery?
I wrote down this code in pure CSS/HTML:
.responsive-banner {
width: 100%;
height: 154px;
overflow: hidden;
margin: 10px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.responsive-banner a {
text-decoration: none;
color: #fff;
}
.banner-description {
/*width:70%;
height:127px; */
display: flex;
align-items: center;
}
.banner-description-2 {
padding: 7px;
max-height: 127px;
overflow: hidde
}
.banner-title {
font-family: "Roboto", "Arial", sans-serif;
font-size: 1.4rem;
font-weight: bold;
margin-bottom: 5px;
text-shadow: #000 1px 1px 1px;
color: #000;
}
.banner-txt {
font-family: "Roboto", "Arial", sans-serif;
font-size: 1.11rem;
color: #000;
}
.banner-btn {
background: #279fba;
float: right;
margin-left: 20px;
padding: 12px;
font-size: 18px;
border-radius: 4px
}
a.banner-btn {
color: #FF0000;
padding: 3px 5px;
}
a.banner-btn:hover {
color: #5ca5ff;
}
#banneryoutube1 {
bottom: 0;
left: 0;
float: left;
background-image: url(/image1.webp);
background-repeat: no-repeat;
display: inline-block;
cursor: pointer;
width: 246px;
height: 138px;
background-size: 246px 138px;
background-color: transparent;
}
#banneryoutube12 {
bottom: 0;
left: 0;
float: left;
background-image: url(/image2.webp);
background-repeat: no-repeat;
display: inline-block;
cursor: pointer;
width: 246px;
height: 138px;
background-size: 246px 138px;
background-color: transparent;
/* animation: wahooMario 0.12s linear 1;*/
}
#showbannerinarticle1 {
display: block
}
#showbannerinarticle2 {
display: none
}
#showbannerinarticle1:hover {
display: none
}
#showbannerinarticle2:hover {
display: block
}
<div id="showbannerinarticle1" class="responsive-banner">
<a href="/index.html" rel="nofollow" target="_blank">
<div id="banneryoutube1" /></div>
<div class="banner-description">
<div class="banner-description-2">
<div class="banner-title">
1</div>
<div class="banner-txt">LOREM IPSUM
</div>
</div>
</div>
</a>
</div>
<div id="showbannerinarticle2" class="responsive-banner">
<a href="/index2.html" rel="nofollow" target="_blank">
<div id="banneryoutube12" /></div>
<div class="banner-description">
<div class="banner-description-2">
<div class="banner-title">
1</div>
<div class="banner-txt">LOREM IPSUM
</div>
</div>
</div>
</a>
</div>
How can I proceed with this?
Basically when I'm creating is an animated banner.
The issue may be that CSS cannot consider something to be hovered unless it is visible, and so it gets confused.
I would wrap both in another div and target the CSS to the wrapper, like this:
.wrapper:hover .hide-me {
display: none;
}
.show-me {
display:none;
}
.wrapper:hover .show-me {
display: block;
}
<div class="wrapper">
<div class="hide-me">Content 1</div>
<div class="show-me">Content 2</div>
</div>
Heres some workign example you can play with using jquery.
$(document).ready(function(){
$(".div1").hover(function(){
$(".div2").show();
$(".div1").hide();
});
$(".div2").hover(function(){
$(".div1").show();
$(".div2").hide();
});
});
.div1 {
background-color: blue;
cursor: pointer;
color: white;}
.div2 {
background-color: yellow;
display:none;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="div1">
<h1>This is my div 1</h1>
</div>
<div class="div2">
<h1>div 2 is now showing</h1>
</div>
I would use:
document.getElementById('firstDivId').style.display = "none";
document.getElementById('secondDivId').style.display = "block";
// Switch these around when doing the opposite

How to duplicate an object in a card by a button

I have a page with multiple MCQ cards and every one should have an option to add another option if necessary but my current function adds this option to all the cards
Here is my fiddle https://jsfiddle.net/abdotamer3/s57jauxw/11/
My function:
$(".TextInputSimpleInputPlaceholder").on("click", function () {
var clone = $(this).closest(".questionBodyRadioBody").find(".radioListItemPrimaryContent:first").clone(true);
clone.className = "radioListItemPrimaryContent";
clone.appendTo(".radioListItemView");
});
My cloning function:
function cloneQuestion() {
var question = document.querySelector(".questions");
var clone = question.cloneNode(true);
var numItems = $(".questions").closest(".radioListItemPrimaryContent").length;
var radioButtons = question.querySelectorAll(".radioItemToggle");
console.log(numItems);
clone.querySelector(".questionMainTextArea").value = "Untitled Question";
var addBtn = document.querySelector(".addQuestionBtnRow");
var tbody = addBtn.parentNode;
tbody.insertBefore(clone, addBtn);
}
Generally you should add scope to your selector:
var $card = $(this).closest('.card');
$clone.appendTo($(".radioListItemView", $card));
Also Option numbering should be per card I think.
$(".TextInputSimpleInputPlaceholder").on("click", function () {
var $card = $(this).closest('.card');
var numItems = $(".radioListItemPrimaryContent", $card).length;
var $clone = $(this).closest(".questionBodyRadioBody").find(".radioListItemPrimaryContent:first").clone(true);
$clone.className = "radioListItemPrimaryContent";
$clone.find(".optionText").val("Option " + numItems);
numItems++;
$clone.appendTo($(".radioListItemView", $card));
});
.card {
border-radius: .5rem !important;
width: 45rem;
}
.card-body {
padding: 1rem 1.5rem !important;
}
.form_frame td {
padding-top: 12px;
}
.FormHeaderBorder {
background-color: #673ab7;
color: rgba(255, 255, 255, 1);
border-top-left-radius: 8px;
border-top-right-radius: 8px;
height: 10px;
left: -1px;
position: absolute;
top: -1px;
width: calc(100% + 2px);
z-index: 1;
}
.card-selector {
display: flex;
height: calc(100% + 2px);
left: -1px;
position: absolute;
bottom: -1px;
width: 8px;
}
.card-selector-container {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.card-selector-color {
background-color: transparent;
flex-grow: 1;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
position: relative;
}
.viewItemActive .card-selector-color {
background-color: #4285f4;
}
.viewItemActive .questionMainTextAreaContent {
display: block;
}
.viewItemInactive .questionMainTextAreaContent {
display: none;
}
.questionMainTextAreaContent {
padding-top: 16px;
background-color: #f8f9fa;
border-radius: 4px 4px 0 0;
width: 60%;
}
.questionMainTextAreaContentArea {
padding-top: 0;
padding-bottom: 0;
display: flex;
position: relative;
}
.viewItemActive .questionHeader {
display: none;
}
.viewItemInactive .questionHeader {
display: block;
}
.questionMainTextArea {
height: 24px;
font-family: 'Google Sans', Roboto, Helvetica, Arial, sans-serif;
font-size: 16px;
letter-spacing: .1px;
line-height: 24px;
font-weight: 400;
color: #000;
flex-grow: 1;
flex-shrink: 1;
background-color: transparent;
border: none;
box-sizing: content-box;
caret-color: #1a73e8;
display: block;
min-height: 24px;
margin: 0;
outline: none;
overflow-y: visible;
overflow-x: hidden;
padding: 0 16px 16px;
resize: none;
white-space: pre-wrap;
z-index: 1;
}
.questionMainTextAreaUnderline {
background-color: #80868b;
bottom: 0;
height: 1px;
left: 0;
margin: 0;
padding: 0;
position: absolute;
width: 100%;
}
.questionMainTextArea:after {
background: none repeat scroll 0 0 transparent;
bottom: 0;
content: "";
display: block;
height: 2px;
left: 50%;
position: absolute;
background: #fff;
transition: width .3s ease 0s, left .3s ease 0s;
width: 0;
}
.questionMainTextArea:hover:after {
width: 100%;
left: 0;
}
.questionBodyRadioBody {
margin-right: 0;
margin-bottom: 24px;
}
.radioListItemView {
min-height: 48px;
background: #fff;
}
.radioListItemPrimaryContent {
-moz-box-align: start;
display: flex;
align-items: center;
}
.radioListItemGutter {
-moz-box-align: center;
align-items: center;
display: flex;
flex-shrink: 0;
height: 48px;
}
.radioListTypeIndicator {
font-family: Roboto, Arial, sans-serif;
font-size: 14px;
font-weight: 400;
letter-spacing: .2px;
line-height: 20px;
color: #202124;
margin-right: 10px;
}
input.radioItemToggle {
-moz-user-select: none;
transition: border-color .2s cubic-bezier(0.4, 0, 0.2, 1);
border-radius: 3px;
box-sizing: content-box;
cursor: pointer;
display: inline-block;
height: 20px;
outline: none;
position: relative;
vertical-align: middle;
width: 20px;
z-index: 0;
}
.radioListItemEditRegion {
padding-right: 2.5rem;
min-height: 48px;
display: flex;
flex: 1;
-moz-box-flex: 1;
flex-wrap: wrap;
}
.radioListValue {
flex-grow: 1;
-moz-box-align: center;
align-items: center;
display: flex;
}
.radioListMorseValue {
flex-grow: 1;
}
.radioListItemValueInput {
margin-top: 8px;
width: 100%;
-moz-user-select: none;
display: inline-block;
outline: none;
}
.TextInputSimpleInputContentArea {
display: flex;
}
.radioListItemValueInput .exportInput {
font-family: Roboto, Arial, sans-serif;
font-size: 14px;
font-weight: 400;
letter-spacing: .2px;
line-height: 20px;
color: #202124;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.TextInputSimpleInput {
flex-grow: 1;
flex-shrink: 1;
background-color: transparent;
border: none;
display: block;
font: 400 16px Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
margin: 0;
min-width: 0;
outline: none;
padding: .125em 0;
z-index: 0;
}
.viewItemActive .radioListItemPrimaryContent:hover .exportUnderline,
.TextInputSimpleInputUnderline {
visibility: visible;
}
.viewItemActive .radioListItemPrimaryContent:focus-within .exportUnderline,
.TextInputSimpleInputUnderline {
visibility: visible;
}
.radioListItemValueInput .exportUnderline {
margin-top: 4px;
}
.TextInputSimpleInputUnderline {
background-color: rgba(0, 0, 0, 0.12);
height: 2px;
margin: 0;
padding: 0;
width: 100%;
visibility: hidden;
}
.radioListItemGhostItemInput {
flex-basis: auto;
margin-top: 7px;
width: auto;
display: inline-block;
outline: none;
}
.TextInputSimpleInputMainContent {
position: relative;
vertical-align: top;
}
.TextInputSimpleInputPlaceholder {
font-family: Roboto, Arial, sans-serif;
font-size: 14px;
font-weight: 400;
letter-spacing: .2px;
line-height: 20px;
color: #70757a;
}
.viewItemActive .itemHideInactive {
display: flex;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="card MCQuestion viewItemActive">
<div class="row g-0">
<div class="col">
<div class="card-body">
<div class="questionMainTextAreaContent">
<div class="questionMainTextAreaContentArea">
<textarea class="questionMainTextArea" tabindex="0" aria-label="Question title" dir="auto"></textarea>
<div class="questionMainTextAreaUnderline"></div>
<div class="questionMainTextAreaFocusUnderline"></div>
</div>
</div>
<div class="card-title questionHeader"></div>
<div class="questionBodyRadioBody">
<div class="radioListItemView">
<div class="radioListItemPrimaryContent">
<div class="radioListItemGutter">
<div class="radioListTypeIndicator">
<input type="radio" name="radio-0" class="radioItemToggle">
</div>
</div>
<div class="radioListItemEditRegion">
<div class="radioListValue">
<div class="radioListMorseValue">
<span>
<div class="radioListItemValueInput">
<div class="TextInputSimpleInputContentArea">
<input class="TextInputSimpleInput exportInput optionText" type="text" value="Option 1" tabindex="0">
</div>
<div class="TextInputSimpleInputUnderline exportUnderline"></div>
</div>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="itemHideInactive radioListItemPrimaryContent">
<div class="radioListItemGutter">
<div class="radioListTypeIndicator">
<input type="radio" class="radioItemToggle" aria-checked="false" disabled>
</div>
</div>
<div class="radioListItemGhostItemInput">
<div class="TextInputSimpleInputMainContent">
<div class="TextInputSimpleInputPlaceholder" role="button">
<div class="TextInputSimpleInputContentArea">
<div class="TextInputSimpleInput exportInput optionText">
Add option
</div>
</div>
<div class="TextInputSimpleInputUnderline exportUnderline"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card MCQuestion viewItemActive">
<div class="row g-0">
<div class="col">
<div class="card-body">
<div class="questionMainTextAreaContent">
<div class="questionMainTextAreaContentArea">
<textarea class="questionMainTextArea" tabindex="0" aria-label="Question title" dir="auto"></textarea>
<div class="questionMainTextAreaUnderline"></div>
<div class="questionMainTextAreaFocusUnderline"></div>
</div>
</div>
<div class="card-title questionHeader"></div>
<div class="questionBodyRadioBody">
<div class="radioListItemView">
<div class="radioListItemPrimaryContent">
<div class="radioListItemGutter">
<div class="radioListTypeIndicator">
<input type="radio" name="radio-0" class="radioItemToggle">
</div>
</div>
<div class="radioListItemEditRegion">
<div class="radioListValue">
<div class="radioListMorseValue">
<span>
<div class="radioListItemValueInput">
<div class="TextInputSimpleInputContentArea">
<input class="TextInputSimpleInput exportInput optionText" type="text" value="Option 1" tabindex="0">
</div>
<div class="TextInputSimpleInputUnderline exportUnderline"></div>
</div>
</span>
</div>
</div>
</div>
<div class="radioListMorselRoot itemHideInactive">
<div class="radioListMorselDeleteButton" aria-label="Remove Option">
<span class="ButtonContent">
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path fill="#5f6368" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path>
<path d="M0 0h24v24H0z" fill="none"></path>
</svg>
</span>
</span>
</div>
</div>
</div>
</div>
<div class="itemHideInactive radioListItemPrimaryContent">
<div class="radioListItemGutter">
<div class="radioListTypeIndicator">
<input type="radio" class="radioItemToggle" aria-checked="false" disabled>
</div>
</div>
<div class="radioListItemGhostItemInput">
<div class="TextInputSimpleInputMainContent">
<div class="TextInputSimpleInputPlaceholder" role="button">
<div class="TextInputSimpleInputContentArea">
<div class="TextInputSimpleInput exportInput optionText">
Add option
</div>
</div>
<div class="TextInputSimpleInputUnderline exportUnderline"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

CSS : One of the DIVs gets positioned higher when window is resized

Pls see my codepen here: http://codepen.io/Chiz/pen/oLpGOB
It looks fine, until you resize the window and reduce the width of the browser window, and then the first card becomes positioned taller than the rest of the 3 cards! What causes this and how do I fix it?
Tks!
* {
box-sizing: border-box;
}
body {
height: 100vh;
font-family: "Open Sans";
}
.header {
background-color: #1b9ef2;
width: 100%;
height: 20rem;
}
.header h1 {
color: white;
font-size: 1.5rem;
line-height: 15rem;
text-align: center;
}
.CardContainer {
width: 90%;
margin: 0 auto;
text-align: center;
margin-top: -6rem;
}
.Card {
display: inline-block;
width: 20%;
height: 30rem;
margin: 0 1rem 0 1rem;
padding: 0rem;
background-color: rgb(250, 250, 250);
border: 1px solid black;
border-radius: 10px;
position:relative;
}
.Card h2 {
color: #1b9ef2;
font-size: 1.2rem;
font-weight: 600;
padding:2.5rem;
}
.cardimgcontainer
{
position:absolute;
top:50%;
transform:translateY(-50%);
}
.Card img
{
width:80%;
height:40%;
max-height:180px;
text-align:center;
}
.Card .Price
{
position:absolute;
bottom:0;
width:100%;
padding:2.5rem;
line-height:1.5rem;
color:rgb(70,70,70);
}
.Card .Price .bold
{
font-weight:800;
font-size:1.4rem;
}
<div class="header">
<h1>Choose your subscription plan</h1>
</div>
<div class="CardContainer">
<div class="Card">
<h2>2 Days Trial</h2>
<div class="cardimgcontainer">
<img src="https://s-media-cache-ak0.pinimg.com/originals/0d/e6/b3/0de6b34699563781365b286c45359692.jpg" />
</div>
<div class="Price"><span class="bold">$9.99</span><br />1 account</div>
</div>
<div class="Card">
<h2>Personal</h2>
<div class="cardimgcontainer">
<img src="http://static.vecteezy.com/system/resources/previews/000/090/876/original/rolling-hills-landscape-vector.jpg" />
</div>
<div class="Price"><span class="bold">$29.99</span><br />5 accounts</div>
</div>
<div class="Card">
<h2>Advanced</h2>
<div class="cardimgcontainer">
<img src="https://d13yacurqjgara.cloudfront.net/users/968424/screenshots/2287311/2015_10_12_flatlandscape_800x600_v01_1x.jpg" />
</div>
<div class="Price"><span class="bold">$39.99</span><br />10 accounts</div>
</div>
<div class="Card">
<h2>Business</h2>
<div class="cardimgcontainer">
<img src="https://s-media-cache-ak0.pinimg.com/736x/18/fe/3f/18fe3f54a4ae949f7993442a9d8a3447.jpg" />
</div>
<div class="Price"><span class="bold">$49.99</span><br />50 accounts</div>
</div>
</div>
Use vertical-align: top;
.Card {
display: inline-block;
width: 20%;
height: 30rem;
margin: 0 1rem 0 1rem;
padding: 0rem;
background-color: rgb(250, 250, 250);
border: 1px solid black;
border-radius: 10px;
position: relative;
vertical-align: top;
}
One more best solution is you can tile your cards into full width which I have shown in demo. (for responsive mode)
Responsive CSS:
#media only screen and (max-width: 800px) {
/*** You can change the responsive screen size as per your requirement.
.Card {
width: 100%;
margin-bottom: 20px;
}
}
Full Demo:
* {
box-sizing: border-box;
}
body {
height: 100vh;
font-family: "Open Sans";
}
.header {
background-color: #1b9ef2;
width: 100%;
height: 20rem;
}
.header h1 {
color: white;
font-size: 1.5rem;
line-height: 15rem;
text-align: center;
}
.CardContainer {
width: 90%;
margin: 0 auto;
text-align: center;
margin-top: -6rem;
}
.Card {
display: inline-block;
width: 20%;
height: 30rem;
margin: 0 1rem 0 1rem;
padding: 0rem;
background-color: rgb(250, 250, 250);
border: 1px solid black;
border-radius: 10px;
position:relative;
}
.Card h2 {
color: #1b9ef2;
font-size: 1.2rem;
font-weight: 600;
padding:2.5rem;
}
.cardimgcontainer
{
position:absolute;
top:50%;
transform:translateY(-50%);
}
.Card img
{
width:80%;
height:40%;
max-height:180px;
text-align:center;
}
.Card .Price
{
position:absolute;
bottom:0;
width:100%;
padding:2.5rem;
line-height:1.5rem;
color:rgb(70,70,70);
}
.Card .Price .bold
{
font-weight:800;
font-size:1.4rem;
}
#media only screen and (max-width: 800px) {
.Card {
width: 100%;
margin-bottom: 20px;
}
}
<div class="header">
<h1>Choose your subscription plan
</h1>
</div>
<div class="CardContainer">
<div class="Card">
<h2>2 Days Trial
</h2>
<div class="cardimgcontainer">
<img src="https://s-media-cache-ak0.pinimg.com/originals/0d/e6/b3/0de6b34699563781365b286c45359692.jpg" />
</div>
<div class="Price">
<span class="bold">$9.99
</span>
<br />1 account
</div>
</div>
<div class="Card">
<h2>Personal
</h2>
<div class="cardimgcontainer">
<img src="http://static.vecteezy.com/system/resources/previews/000/090/876/original/rolling-hills-landscape-vector.jpg" />
</div>
<div class="Price">
<span class="bold">$29.99
</span>
<br />5 accounts
</div>
</div>
<div class="Card">
<h2>Advanced
</h2>
<div class="cardimgcontainer">
<img src="https://d13yacurqjgara.cloudfront.net/users/968424/screenshots/2287311/2015_10_12_flatlandscape_800x600_v01_1x.jpg" />
</div>
<div class="Price">
<span class="bold">$39.99
</span>
<br />10 accounts
</div>
</div>
<div class="Card">
<h2>Business
</h2>
<div class="cardimgcontainer">
<img src="https://s-media-cache-ak0.pinimg.com/736x/18/fe/3f/18fe3f54a4ae949f7993442a9d8a3447.jpg" />
</div>
<div class="Price">
<span class="bold">$49.99
</span>
<br />50 accounts
</div>
</div>
</div>
just add vertical-align: top; for the Card class.
Your layout is looking good in big screen That's why you need to write this code only for small devices so You can try the below code.
#media (max-width: 768px){
.CardContainer .Card{
float: left;
}
}
You need to add vertical-align:top; to .Card.
Because you have used display:inline-block So, by default it is vertical-align:baseline;
And it will align the baseline of the element with the baseline of the parent element.
Your updated Codepen
.Card {
display: inline-block;
width: 20%;
height: 30rem;
margin: 0 1rem 0 1rem;
padding: 0rem;
background-color: rgb(250, 250, 250);
border: 1px solid black;
border-radius: 10px;
position:relative;
vertical-align:top;
}
I think this will do the job:
.CardContainer .card {vertical-align:top;}

Categories