I am working on one of my personal projects where I am designing a website for a restaurant using HTML and CSS.....I have got a code for a Carousel and I am trying to integrate it with my website....
But I am facing a problem with the carousel...As I slide down my window...the carousel also tends to move upward and doesn't stick to it's original position....How am i supposed to fix this issue....
This is the first one among all my personal projects.
I would be pleased and more than happy if the experts or members of this community would help me out in this process of learning and aid me in getting this project completed....
This is the project
This is my index.html.The code for Carousel is at the last section with the comment "Carousel Starts"
<!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>Restaurant Page</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<nav>
<div class="navigation container">
<div class="logo_container">
<img src="images/logo.png" alt="logo" />
</div>
<div class="allmenus">
<ul>
<li class="menu">Home</li>
<li class="menu" >About Us</li>
<li class="menu" >Our Services</li>
</ul>
</div>
</nav>
<script
src="https://kit.fontawesome.com/8b6347e91f.js"
crossorigin="anonymous"
></script>
<!--First Section-->
<div class="container" >
<div class="first">
<div class="first_image">
<img src="images/hero_image.png" alt="Vegetables" />
</div>
<div class="first_content">
<div class="tag">50% Off On All Products</div>
<h1>Enjoy Your Delicious Food</h1>
<p>
Make reservations, hours, and locations front-and-center, and
prominently get your order within few minutes of getting placed
</p>
<button class="explore">Order Now</button>
</div>
</div>
<section class="second_section" >
<div class="feature">
<img src="images/discount 1.png" />
<div class="feature_content">
<h1>Discount Voucher</h1>
<p>Get a discount voucher worth Rs.100 on yout first order</p>
</div>
</div>
<div class="feature">
<img src="images/fresh.png" />
<div class="feature_content">
<h1>Fresh Healthy Food</h1>
<p>Get a discount voucher worth Rs.100 on yout first order</p>
</div>
</div>
<div class="feature">
<img src="images/delivery.png" />
<div class="feature_content">
<h1>Instant delivery</h1>
<p>Get a discount voucher worth Rs.100 on yout first order</p>
</div>
</div>
</section>
</div>
<!--Popular Dishes -->
<div class="container dishes" >
<h1 class="popdishes">Our Popular Dishes</h1>
<div class="subcontainer">
<div class="section">
<img class="dish" src="images/dish-3.png" alt="">
<h2 class="recipe">Chicken Leg Piece</h2>
<div class="priceandbutton">
<span>$15</span>
<button class="addtocart">Add To Cart</button>
</div>
</div>
<div class="section">
<img class="dish" src="images/dish-1.png" alt="">
<h2 class="recipe">Burger</h2>
<div class="priceandbutton">
<span>$20</span>
<button class="addtocart">Add To Cart</button>
</div>
</div>
<div class="section">
<img class="dish" src="images/dish-2.png" alt="">
<h2 class="recipe">Chicken Nuggets</h2>
<div class="priceandbutton">
<span>$12</span>
<button class="addtocart">Add To Cart</button>
</div>
</div>
</div>
<!-- Second SubContainer Starts-->
<div class="subcontainer">
<div class="section">
<img class="dish" src="images/dish-4.png" alt="">
<h2 class="recipe">Pizza</h2>
<div class="priceandbutton">
<span>$12</span>
<button class="addtocart">Add To Cart</button>
</div>
</div>
<div class="section">
<img class="dish" src="images/dish-5.png" alt="">
<h2 class="recipe">Chocolate Cookies</h2>
<div class="priceandbutton">
<span>$15</span>
<button class="addtocart">Add To Cart</button>
</div>
</div>
<div class="section">
<img class="dish" src="images/dish-6.png" alt="">
<h2 class="recipe">Broasted</h2>
<div class="priceandbutton">
<span>$20</span>
<button class="addtocart">Add To Cart</button>
</div>
</div>
</div>
<!-- Third SubContainer Starts-->
<div class="subcontainer">
<div class="section">
<img class="dish" src="images/menu-33 new.jpg" alt="">
<h2 class="recipe">Crepes</h2>
<div class="priceandbutton">
<span>$12</span>
<button class="addtocart">Add To Cart</button>
</div>
</div>
<div class="section">
<img class="dish" src="images/menu-44.jpg" alt="">
<h2 class="recipe">Waffles</h2>
<div class="priceandbutton">
<span>$15</span>
<button class="addtocart">Add To Cart</button>
</div>
</div>
<div class="section">
<img class="dish" src="images/menu-55.jpg" alt="">
<h2 class="recipe">Pasteries</h2>
<div class="priceandbutton">
<span>$20</span>
<button class="addtocart">Add To Cart</button>
</div>
</div>
</div>
</div>
<!-- Carousel Starts -->
<div class="container">
<div class="mycarousel" >
<input type="radio" name="position" checked />
<input type="radio" name="position" />
<input type="radio" name="position" />
<input type="radio" name="position" />
<input type="radio" name="position" />
<main id="carousel">
<div class="item" >
<div class="reviews">
<img class="reviewimages" src="images/pic-1.png">
<div class="content">
<h1>John Doe</h1>
<p>In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available.
</div>
</div>
</div>
<div class="item">
<div class="reviews">
<img class="reviewimages" src="images/pic-2.png">
<div class="content">
<h1>John Doe</h1>
<p>In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available.
</div>
</div>
</div>
<div class="item">
<div class="reviews" >
<img class="reviewimages" src="images/pic-1.png">
<div class="content">
<h1>John Doe</h1>
<p>In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available.
</div>
</div>
</div>
<div class="item">
<div class="reviews">
<img class="reviewimages" src="images/pic-1.png">
<div class="content">
<h1>John Doe</h1>
<p>In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available.
</div>
</div>
</div>
<div class="item">
<div class="reviews">
<img class="reviewimages" src="images/pic-1.png">
<div class="content">
<h1>John Doe</h1>
<p>In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available.
</div>
</div>
</div>
<main>
</div>
</div>
</body>
</html>
This is my css file
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
line-height: 1.4;
font-weight: 300;
font-family: "Roboto", sans-serif;
}
nav {
box-shadow: 5px 5px 5px rgba(1, 1, 1, 0.05);
background-color: white;
position: sticky;
top: 0;
margin-bottom: 32px;
padding: 10px;
}
.navigation {
display: flex;
justify-content: space-between;
align-items: center;
color: rgba(28, 22, 22, 0.414);
font-weight: bolder;
font-size: large;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
ul {
text-align: right;
display: flex;
font-family: Helvetica, sans-serif;
font-weight: bolder;
list-style: none;
}
li {
padding: 0 20px;
margin-top: 30px;
}
li:hover {
color: #134a7a;
text-decoration: underline;
}
.logo_container {
margin-left: 15px;
}
/* First Section */
.first {
display: flex;
gap: 100px;
justify-content: center;
align-items: center;
}
.first_content {
display: flex;
flex-direction: column;
gap: 20px;
}
.tag {
background-color: #134a7a;
align-self: flex-start;
padding: 5px 10px;
color: white;
}
.first_content h1 {
font-size: 72px;
line-height: 1.2;
font-weight: 500;
}
button {
padding: 10px 15px;
color: white;
font-weight: 500;
font-size: 22px;
background: crimson;
border: none;
border-radius: 30px;
align-self: flex-start;
width: 250px;
}
button:hover {
transition: 0.2s ease-in-out;
background:#e5eaee;
color: #134a7a;
font-weight: 500;
}
.second_section {
display: flex;
flex-direction: row;
gap: 20px;
margin-top: 100px;
justify-content: center;
}
.feature {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 15px;
height: 165px;
background-color: #134a7a;
color: azure;
}
.feature:hover {
transition: 0.2s ease-in-out;
background-color: azure;
color:#134a7a;
}
.dishes{
background-color: #e5eaee;
margin-top: 20px;
height:1250px;
margin-bottom: 20px;;
}
.dishes .subcontainer {
display: flex;
flex-direction: row;
justify-content: space-evenly;
gap: 25px;
}
.recipe{
font-weight: 300;
}
.section {
width: 350px;
height: 350px;
background: white;
padding-top: 32px;
margin-top: 25px;
}
.section{
display:flex;
flex-direction:column;
justify-content: center;
align-items: center;
gap: 10px;
}
h1.popdishes {
padding-top: 20px;
color:#134a7a;
text-align: center;
}
.priceandbutton {
display: flex;
flex-direction: row;
gap:10px
}
span {
padding-top: 5px;
font-weight: 400;
color:#134a7a;
font-size: 30px;
}
.addtocart{
padding: 10px 15px;
color: white;
font-weight: 500;
font-size: 22px;
background:#134a7a;
border: none;
border-radius: 30px;
align-self: flex-start;
width: 200px;
}
.addtocart:hover {
background:#e5eaee;
color: #134a7a;
font-weight: 500;
transition: 0.2s ease-in-out;
}
.reviewimages{
height:150px;
width:170px;
border-radius:50%;
}
.reviews{
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
padding:20px
}
.content{
text-align:center
}
.mycarousel{
height: 600px;
margin: 0;
display: grid;
grid-template-rows: 500px 100px;
grid-template-columns: 1fr 30px 30px 30px 30px 30px 1fr;
align-items: center;
justify-items: center;
background-color: #134a7a;
}
main#carousel {
grid-row: 1 / 2;
grid-column: 1 / 8;
width: 100vw;
height: 500px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
transform-style: preserve-3d;
perspective: 600px;
--items: 5;
--middle: 3;
--position: 1;
pointer-events: none;
}
div.item {
position: absolute;
width: 300px;
height: 400px;
background-color: coral;
--r: calc(var(--position) - var(--offset));
--abs: max(calc(var(--r) * -1), var(--r));
transition: all 0.25s linear;
transform: rotateY(calc(-10deg * var(--r)))
translateX(calc(-300px * var(--r)));
z-index: calc((var(--position) - var(--abs)));
overflow: hidden;
}
div.item:nth-of-type(1) {
--offset: 1;
}
div.item:nth-of-type(2) {
--offset: 2;
}
div.item:nth-of-type(3) {
--offset: 3;
}
div.item:nth-of-type(4) {
--offset: 4;
}
div.item:nth-of-type(5) {
--offset: 5;
}
input:nth-of-type(1) {
grid-column: 2 / 3;
grid-row: 2 / 3;
}
input:nth-of-type(1):checked ~ main#carousel {
--position: 1;
}
input:nth-of-type(2) {
grid-column: 3 / 4;
grid-row: 2 / 3;
}
input:nth-of-type(2):checked ~ main#carousel {
--position: 2;
}
input:nth-of-type(3) {
grid-column: 4 /5;
grid-row: 2 / 3;
}
input:nth-of-type(3):checked ~ main#carousel {
--position: 3;
}
input:nth-of-type(4) {
grid-column: 5 / 6;
grid-row: 2 / 3;
}
input:nth-of-type(4):checked ~ main#carousel {
--position: 4;
}
input:nth-of-type(5) {
grid-column: 6 / 7;
grid-row: 2 / 3;
}
input:nth-of-type(5):checked ~ main#carousel {
--position: 5;
}
.reviewimages{
height:150px;
width:170px;
border-radius:50%;
border:5px solid black;
}
.content h1{
color:#134a7a;
}
.reviews{
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
padding:20px
}
.content{
text-align:center
}
.mycarousel{
height: 600px;
margin: 0;
display: grid;
grid-template-rows: 500px 100px;
grid-template-columns: 1fr 30px 30px 30px 30px 30px 1fr;
align-items: center;
justify-items: center;
}
main#carousel {
grid-row: 1 / 2;
grid-column: 1 / 8;
width: 100vw;
height: 500px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
transform-style: preserve-3d;
perspective: 600px;
--items: 5;
--middle: 3;
--position: 1;
pointer-events: none;
}
div.item {
position: absolute;
width: 300px;
height: 400px;
background-color: coral;
--r: calc(var(--position) - var(--offset));
--abs: max(calc(var(--r) * -1), var(--r));
transition: all 0.25s linear;
transform: rotateY(calc(-10deg * var(--r)))
translateX(calc(-300px * var(--r)));
z-index: calc((var(--position) - var(--abs)));
}
div.item:nth-of-type(1) {
--offset: 1;
background-color: #e5eaee;
}
div.item:nth-of-type(2) {
--offset: 2;
background-color: #e5eaee;
}
div.item:nth-of-type(3) {
--offset: 3;
background-color: #e5eaee;
}
div.item:nth-of-type(4) {
--offset: 4;
background-color: #e5eaee;
}
div.item:nth-of-type(5) {
--offset: 5;
background-color: #e5eaee;
}
input:nth-of-type(1) {
grid-column: 2 / 3;
grid-row: 2 / 3;
}
input:nth-of-type(1):checked ~ main#carousel {
--position: 1;
}
input:nth-of-type(2) {
grid-column: 3 / 4;
grid-row: 2 / 3;
}
input:nth-of-type(2):checked ~ main#carousel {
--position: 2;
}
input:nth-of-type(3) {
grid-column: 4 /5;
grid-row: 2 / 3;
}
input:nth-of-type(3):checked ~ main#carousel {
--position: 3;
}
input:nth-of-type(4) {
grid-column: 5 / 6;
grid-row: 2 / 3;
}
input:nth-of-type(4):checked ~ main#carousel {
--position: 4;
}
input:nth-of-type(5) {
grid-column: 6 / 7;
grid-row: 2 / 3;
}
input:nth-of-type(5):checked ~ main#carousel {
--position: 5;
}
Try adding justify-content: space-around; so it stays the same width as the page:
.mycarousel {
height: 600px;
margin: 0;
display: grid;
grid-template-rows: 500px 100px;
grid-template-columns: 1fr 30px 30px 30px 30px 30px 1fr;
align-items: center;
justify-items: center;
justify-content: space-around;
}
For the slide part, I see it goes over the navbar you can solve it by adding a z-index: 1; to the navbar.
nav {
box-shadow: 5px 5px 5px rgb(1 1 1 / 5%);
background-color: white;
position: sticky;
top: 0;
margin-bottom: 32px;
padding: 10px;
z-index: 1;
}
Related
I'm trying to make an image to open on another location on the page while its been hovered.
I looked online but didn't find a way to do that functionallty usuing only html and css.
Anyone know how to achive that?
Not hovered:
Hovered:
I tried to make another copy of the image transpert on defined area on a grid but it can't sit on top of the text.
html code:
<section id="fav-place" class="place-sec">
<article class="place-art">
<div class="place-desc">
<h1>A place I Enjoyed visiting</h1>
<h2 class="sec-h2">Cape Greco, Cyprus</h2>
<p>Cape Greco is cape and also a small peninsula in the southeast of Cyprus, in Famagusta, between Ayia Napa and Paralimni.
According to the findings of the excavations that took place in 1992, this site is considered to be one of the most ancient settlements on the island
</p>
<p>
In the sea area of Cape Greco there are submarine ravines and caves that are popular for diving.
Within sea ravines up to 10 meters high, there are sea caves, which are called "palaces".
These caves, along with Smugglers caves, are accessible only by the sea.
</p>
</div>
<div class="why-i-like-place">
<h2>Why I like this place</h2>
<p>Because of the clear water, the cliffs around and the beautiful sights</p>
</div>
</article>
<aside class="place-aside">
<img class="p-sm-img first-last-img" src="/images/cape-greco-imgs/boat.jpg" alt="boat-img">
<img class="p-sm-img" src="/images/cape-greco-imgs/bridge.jpg" alt="bridge-img">
<img class="p-sm-img" src="/images/cape-greco-imgs/cave.jpg" alt="cave-img">
<img class="p-sm-img" src="/images/cape-greco-imgs/hole.jpg" alt="hole-img">
<img class="p-sm-img" src="/images/cape-greco-imgs/sm cliff.jpg" alt="sm-cliff-img">
<img class="p-sm-img" src="/images/cape-greco-imgs/sunrise.jpg" alt="sunrise-img">
<img class="p-sm-img first-last-img" src="/images/cape-greco-imgs/tree.jpg" alt="tree-img">
</aside>
</section>
css code:
.place-art {
grid-column: 1/2;
display: grid;
grid-template-rows: 3fr 1fr;
}
.place-desc-sec{
grid-row: 1/-2;
}
.place-aside {
border: solid 0.5vh;
border-color: rgba(185, 218, 100, 0.862);
border-radius: 1vh;
margin-top: 6vh;
overflow-y: scroll;
display: flex;
flex-direction: column;
}
.place-sec {
display: grid;
grid-template-columns: 2fr 1fr;
}
.first-last-img {
margin: 0;
}
.p-sm-img {
margin: 0.2vh 0;
width: 23.5vw;
}
.p-sm-img:hover {
}
.p-lrg-img {
visibility: hidden;
opacity: 0.2;
grid-row: 1/-2;
grid-column: 1/2;
}
.why-i-like-place {
grid-row: 2/3;
grid-column: 1/2
}
Heres the code!
<!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">
<link rel="stylesheet" href="main.css">
<title>website</title>
</head>
<body>
<section id="fav-place" class="place-sec">
<article class="place-art">
<div class="place-desc">
<h1>A place I Enjoyed visiting</h1>
<h2 class="sec-h2">Cape Greco, Cyprus</h2>
<p>Cape Greco is cape and also a small peninsula in the southeast of Cyprus, in Famagusta, between Ayia Napa and Paralimni.
According to the findings of the excavations that took place in 1992, this site is considered to be one of the most ancient settlements on the island
</p>
<p>
In the sea area of Cape Greco there are submarine ravines and caves that are popular for diving.
Within sea ravines up to 10 meters high, there are sea caves, which are called "palaces".
These caves, along with Smugglers caves, are accessible only by the sea.
</p>
</div>
<div class="why-i-like-place">
<h2>Why I like this place</h2>
<p>Because of the clear water, the cliffs around and the beautiful sights</p>
</div>
</article>
<img id="bigImg">
<aside class="place-aside">
<img onmouseover="" class="p-sm-img first-last-img" src="/images/5f80f09d-6657-41af-a56c-bb2970718dfb.jpg" alt="boat-img">
<img class="p-sm-img" src="/images/adobestock_162537886.jpeg" alt="bridge-img">
<img class="p-sm-img" src="/images/bg6.jpg" alt="cave-img">
<img class="p-sm-img" src="/images/city-buildings-sunset-clouds-wallpaper-preview.jpg" alt="hole-img">
<img class="p-sm-img" src="/images/helianthus-yellow-flower-pixabay_11863.jpg cliff.jpg" alt="sm-cliff-img">
<img class="p-sm-img" src="/images/image_large.jpg" alt="sunrise-img">
<img class="p-sm-img first-last-img" src="/images/photo-1448375240586-882707db888b.jpg" alt="tree-img">
</aside>
</section>
<script src="app.js"></script>
</body>
</html>
.place-art {
grid-column: 1/2;
display: grid;
grid-template-rows: 3fr 1fr;
}
.place-desc-sec{
grid-row: 1/-2;
}
.place-aside {
border: solid 0.5vh;
border-color: rgba(185, 218, 100, 0.862);
border-radius: 1vh;
margin-top: 6vh;
overflow-y: scroll;
display: flex;
flex-direction: column;
}
.place-sec {
display: grid;
grid-template-columns: 2fr 1fr;
}
.first-last-img {
margin: 0;
}
.p-sm-img {
margin: 0.2vh 0;
width: 23.5vw;
}
#bigImg {
max-width: 500px;
position: fixed;
right: 0;
top: 0;
}
.p-lrg-img {
visibility: hidden;
opacity: 0.2;
grid-row: 1/-2;
grid-column: 1/2;
}
.why-i-like-place {
grid-row: 2/3;
grid-column: 1/2
}
a = document.querySelectorAll(".p-sm-img");
for (i in a) {
a[i].onmouseover = function (e) {
document.querySelector("#bigImg").src = this.src;
};
}
I hope open in a lightbox view help you in this case
function openModal() {
document.getElementById("myModal").style.display = "block";
}
function closeModal() {
document.getElementById("myModal").style.display = "none";
}
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
captionText.innerHTML = dots[slideIndex-1].alt;
}
body {
font-family: Verdana, sans-serif;
margin: 0;
}
* {
box-sizing: border-box;
}
.row > .column {
padding: 0 8px;
}
.row:after {
content: "";
display: table;
clear: both;
}
.column {
float: left;
width: 25%;
}
/* The Modal (background) */
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: black;
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
width: 90%;
max-width: 1200px;
}
/* The Close Button */
.close {
color: white;
position: absolute;
top: 10px;
right: 25px;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #999;
text-decoration: none;
cursor: pointer;
}
.mySlides {
display: none;
}
.cursor {
cursor: pointer;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
img {
margin-bottom: -4px;
}
.caption-container {
text-align: center;
background-color: black;
padding: 2px 16px;
color: white;
}
.demo {
opacity: 0.6;
}
.active,
.demo:hover {
opacity: 1;
}
img.hover-shadow {
transition: 0.3s;
}
.hover-shadow:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
<div class="row">
<div class="column">
<img src="https://www.fotoaparat.cz/imgs/a/26/2639/0n1wjdf0-cr-em13-09-1200x627x9.jpg" style="width:100%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://images.unsplash.com/photo-1579353977828-2a4eab540b9a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8c2FtcGxlfGVufDB8fDB8fA%3D%3D&w=1000&q=80" style="width:100%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
</div>
<div class="row">
<div class="column">
<img src="https://www.fotoaparat.cz/imgs/a/26/2639/0n1wjdf0-cr-em13-09-1200x627x9.jpg" style="width:100%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor">
</div>
<div class="column">
<img src="https://images.unsplash.com/photo-1579353977828-2a4eab540b9a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8c2FtcGxlfGVufDB8fDB8fA%3D%3D&w=1000&q=80" style="width:100%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor">
</div>
</div>
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext">1 / 4</div>
<img src="https://www.fotoaparat.cz/imgs/a/26/2639/0n1wjdf0-cr-em13-09-1200x627x9.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 4</div>
<img src="https://images.unsplash.com/photo-1579353977828-2a4eab540b9a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8c2FtcGxlfGVufDB8fDB8fA%3D%3D&w=1000&q=80" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 4</div>
<img src="img_mountains_wide.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">4 / 4</div>
<img src="img_lights_wide.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="column">
<img class="demo cursor" src="img_nature_wide.jpg" style="width:100%" onclick="currentSlide(1)" alt="Nature and sunrise">
</div>
<div class="column">
<img class="demo cursor" src="img_snow_wide.jpg" style="width:100%" onclick="currentSlide(2)" alt="Snow">
</div>
<div class="column">
<img class="demo cursor" src="img_mountains_wide.jpg" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
</div>
<div class="column">
<img class="demo cursor" src="img_lights_wide.jpg" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
</div>
</div>
</div>
</div>
This question already has an answer here:
CSS Grid vs dynamic definition list autoplacement
(1 answer)
Closed 6 months ago.
I am building a calculator with HTML, CSS, and JavaScript. I am facing difficulty building the basic design of the app.
I have no clue why the space is in there. I tried adding negative margin but that didn't work too.
GOAL
CURRENT STATE
.container {
height: 500px;
width: 400px;
background-color: #3333;
border-radius: 10px;
}
.output {
height: 100px;
padding: 3rem 3rem 6rem 3rem;
font-size: 2.5rem;
text-align: right;
background-color: #eee;
border-radius: 10px;
}
.buttons {
width: 400px;
display: grid;
row-gap: 1%;
padding: 1rem;
justify-self: center;
}
button {
width: 80px;
height: 40px;
font-size: 1.2rem;
border: none;
border-radius: 2px;
background-color: #70a1ff;
color: #130f40;
cursor: pointer;
}
.item0,
.item7,
.item10,
.item13,
.item16 {
grid-column: 1;
}
.item1,
.item8,
.item11,
.item14,
.item17 {
grid-column: 2;
}
.item2,
.item9,
.item12,
.item15 {
grid-column: 3;
}
.item3,
.item4,
.item5,
.item6,
.item18 {
grid-column: 4;
}
.item18 button {
background-color: #eb4d4b;
color: #fff;
}
.item5 button,
.item3 button,
.item4 button,
.item6 button {
background-color: #4834d4;
color: #fff;
}
<div class="container">
<div class="output">
<h3>69</h3>
</div>
<div class="buttons">
<div class="item0">
<button>AC</button>
</div>
<div class="item1">
<button>C</button>
</div>
<div class="item2">
<button>%</button>
</div>
<div class="item3">
<button>÷</button>
</div>
<div class="item4">
<button>×</button>
</div>
<div class="item5">
<button>-</button>
</div>
<div class="item6">
<button>+</button>
</div>
<div class="item7">
<button>1</button>
</div>
<div class="item8">
<button>2</button>
</div>
<div class="item9">
<button>3</button>
</div>
<div class="item10">
<button>4</button>
</div>
<div class="item11">
<button>5</button>
</div>
<div class="item12">
<button>6</button>
</div>
<div class="item13">
<button>7</button>
</div>
<div class="item14">
<button>8</button>
</div>
<div class="item15">
<button>9</button>
</div>
<div class="item16">
<button>0</button>
</div>
<div class="item17">
<button>.</button>
</div>
<div class="item18">
<button>=</button>
</div>
</div>
</div>
</div>
There is no reason to wrap every single button in a div. The whole reason to use a grid in the first place is to not hard-code everything HTML-wise but only apply the grid to the container. Simply create a 4-column grid (grid-template-columns: repeat(4, 1fr) and let the "equal" button span 2 columns:
.container {
height: 500px;
width: 400px;
background-color: #3333;
border-radius: 10px;
}
.output {
height: 100px;
padding: 3rem 3rem 6rem 3rem;
font-size: 2.5rem;
text-align: right;
background-color: #eee;
border-radius: 10px;
}
.buttons {
width: 400px;
display: grid;
grid-gap: 2px;
grid-template-columns: repeat(4, 1fr);
}
button {
height: 40px;
font-size: 1.2rem;
border: none;
border-radius: 2px;
background-color: #70a1ff;
color: #130f40;
cursor: pointer;
}
.buttons button:last-child {
grid-column: span 2;
background-color: red;
}
<div class="container">
<div class="output">
<h3>69</h3>
</div>
<div class="buttons">
<button>AC</button>
<button>C</button>
<button>%</button>
<button>÷</button>
<button>×</button>
<button>-</button>
<button>+</button>
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button>7</button>
<button>8</button>
<button>9</button>
<button>0</button>
<button>.</button>
<button>=</button>
</div>
</div>
My issue:
I'm making somewhat of a Zillow clone. I need the page to not expand beyond 100% of the viewport height however, I'm making a section with the intentions of having the overflow property set to scroll. When I do this, the section expands beyond the viewport height and leaves a large whitespace at the bottom of my page. I can adjust the height to fill up to 100vh however, if I adjust the screen vertically the div with the scroll overflow doesn't adjust to the viewport height. Thanks for any and all help!
Here's a screenshot of my issue:
The circled section is the section that I need the overflow to scroll:
This is my HTML for the entire 'popup' portion:
<div class="home__popup--backdrop">
<div class="home__popup--container">
<div class="home__popup--left">
<div class="home__popup--img--container">
<div class="home__popup--img--main--container">
<img src="./src/img/home-0.jpg" alt="home-0" class="home__popup--img--main">
</div>
<div class="home__popup--img--sub--container">
<img src="./src/img/home-1.jpg" alt="home-0" class="home__popup--img--sub">
<img src="./src/img/home-2.jpg" alt="home-0" class="home__popup--img--sub">
<img src="./src/img/home-3.jpg" alt="home-0" class="home__popup--img--sub">
<img src="./src/img/home-4.jpg" alt="home-0" class="home__popup--img--sub">
<img src="./src/img/home-5.jpg" alt="home-0" class="home__popup--img--sub">
<img src="./src/img/home-0.jpg" alt="home-0" class="home__popup--img--sub">
<img src="./src/img/home-1.jpg" alt="home-0" class="home__popup--img--sub">
<img src="./src/img/home-2.jpg" alt="home-0" class="home__popup--img--sub">
</div>
</div>
</div>
<div class="home__popup--right">
<div class="home__popup--header--container">
<div class="home__popup--logo--container">
<div class="logo__container--home">
<img src="./src/img/logo__house.svg" alt="logo-homes" class="logo logo__homes logo__homes--small">
</div>
<div class="logo__container--txt">
<img src="./src/img/logo__txt.svg" alt="logo-homes" class="logo logo__homes logo__txt--small">
</div>
</div>
<div class="home__popup--social--container">
<div class="home__popup--social">
<img src="./src/img/like.svg" alt="logo like" class="popup__logo logo__like">
<p>Save</p>
</div>
<div class="home__popup--share">
<div class="home__popup--social">
<img src="./src/img/next.svg" alt="logo next" class="popup__logo logo__next">
<p>Share</p>
</div>
</div>
<div class="home__popup--more">
<div class="home__popup--social">
<img src="./src/img/more.svg" alt="logo more" class="popup__logo logo__more">
<p>More</p>
</div>
</div>
</div>
</div>
<div class="home__popup--details--container">
<div class="home__popup--details">
<p class="home__popup--price">$500,000</p>
<p class="home__popup--beds home__popup--details--home">3 <span>bds</span></p>
<p class="home__popup--baths home__popup--details--home">2 <span>ba</span></p>
<p class="home__popup--sqft home__popup--details--home">2,245 <span>sqft</span></p>
</div>
<div class="home__popup--address--container">
<p class="home__popup--address">
4210 sharman rd<span>, </span>
</p>
<p class="home__popup--city">Madison<span>, </span></p>
<p class="home__popup--state">WI</p>
</div>
<div class="home__popup--btn--container">
<button class="btn__agent">Contact Agent</button>
</div>
</div>
<div class="home__popup--overview--container">
<div class="home__popup--overview--container--links">
<img src="./src/img/001-left-arrow.svg" alt="arrow-left" class = 'arrow-small arrow-small--left'>
<div class="home__popup--overview home__popup--overview--active home__popup--overview--container--links--text--container" data-list-section = 0>
<p class="home__popup--overview--text home__popup--overview--container--links--text">Overview</p>
</div>
<div class="home__popup--facts home__popup--overview--container--links--text--container">
<p class="home__popup--facts--text home__popup--overview--container--links--text">Facts and features</p>
</div>
<div class="home__popup--value home__popup--overview--container--links--text--container">
<p class="home__popup--value--text home__popup--overview--container--links--text">Home value</p>
</div>
<div class="home__popup--history home__popup--overview--container--links--text--container" data-list-section = 1>
<p class="home__popup--history--text home__popup--overview--container--links--text">Price and tax history</p>
</div>
<div class="home__popup--monthly home__popup--overview--container--links--text--container">
<p class="home__popup--monthly--text home__popup--overview--container--links--text">Monthly cost</p>
</div>
<div class="home__popup--rental home__popup--overview--container--links--text--container">
<p class="home__popup--rental--text home__popup--overview--container--links--text">Rental Value</p>
</div>
<div class="home__popup--schools home__popup--overview--container--links--text--container" data-list-section = 2>
<p class="home__popup--schools--text home__popup--overview--container--links--text">Nearby schools</p>
</div>
<div class="home__popup--similar home__popup--overview--container--links--text--container">
<p class="home__popup--similar--text home__popup--overview--container--links--text">Similar homes</p>
</div>
<div class="home__popup--neighborhood home__popup--overview--container--links--text--container">
<p class="home__popup--neighborhood--text home__popup--overview--container--links--text">Neighborhood</p>
</div>
<div class="home__popup--homes-for-you home__popup--overview--container--links--text--container">
<p class="home__popup--homes-for-you--text home__popup--overview--container--links--text">Homes for you</p>
</div>
<img src="./src/img/002-right-arrow.svg" alt="arrow-right" class = 'arrow-small arrow-small--right'>
</div>
<div class="home__popup--scroll">
<div class="home__popup--home--detail--container">
<div class="home__popup--map--container">
<div class="test" id = "home__popup--map"></div>
</div>
<div class="home__popup--text--container">
<div class="home__popup--text--stats">
<P class="home__popup--text--header">Overview</P>
<div class="home__popup--text--user-activity">
<p class="home__popup--text--time">Time on Home Finder  <span> --</span></p>
<p class="home__popup--text--views">Views <span>64</span></p>
<p class="home__popup--text--saves">Saves <span>1</span></p>
</div>
<p class="home__popup--text--description">
No showings until 8/22 OH.....
</p>
<p class="home__popup--text--read-more">Read more</p>
</div>
<p class="home__popup--text--open-house--header">Open House</p>
<p class="home__popup--text--open-house--day">Sun, Aug 22</p>
<p class="home__popup--text--open-house--time">12:00 PM - 2:00 PM</p>
<ul class="home__popup--text--agent--container">
<li class="home__popup--text--agent">Kavita Biyani</li>
<li class="home__popup--text--agent">Nik Tantardini</li>
<li class="home__popup--text--agent">First Weber INC</li>
<li class="home__popup--text--agent">Lena Oberwetter</li>
<li class="home__popup--text--agent">Prince Michael</li>
</ul>
<div class="home__popup--overview--text">
</div>
<div class="home--popup--overview--specs">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Here's the HTML for the overflowed portion:
<div class="home__popup--scroll">
<div class="home__popup--home--detail--container">
<div class="home__popup--map--container">
<div class="test" id = "home__popup--map"></div>
</div>
<div class="home__popup--text--container">
<div class="home__popup--text--stats">
<P class="home__popup--text--header">Overview</P>
<div class="home__popup--text--user-activity">
<p class="home__popup--text--time">Time on Home Finder  <span> --</span></p>
<p class="home__popup--text--views">Views <span>64</span></p>
<p class="home__popup--text--saves">Saves <span>1</span></p>
</div>
<p class="home__popup--text--description">
No showings until 8/22 OH. Amazing opportunity ...
</p>
<p class="home__popup--text--read-more">Read more</p>
</div>
<p class="home__popup--text--open-house--header">Open House</p>
<p class="home__popup--text--open-house--day">Sun, Aug 22</p>
<p class="home__popup--text--open-house--time">12:00 PM - 2:00 PM</p>
<ul class="home__popup--text--agent--container">
<li class="home__popup--text--agent">Kavita Biyani</li>
<li class="home__popup--text--agent">Nik Tantardini</li>
<li class="home__popup--text--agent">First Weber INC</li>
<li class="home__popup--text--agent">Lena Oberwetter</li>
<li class="home__popup--text--agent">Prince Michael</li>
</ul>
<div class="home__popup--overview--text">
</div>
<div class="home--popup--overview--specs">
</div>
</div>
</div>
Here is the relevant css:
.home__popup {
&--home--detail--container {
}
&--text {
&--description{
font-size: 1.8rem;
font-weight: 300;
color: $color-grey-text;
line-height: 1.3;
}
&--user-activity{
display: flex;
margin-bottom: 2rem;
font-size: 1.4rem;
color: $color-grey-text;
& span{
color: black;
}
}
&--time{
margin-right: 2rem;
border-right: 1px solid $color-grey-medium;
& span{
font-weight: bold;
margin-right: 2rem;
}
}
&--saves{
margin-left: 2rem;
& span{
font-weight: bold;
}
}
&--views{
margin-right: 2rem;
border-right: 1px solid $color-grey-medium;
& span{
font-weight: bold;
margin-right: 2rem;
}
}
&--header {
font-size: 2rem;
font-weight: 700;
letter-spacing: 0.5px;
margin-bottom: 2rem;
}
&--container {
margin-top: 2rem;
display: flex;
flex-direction: column;
margin-left: 1rem;
}
}
&--btn {
&--container {
margin-top: 1rem;
margin-left: 1rem;
display: flex;
justify-content: space-between;
width: 100%;
position: relative;
}
}
&--address {
&--container {
display: flex;
font-weight: 300;
font-size: 1.6rem;
margin-left: 1rem;
margin-top: 1rem;
}
}
&--baths {
margin-left: 0.5rem;
}
&--beds {
margin-left: 2rem;
}
&--price {
margin-top: 3rem;
font-size: 2.5rem;
font-weight: 500;
margin-left: 1rem;
}
&--social {
cursor: pointer;
&--container {
display: flex;
align-items: center;
width: 45%;
justify-content: space-around;
}
}
&--backdrop {
width: 100vw;
height: 100vh;
z-index: 2999;
position: absolute;
top: 0;
left: 0;
backdrop-filter: blur(2px);
background-color: rgba(0, 0, 0, 0.671);
}
&--container {
position: absolute;
top: 0;
left: 50%;
height: 100vh;
width: 65vw;
background-color: white;
transform: translateX(-50%);
z-index: 3000;
backdrop-filter: blur(2px);
display: flex;
flex-direction: row;
}
&--left {
position: relative;
width: 60%;
overflow-y: scroll;
}
&--right {
width: 40%;
position: relative;
}
&--img {
&--main {
height: auto;
object-fit: cover;
width: 100%;
}
&--sub {
height: 25rem;
object-fit: cover;
width: 49.5%;
margin-bottom: 0.4rem;
&--container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
}
}
&--header {
&--container {
display: flex;
justify-content: space-between;
position: relative;
border-bottom: 1px solid #6060607a;
margin-left: 1rem;
margin-right: 1rem;
}
}
&--logo {
&--container {
display: flex;
transform: translateY(1rem);
}
&__homes {
&--small {
height: 6rem;
width: 7rem;
}
}
}
&--details {
display: flex;
align-items: flex-end;
&--container {
display: flex;
flex-direction: column;
position: relative;
}
&--home {
font-size: 1.6rem;
font-weight: 400;
& span {
border-right: 1px solid $color-grey-text;
padding-right: 0.5rem;
font-weight: 300;
}
}
}
&--sqft {
margin-left: 0.5rem;
& span {
border-right: none;
}
}
&--overview {
color: $color-primary;
border-bottom: 2px solid $color-primary;
&--container {
display: flex;
flex-direction: column;
position: relative;
&--links {
display: flex;
overflow-x: scroll;
font-size: 14px;
font-weight: 300;
height: 5rem;
align-items: center;
margin-top: 2rem;
border-top: 1px solid $color-grey-medium;
border-bottom: 1px solid $color-grey-medium;
margin-left: 0.5rem;
margin-right: 0.5rem;
&::-webkit-scrollbar {
display: none;
}
&--text {
margin-left: 1rem;
margin-right: 1rem;
width: max-content;
&--container {
cursor: pointer;
height: 100%;
display: flex;
align-items: center;
transition: .2s all;
&:hover {
color: $color-primary-light;
}
}
}
}
}
}
}
I was having way too many issues out of pure stubbornness of not wanting to change my css however, I finally gave in and refactored the section as a grid. I'm now able to get it to function properly. Here's what it looks like:
And here's the css for the grid-layout:
&--right {
width: 40%;
position: relative;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 5rem 20rem 5rem auto;
}
here's the CSS for the updated div containing the scroll bar:
&--scroll{
grid-column: 1/-1;
grid-row: 4/5;
overflow-y: scroll;
overflow-x: hidden;
}
HTMl STARTS HERE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Raleway:wght#400;700&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
/>
<link rel="stylesheet" href="./css/main.css" />
<title>Fylo | light theme page</title>
</head>
<body>
<header id="header-home">
<div class="container">
<nav class="nav-bar">
<img src="./images/logo.svg" alt="" />
<div class="nav-list">
<ul>
<li>Features</li>
<li>Sing In</li>
<li>Team</li>
</ul>
</div>
</nav>
</div>
</header>
<section id="header-content">
<div class="container">
<div class="main">
<div class="header-content-1">
<h1 class="header-title">
All your files in one secure location accessible anywhere
</h1>
<p class="header-text">
Fylo stores your most important files in one secure location.
Access them wherever you need, share and collaborate with friends,
family, and co-workers.
</p>
<form action="" class="form">
<input
type="email"
name=""
id=""
placeholder="Enter your email"
class="input"
/>
<button class="btn-main">Get Started</button>
</form>
</div>
<div class="header-content-2">
<img src="./images/illustration-1.svg" alt="" />
</div>
</div>
</div>
</section>
<section id="productive">
<div class="container">
<div class="main-2">
<div class="main-context">
<h2 class="header">Stay Productive wherever you are</h2>
<p class="text-1">
Never let location be an issue whn accessing your files. Fylo has
you covered for all your file storage needs
</p>
<p class="text-2">
Securely share your files and folders with friends, family and
colleaues for live collaboration. No email attachment required
</p>
<a href="#" class="link"
>See how fylo works <img src="./images/icon-arrow.svg" alt=""
/></a>
<div class="card">
<img src="./images/icon-quotes.svg" alt="" />
<p class="card-text">
Fylo has improved our team productivity by an rder of magnitude.
Since making the switch our team has become a well-oiled
collaboration machine
</p>
<div class="avatar-info">
<img src="./images/avatar-testimonial.jpg" alt="" />
<div class="avatar-name">
<h4>Kyle Burton</h4>
<p>Founder& & CEO, Huddle</p>
</div>
</div>
</div>
</div>
<div class="image-container">
<img src="./images/illustration-2.svg" alt="" class="image-two" />
</div>
</div>
</div>`
</section>
</body>
</html>
CSS STARTS HERE
#import "variables";
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
// color: #fff;
font-family: "Open sans", sans-serif;
line-height: 1.6;
}
a {
color: $links;
text-decoration: none;
}
// img {
// max-width: %;
// }
ul {
list-style: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
line-height: 1.6;
font-family: "Raleway", sans-serif;
color: $footer;
// text-align: center;
// margin: 10px 0;
}
p {
line-height: 1.6;
font-family: "Raleway", sans-serif;
font-size: 0.95rem;
// text-align: center;
// margin: 10px 0;
// color: ;
}
#import "utilities";
#header-home {
grid-area: header;
// display: grid;
.nav-bar {
display: grid;
grid-template-columns: 1fr 2fr;
// margin-top: 50px;
padding: 2rem 1.5rem;
position: sticky;
// justify-content: space-between;
ul {
display: grid;
grid-template-columns: repeat(3, auto);
justify-content: end;
align-items: center;
height: 100%;
margin: 0;
li {
padding: 0 10px;
a {
font-size: 0.9rem;
text-transform: uppercase;
margin-right: 0.75rem;
border-bottom: 2px transparent solid;
padding: 2px 0;
transition: border-color 0.2s;
color: black;
&:hover {
border-color: $footer;
}
&.current {
border-color: $footer;
}
&:last-of-type {
margin-right: 0;
}
}
}
}
img {
max-width: 60%;
}
}
}
#header-content {
margin-top: 90px;
grid-area: section;
// height: 100vh;
.main {
display: grid;
grid-template-columns: 1fr 1fr;
.header-content-1 {
// justify-content: center;
// width: 200px;
grid-column: 1/2;
grid-row: 1/4;
.header-title {
align-self: flex-end;
font-size: 3rem;
// grid-column: 1/2;
}
.header-text {
grid-column: 1/2;
grid-row: 2/3;
// width: 80%;
margin-top: 20px;
// padding: 0 40px;
}
.form {
margin-top: 20px;
grid-column: 1/2;
grid-row: 2/3;
.input {
width: 300px;
padding: 15px;
border-radius: 4px;
border: 1px solid $bg-2;
&:focus {
outline: none;
}
}
}
}
.header-content-2 {
img {
grid-column: 2/3;
grid-row: 1/3;
max-width: 80%;
justify-self: center;
// margin-top: -10%;
align-self: center;
}
}
}
}
#productive {
// margin-top: 200px;
// // background-color: $bg-2;
// position: relative;
background-image: url(../dist/images/logo.svg);
background-color: hsl(240, 75%, 98%);
margin-top: 100px;
// position: relative;
padding: 50px 0;
// grid-area: section;
}
Image background on the #productive section. i have tried a number of things and it is not responding.
You will probably need to specify the background width and position. Here is an example:
div {
width: 100px;
height: 100px;
background-image: url(https://images7.memedroid.com/images/UPLOADED891/5c39cdc9b5921.jpeg);
background-size: 100px;
background-position: center;
}
<div>
</div>
I have some problems laying out my elements. I tried to achieve the following layout in my web application:
I tried to use div´s and style them but it looks like this when I run it
I wanted to create a grid with three container in each row. Also for responsiveness I used flexbox.
Any suggestions how the layout could improve? I think I messed it up a little.
.contacts-container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
h1.subheading {
color: red;
}
.contact {
flex: 0 0 32%;
/* don't grow, don't shrink, width */
margin-bottom: 5px;
border: 1px solid #ddd;
}
.contact a {
color: black;
text-decoration: none;
}
.contactInfo {
padding: 1.4em;
float: left;
}
.contactInfo h2 {
margin-top: 0;
margin-bottom: 0.5em;
font-weight: normal;
}
.contactInfo p {
font-size: 95%;
}
.contactInfo .contactName {
float: right;
}
.contactDetails {
float: left;
}
.contactDetails img {
width: 50px;
height: 50px;
}
#contact .contact-buttons {
position: absolute;
bottom: 0;
left: 0;
}
/* Using flexbox with media queries to make the layout responsive*/
#media screen and (min-width: 40em) {
.contacts-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-top: -1em;
}
.contact-info {
display: flex;
flex: 0 1 calc(50% - 0.5em);
margin-bottom: 1em;
}
}
#media screen and (min-width: 60em) {
.contacts-container {
margin-top: inherit;
}
.contact-info {
flex: 0 1 calc(33% - 1em);
margin-bottom: 2em;
}
}
<div class="contacts">
<h1 class="subheading">Deine Kontakte</h1>
<div class="contacts-container">
<div v-for="contact in contacts" class="contact" :key="contact.name">
<div class="contactInfo">
<img :src="getImage(contactImg)" />
<div class="contactName">
<p>Prename Surname</p>
<p>City</p>
<p>Country</p>
</div>
</div>
<div class="contactDetails">
<div>
<img :src="getImage(contactImg)" style="" /> test#test.com
</div>
<div>
<img :src="getImage(contactImg)" /> test#test.com
</div>
<div>
<img :src="getImage(contactImg)" /> test#test.com
</div>
</div>
<div class="contact-buttons">
<button v-on:click="counter += 1">Add 1</button>
<button v-on:click="counter += 1">Add 1</button>
</div>
</div>
</div>
</div>
.contacts {
width: 300px;
padding: 40px;
border: 1px solid black;
}
.contact {
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.contact .contactInfo {
display: flex;
margin-bottom: 30px;
}
.contact .contactInfo img {}
.contact .contactInfo .contactName {
margin: auto 0;
margin-left: 30px;
}
.contact .contactDetails {
margin-bottom: 30px;
border: 1px solid black;
}
.contact .contactDetails div {
display: flex;
margin: 10px;
}
.contact .contactDetails div p {
margin-left: 30px;
}
.contact .contact-buttons {
width: 100%;
display: flex;
justify-content: space-between;
}
<div class="contacts">
<h1 class="subheading">Deine Kontakte</h1>
<div class="contacts-container">
<div v-for="contact in contacts" class="contact" :key="contact.name">
<div class="contactInfo">
<img src="https://via.placeholder.com/150" />
<div class="contactName">
<p>Prename Surname</p>
<p>City</p>
<p>Country</p>
</div>
</div>
<div class="contactDetails">
<div>
<img src="https://via.placeholder.com/50" />
<p>test#test.com</p>
</div>
<div>
<img src="https://via.placeholder.com/50" />
<p>test#test.com</p>
</div>
<div>
<img src="https://via.placeholder.com/50" />
<p>test#test.com</p>
</div>
</div>
<div class="contact-buttons">
<button v-on:click="counter += 1">Add 1</button>
<button v-on:click="counter += 1">Add 1</button>
</div>
</div>
</div>
</div>
.contact {
margin-bottom: 5px;
border: 1px solid #ddd;
padding: 10px;
}
.contactInfo {
display: flex;
align-items: center;
}
.contactDetails {
border: 1px solid #ddd;
padding: 10px;
}
.contactDetailsRow {
display: flex;
flex-wrap: nowrap;
align-items: center;
}
.contactName,
.contactDetailsRowName {
flex: 1;
padding-left: 10px;
}
.contact-buttons {
display: flex;
}
.contact-buttons > button {
flex: 1;
margin: 10px;
}
<div class="contact">
<div class="contactInfo">
<div>
<img src="https://via.placeholder.com/100" />
</div>
<div class="contactName">
<h5>Prename Surname</h5>
<p>City</p>
<p>Country</p>
</div>
</div>
<div class="contactDetails">
<div class="contactDetailsRow">
<div>
<img src="https://via.placeholder.com/50"/>
</div>
<div class="contactDetailsRowName">
test#test.com
</div>
</div>
<div class="contactDetailsRow">
<div>
<img src="https://via.placeholder.com/50"/>
</div>
<div class="contactDetailsRowName">
test#test.com
</div>
</div>
<div class="contactDetailsRow">
<div>
<img src="https://via.placeholder.com/50"/>
</div>
<div class="contactDetailsRowName">
test#test.com
</div>
</div>
</div>
<div class="contact-buttons">
<button>Add 1</button>
<button>Add 1</button>
</div>
</div>
Been a while but something like this?
:root {
--baseMargin: 1.4em;
--buttonBorderRadius: 0.5em 0.5em 0.5em 0.5em;
--paddingBaseFill: calc(var(--baseMargin) * 2);
}
.contactInfo img {
min-width: 10em;
}
.contacts-container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-around;
}
h1.subheading {
color: red;
}
.contact {
flex: 0 1;
display: flex;
flex-direction: column;
/* don't grow, don't shrink, width */
margin-bottom: 5px;
border: 1px solid #ddd;
}
.wrapper {
margin: 0 var(--baseMargin);
}
.contact a {
color: black;
text-decoration: none;
}
.contactInfo {
flex: 1 1;
display: flex;
padding: var(--paddingBaseFill) 0;
}
.contactInfo h2 {
margin-top: 0;
margin-bottom: 0.5em;
font-weight: normal;
}
.contactInfo p {
font-size: 95%;
}
.contactInfo .contactName {
flex: 1 1;
margin-left: var(--baseMargin);
text-align: center;
}
.contactDetails {
flex: 1 1;
padding: 1em;
border: 0.1em solid black;
}
.contactDetails div {
display: flex;
align-items: center;
}
.contactDetails img {
width: 50px;
height: 50px;
padding: 0.5em;
}
.contact-buttons {
flex: 1 1;
display: flex;
justify-content: space-between;
padding: var(--baseMargin) 0;
}
.contact-buttons button {
font-size: 1.2em;
background: #018bff;
border-radius: var(--buttonBorderRadius);
padding: 0.25em;
color: #fff;
}
<div class="contacts">
<h1 class="subheading">Deine Kontakte</h1>
<div class="contacts-container">
<div v-for="contact in contacts" class="contact" :key="contact.name">
<div class="contactInfo wrapper">
<img :src="getImage(contactImg)" />
<div class="contactName">
<p>Prename Surname</p>
<p>City</p>
<p>Country</p>
</div>
</div>
<div class="contactDetails wrapper">
<div>
<img :src="getImage(contactImg)" style="" /> test#test.com
</div>
<div>
<img :src="getImage(contactImg)" /> test#test.com
</div>
<div>
<img :src="getImage(contactImg)" /> test#test.com
</div>
</div>
<div class="contact-buttons wrapper">
<button v-on:click="counter += 1">Add 1</button>
<button v-on:click="counter += 1">Add 1</button>
</div>
</div>
</div>
</div>