I'm new to css I created this footer, I have one problem here.
when I try to shrink it the tables disappear and bypass the screen borber and I want it to stay within the screen desired size, would love to know what I did wrong, Thank you.
note: I'm not trying to make it responsive yet I just want to be able to see all the content inside the screen borber.
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">
<link rel="stylesheet" href="style.css">
<title>footer trial</title>
</head>
<body>
<footer>
<div class="footer">
<div class="table1 tables">
<h2 class="table-title">ABOUT</h2>
<p class="about">Lorem ipsum dolor sit amet consectetur adipisicing elit.<br> Odit impedit molestiae amet ab maxime saepe qui est<br>, temporibus voluptatibus eaque nihil, ut, omnis sit fugiat cupiditate explicabo. Repellat totam nisi incidunt.<br> Nulla nisi officiis ex, facilis delectus modi, dolor numquam consequuntur aspernatur,<br> harum autem perferendis iure ab! Praesentium, ea corrupti!</p>
</div>
<ul>
<div class="table2 tables">
<h2 class="table-title">INFORMATION</h2>
<nav class="table-links">
<li>table-link1</li>
<li>table-link2</li>
<li>table-link3</li>
</nav>
</div>
<div class="table3 tables">
<h2 class="table-title">CATALOGS</h2>
<nav class="table-links">
<li>table-link1</li>
<li>table-link2</li>
<li>table-link3</li>
</nav>
</div>
<div class="table4 tables">
<h2 class="table-title">SITEMAP</h2>
<nav class="table-links">
<li>table-link1</li>
<li>table-link2</li>
<li>table-link3</li>
</nav>
</div>
<div class="table5 tables">
<h2 class="table-title">CONTACT</h2>
<p class="about">Lorem ipsum dolor sit amet consectetur adipisicing elit.<br> Odit impedit molestiae amet ab maxime saepe qui est<br>, temporibus voluptatibus eaque nihil, ut, omnis sit fugiat cupiditate explicabo. Repellat totam nisi incidunt.<br> Nulla nisi officiis ex, facilis delectus modi, dolor numquam consequuntur aspernatur,<br> harum autem perferendis iure ab! Praesentium, ea corrupti!</p>
</div>
</ul>
</div>
</footer>
<div>
all rights reserved 2022
</div>
</body>
</html>
CSS :
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300;400;600&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
text-decoration: none;
list-style: none;
}
body {
position: fixed;
width: 100%;
left: 0px;
bottom: 0px;
}
.footer {
background-color: rgb(4, 97, 97);
color: #fff;
gap: 15rem;
padding: 20px;
width: 100%;
display: flex;
justify-content:flex-start;
margin-left: auto;
margin-right: auto;
}
ul {
gap: 7rem;
display: flex;
justify-content:space-evenly;
}
.about {
width: 400px;
text-align: justify;
margin-left: auto;
}
.table1 {
margin-left: 5rem;
margin-bottom: 2rem;
}
.table-title {
color: rgb(4, 224, 151);
line-height: 3rem;
margin-bottom: 1rem;
}
.table-links {
text-align: center;
line-height: 2rem;
font-weight: 400;
}
.table-link {
color: #fff;
text-align: center;
}
.copyright {
background-color: rgb(5, 120, 124);
color: #fff;
padding: 10px;
width: 100%;
display: flex;
justify-content:center;
word-spacing: 0.24rem;
}
Try this if it solve your problem, let me know if anything needed:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
text-decoration: none;
list-style: none;
}
body {
position: fixed;
width: 100%;
left: 0px;
bottom: 0px;
}
.footer {
background-color: rgb(4, 97, 97);
color: #fff;
padding: 20px;
display: flex;
justify-content: space-between;
}
.about {
width: 400px;
text-align: justify;
margin-left: auto;
}
.table1 {
margin-left: 5rem;
margin-bottom: 2rem;
}
.table-title {
color: rgb(4, 224, 151);
line-height: 3rem;
margin-bottom: 1rem;
}
.table-links {
text-align: center;
line-height: 2rem;
font-weight: 400;
}
.table-link {
color: #fff;
text-align: center;
}
.copyright {
background-color: rgb(5, 120, 124);
color: #fff;
padding: 10px;
width: 100%;
display: flex;
justify-content: center;
word-spacing: 0.24rem;
}
<!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>footer trial</title>
</head>
<body>
<footer>
<div class="footer">
<div class="table1 tables">
<h2 class="table-title">ABOUT</h2>
<p class="about">
Lorem ipsum dolor sit amet consectetur adipisicing elit. <br> Odit impedit molestiae amet ab maxime
saepe qui est <br>, temporibus voluptatibus eaque nihil, ut, omnis sit fugiat cupiditate explicabo.
Repellat totam nisi incidunt.<br> Nulla nisi officiis ex, facilis delectusmodi, dolor numquam
consequuntur aspernatur,<br> harum autem perferendis iure ab! Praesentium, eacorrupti!
</p>
</div>
<div class="table2 tables">
<h2 class="table-title">INFORMATION</h2>
<nav class="table-links">
<li>table-link1</li>
<li>table-link2</li>
<li>table-link3</li>
</nav>
</div>
<div class="table3 tables">
<h2 class="table-title">CATALOGS</h2>
<nav class="table-links">
<li>table-link1</li>
<li>table-link2</li>
<li>table-link3</li>
</nav>
</div>
<div class="table4 tables">
<h2 class="table-title">SITEMAP</h2>
<nav class="table-links">
<li>table-link1</li>
<li>table-link2</li>
<li>table-link3</li>
</nav>
</div>
<div class="table5 tables">
<h2 class="table-title">CONTACT</h2>
<p class="about">Lorem ipsum dolor sit amet consectetur adipisicing elit.<br> Odit impedit molestiae
amet ab maxime saepe qui est<br>, temporibus voluptatibus eaque nihil, ut, omnis sit fugiat
cupiditate explicabo. Repellat totam nisi incidunt.<br> Nulla nisi officiis ex, facilis delectus
modi, dolor numquam consequuntur aspernatur,<br> harum autem perferendis iure ab! Praesentium,
ea corrupti!</p>
</div>
</div>
</footer>
<div>
all rights reserved 2022
</div>
</body>
</html>
Related
I have created a sample page with a fixed background. I want the page to lighten up as the page is scrolled down.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.5)), url(https://plus.unsplash.com/premium_photo-1673491310188-f14100075189?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80);
background-attachment: fixed;
}
.content {
padding: 10px;
}
.navbar {
background-color: white;
float: right;
padding: 10px;
margin: 10px;
position: sticky;
top: 0;
border-radius: 10px;
}
.paras {
margin: 20px;
}
.message {
background-color: white;
float: right;
padding: 10px;
margin: 10px;
position: sticky;
bottom: 0;
border-radius: 10px;
}
<!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="style.css">
<title>SkyLine</title>
</head>
<body>
<div class="content">
<div class="navbar">
Home
</div>
<div class="navbar">
Contact Us
</div>
<div class="navbar">
About Us
</div>
<div class="paras">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque non quibusdam neque nostrum id blanditiis totam quas facere, sit vitae repudiandae aliquam omnis dolorum tempore fuga reprehenderit at suscipit porro.</p>
</div>
<div class="message">
Send a message
</div>
</div>
</body>
</html>
Instead, in my current code, the top of the screen is dark and the bottom is light. It doesn't get lighter as the page is scrolled down.
I want to achieve this effect:
https://www.wix.com/website-template/view/html/1896?originUrl=https%3A%2F%2Fwww.wix.com%2Fwebsite%2Ftemplates&tpClick=view_button&esi=c5ca042c-26c4-41cb-bc5f-01e47031976d
Your mistake is that you did a gradient from black to white, while you actually need a gradient from fully transparent white to almost opaque white to lighten your content.
In the snippet below, I changed the body linear-gradient to achieve the expected result :
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
/*Removed linear gradient from this background-image or else the gradient wouldn't 'lighten' the content on scroll */
background-image: url(https://plus.unsplash.com/premium_photo-1673491310188-f14100075189?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80);
background-attachment: fixed;
}
.content {
/* Added linear-gradient */
background-image: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8015405991498161) 40%, rgba(255,255,255,0.8) 100%);
padding: 10px;
}
.navbar {
background-color: white;
float: right;
padding: 10px;
margin: 10px;
position: sticky;
top: 0;
right: 10px;
border-radius: 10px;
}
.paras {
margin: 20px;
}
.message {
display: inline-block; /* Changed display property to avoid the element having full width */
background-color: white;
/* float: right; Removed so it doesn't break the content display */
padding: 10px;
margin: 10px;
position: sticky;
bottom: 0;
border-radius: 10px;
}
<!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="style.css">
<title>SkyLine</title>
</head>
<body>
<div class="content">
<div class="navbar">
Home
</div>
<div class="navbar">
Contact Us
</div>
<div class="navbar">
About Us
</div>
<div class="paras">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque non quibusdam neque nostrum id blanditiis totam quas facere, sit vitae repudiandae aliquam omnis dolorum tempore fuga reprehenderit at suscipit porro.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque non quibusdam neque nostrum id blanditiis totam quas facere, sit vitae repudiandae aliquam omnis dolorum tempore fuga reprehenderit at suscipit porro.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque non quibusdam neque nostrum id blanditiis totam quas facere, sit vitae repudiandae aliquam omnis dolorum tempore fuga reprehenderit at suscipit porro.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque non quibusdam neque nostrum id blanditiis totam quas facere, sit vitae repudiandae aliquam omnis dolorum tempore fuga reprehenderit at suscipit porro.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque non quibusdam neque nostrum id blanditiis totam quas facere, sit vitae repudiandae aliquam omnis dolorum tempore fuga reprehenderit at suscipit porro.</p>
</div>
<div class="message">
Send a message
</div>
</div>
</body>
</html>
I am trying to build a carousel from scratch in React. I want the active card to be in the middle and the others to show a portion of them on the side. When I put overflow hidden, it hides the portions.
How do I make it so that the side portions appear but I still maintain the background image blur?
here is my jsx code:
import React from 'react'
import './Header.css'
import {images} from '../../constants'
import Blur from 'react-blur'
const Header = () => {
return (
<Blur className="app__header" img={images.bgcake} blurRadius={35} style={{height: "100vh"}} >
<div className="app__header-carousel">
<div className="app__header-carousel-1">
<img className="app__header-carousel-img" alt="pink cake" src={images.carousel01} />
<div className="app__header-carousel-content">
<h3 className="app__header-h3">Fresh Baked | Fathers Day</h3>
<h1 className="app__header-h1">MORNING BERRY</h1>
<p className="app__header-p">Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, omnis odit similique dolor ab maiores quae aliquam beatae ad deleniti porro ducimus eum provident fuga quo doloremque animi impedit unde.</p>
<button type="button" className="app__explore-button">Order</button>
<button type="button" className="app__order-button">Explore</button>
</div>
</div>
<div className="app__header-carousel-1">
<img className="app__header-carousel-img" alt="red velvet" src={images.redVelvet} />
<div className="app__header-carousel-content">
<h3 className="app__header-h3">Fresh Baked | Fathers Day</h3>
<h1 className="app__header-h1">RED VELVET</h1>
<p className="app__header-p">Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, omnis odit similique dolor ab maiores quae aliquam beatae ad deleniti porro ducimus eum provident fuga quo doloremque animi impedit unde.</p>
<button type="button" className="app__explore-button">Order</button>
<button type="button" className="app__order-button">Explore</button>
</div>
</div>
<div className="app__header-carousel-1">
<img className="app__header-carousel-img" alt="pink cupcake" src={images.carousel03} />
<div className="app__header-carousel-content">
<h3 className="app__header-h3">Fresh Baked | Fathers Day</h3>
<h1 className="app__header-h1">CUP CAKES</h1>
<p className="app__header-p">Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, omnis odit similique dolor ab maiores quae aliquam beatae ad deleniti porro ducimus eum provident fuga quo doloremque animi impedit unde.</p>
<button type="button" className="app__explore-button">Order</button>
<button type="button" className="app__order-button">Explore</button>
</div>
</div>
</div>
</Blur>
)
}
export default Header
here is my css code:
.app__header-carousel{
display: flex;
position: absolute;
top: 10%;
right: 10%;
left: 10%;
overflow: hidden;
}
.app__header-carousel-1{
display: flex;
justify-content: space-between;
height: 80vh;
width: 100%;
margin-right: 3em;
}
.app__header-carousel-img-1{
width: 80%;
}
.app__header-carousel-content{
background: #FDFFD5;
padding: 4rem 10rem 5rem 5rem;
}
.app__header-h3{
color: #76D9D2;
margin-bottom: 0.65rem;
}
.app__header-h1{
color: #F397B0;
font-size: 4rem;
margin-bottom: 0.65rem;
}
.app__header-p{
margin-bottom: 5rem;
}
.app__explore-button{
background: #2D2D2D;
color: beige;
width: 8rem;
margin-right: 0.5rem;
padding: 5px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.app__order-button{
background: #F397B0;
color: #2D2D2D;
width: 8rem;
margin-right: 0.5rem;
padding: 5px;
border: none;
border-radius: 5px;
cursor: pointer;
}
How do I make it appear how I want it to?
Given I have 2 relevant divs with a text content (each) inside a flexbox container
When the content is longer than my screen
Then I should see the width and height of both divs are balanced to consume maximum space
Here is an example where I have 2nd and 3rd div relevant. Both have some text content.
For this example I found manually flex-grow numbers for both divs to do the balance.
Question: Is it possible to do such balance using only CSS or the certain calculation should be done in JavaScript?
*, *::before, *::after {
box-sizing: border-box;
}
html, body {
background-color: #333;
height: 100%;
margin: 0;
}
.flex-container {
counter-reset: item;
position: relative;
padding: 20px;
width: 100%;
display: flex;
flex-flow: wrap;
}
.cell {
position: relative;
font-size: 25px;
padding: 1rem;
background-color: #379AD6;
color: #222;
box-shadow:0 0 0 1px white;
}
.cell:nth-child(odd) {
background-color: #5bbdfa;
}
.cell::before {
counter-increment: item;
content: 'Grid Item ' counter(item) ' ';
font-size: 25px;
font-weight: bold;
}
.flex-container .cell {
flex: 1 1 auto;
}
.flex-container .cell:first-child {
flex: 1 0 100%;
}
.flex-container .cell:nth-child(2) {
flex: 34 1;
}
.flex-container .cell:nth-child(3) {
flex: 16 1;
}
.flex-container .line-break{
width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div class="flex-container">
<div class="cell"></div>
<div class="cell">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid beatae cupiditate doloribus eaque enim et excepturi expedita fuga, minima minus neque nihil non, obcaecati officia quidem quisquam quo repellat repudiandae sapiente sunt ullam ut voluptas. Ab iste nemo numquam, quos ratione recusandae sunt! Cum ex magnam officia quia voluptatum. Reprehenderit?</div>
<div class="cell">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores cum cumque dolorem, error ex facere magni minima quaerat voluptas voluptates?</div>
<div class="line-break"></div>
<div class="cell"></div>
<div class="cell">End</div>
</div>
</body>
</html>
the h1 in the showcase area is getting on top of each other when i am trying to squeeze the window which is not supposed to behave in that way.But when it is not,, everything is fine. As i am new in this sector, i am not understanding what i've done wrong. Could anyone please show me where it needs to be fixed?
html:
body {
margin: 0;
padding: 0;
background: #f4f4f4;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 1.6em;
}
/* GLOBAL */
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
ul {
padding: 0;
margin: 0;
}
/* HEADER */
header {
background-color: #35424a;
color: #fff;
padding-top: 30px;
min-height: 70px;
border-bottom: #e8491d 3px solid;
}
header a {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 17px;
}
header li {
float: left;
display: inline;
padding: 0 20px;
}
header #branding {
float: left;
}
header #branding h1 {
margin: 0;
}
header nav {
float: right;
margin-top: 10px;
}
header .highlight,
header .current a {
color: #e8491d;
font-weight: bold;
}
header a:hover {
color: #cccccc;
font-weight: bold;
}
/*Showcase*/
#showcase {
min-height: 400px;
background: url('../images/showcase.jpg') no-repeat 0 -400px;
text-align: center;
color: #fff;
}
#showcase h1 {
margin-top: 100px;
font-size: 55px;
margin-bottom: 10px;
}
#showcase p {
font-size: 17px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ACME Web Design</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<div class="container">
<div id="branding">
<h1><span class="highlight">Acme</span> Web Design</h1>
</div>
<nav>
<ul>
<li class="current">Home</li>
<li>About</li>
<li>Services</li>
</ul>
</nav>
</div>
</header>
<section id="showcase">
<div class="container">
<h1>Affordable Professional Web Design</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, dolor, explicabo voluptas quibusdam dolore omnis maiores quidem necessitatibus nulla, iure ullam asperiores illum. Aliquid fuga magnam labore error vitae laborum.</p>
</div>
</section>
<section id="newsletter">
<div class="container">
<h1>Subscribe To Our Newsletter</h1>
<form action="">
<input type="email" name="email" id="" placeholder="Enter Email">
<button type="submit" class="button_1">Submit</button>
</form>
</div>
</section>
<section id="boxes">
<div class="container">
<div class="box">
<img src="images/logo_html.png" alt="">
<h1>HTML 5 Markup</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iusto quis consequuntur architecto quos ullam non dolore magni officiis. Veniam maxime labore corrupti voluptatibus! Sequi consequuntur quam laboriosam voluptatibus, at dolorum.</p>
</div>
<div class="box">
<img src="images/logo_css.png" alt="">
<h1>CSS 3 Styling</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iusto quis consequuntur architecto quos ullam non dolore magni officiis. Veniam maxime labore corrupti voluptatibus! Sequi consequuntur quam laboriosam voluptatibus, at dolorum.</p>
</div>
<div class="box">
<img src="images/logo_brush.png" alt="">
<h1>Graphic Design</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iusto quis consequuntur architecto quos ullam non dolore magni officiis. Veniam maxime labore corrupti voluptatibus! Sequi consequuntur quam laboriosam voluptatibus, at dolorum.</p>
</div>
</div>
</section>
<footer>
<p>ACME Web Design, Copyright © 2019</p>
</footer>
</body>
</html>
You have a few options here:
If you want to allow the title to stack for smaller screens you will need to make a small change to your css. I noticed that you have the following line in your css:
line-height: 1.6em;
Try changing this to
line-height:1.6;
Unitless line heights are typically recommended for use because this will allow the child elements to compute their line heights based on the font size specified.
Try reading the information here for more in-depth explanation
If you would like for the text to remain on one line when resizing the screen you can use media queries to change the font-size:
Based on your code I noticed that the font begins to stack at 1204px so try adding this:
#media screen and (max-width: 1204px) {
#showcase h1 {
font-size: 45px;
}
}
And then from here you can continue on to test the size of the screen and then add more breakpoints based on where the font begins to stack.
Personally I would add the style line-height: 55px; to the #showcase h1 element, so the height of the text is the same as the size of it.
This is going to be the final result:
body {
margin: 0;
padding: 0;
background: #f4f4f4;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 1.6em;
}
/* GLOBAL */
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
ul {
padding: 0;
margin: 0;
}
/* HEADER */
header {
background-color: #35424a;
color: #fff;
padding-top: 30px;
min-height: 70px;
border-bottom: #e8491d 3px solid;
}
header a {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 17px;
}
header li {
float: left;
display: inline;
padding: 0 20px;
}
header #branding {
float: left;
}
header #branding h1 {
margin: 0;
}
header nav {
float: right;
margin-top: 10px;
}
header .highlight,
header .current a {
color: #e8491d;
font-weight: bold;
}
header a:hover {
color: #cccccc;
font-weight: bold;
}
/*Showcase*/
#showcase {
min-height: 400px;
background: url('../images/showcase.jpg') no-repeat 0 -400px;
text-align: center;
color: #fff;
}
#showcase h1 {
margin-top: 100px;
font-size: 55px;
margin-bottom: 10px;
line-height: 55px;
}
#showcase p {
font-size: 17px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ACME Web Design</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<div class="container">
<div id="branding">
<h1><span class="highlight">Acme</span> Web Design</h1>
</div>
<nav>
<ul>
<li class="current">Home</li>
<li>About</li>
<li>Services</li>
</ul>
</nav>
</div>
</header>
<section id="showcase">
<div class="container">
<h1>Affordable Professional Web Design</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, dolor, explicabo voluptas quibusdam dolore omnis maiores quidem necessitatibus nulla, iure ullam asperiores illum. Aliquid fuga magnam labore error vitae laborum.</p>
</div>
</section>
<section id="newsletter">
<div class="container">
<h1>Subscribe To Our Newsletter</h1>
<form action="">
<input type="email" name="email" id="" placeholder="Enter Email">
<button type="submit" class="button_1">Submit</button>
</form>
</div>
</section>
<section id="boxes">
<div class="container">
<div class="box">
<img src="images/logo_html.png" alt="">
<h1>HTML 5 Markup</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iusto quis consequuntur architecto quos ullam non dolore magni officiis. Veniam maxime labore corrupti voluptatibus! Sequi consequuntur quam laboriosam voluptatibus, at dolorum.</p>
</div>
<div class="box">
<img src="images/logo_css.png" alt="">
<h1>CSS 3 Styling</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iusto quis consequuntur architecto quos ullam non dolore magni officiis. Veniam maxime labore corrupti voluptatibus! Sequi consequuntur quam laboriosam voluptatibus, at dolorum.</p>
</div>
<div class="box">
<img src="images/logo_brush.png" alt="">
<h1>Graphic Design</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iusto quis consequuntur architecto quos ullam non dolore magni officiis. Veniam maxime labore corrupti voluptatibus! Sequi consequuntur quam laboriosam voluptatibus, at dolorum.</p>
</div>
</div>
</section>
<footer>
<p>ACME Web Design, Copyright © 2019</p>
</footer>
</body>
</html>
Hope this helps.
I'm using display: flex to create panels for my upgrade items. The code looks something like this, I tried to re-create it as best as I could: fidle
. Now I don't understand why are the images overlapping into the tooltip (hover over elements for tooltip to appear). This is very strange, I thought it was because of display: flex, so I tried doing the same thing using grid, no luck. The tooltip has to be position: absolute, especially because I'm planning on adding some javascript so the tooltip box follows the cursor. What is causing this kind of behavior? I'm thinking there's something to do with flexbox/grid and absolute positioning, but I'm not very good at css
Add a z-index value to the .tooltip class.
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
p
{
font-size: 24px;
line-height: normal;
}
img
{
border: 1px solid grey;
vertical-align: middle;
}
/* Upgrade wrapper & body */
#upgrades {
height:100%;
box-shadow:0 0 16px 4px rgb(0, 0, 0);
}
.upgrade {
display: flex;
width: 320px;
height: auto;
margin: 1em;
position: relative;
box-shadow: 0 0 8px 2px rgb(0, 0, 0);
}
.upgrade-img {
width: 64px;
height: 64px;
}
.upgrade-body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex-basis: 100%;
padding: 0.5em;
}
/* Upgrade Hover Effects */
.upgrade:hover {box-shadow: 0 0 8px 2px rgb(0, 204, 255);}
.upgrade:hover .tooltip {display: initial;}
/* Tooltip */
.tooltip {
display: none;
width: 256px;
height: auto;
padding: 1em;
position: absolute;
top: 64px;
left: 0;
z-index: 100; /* <------- ADDED Z-INDEX */
background-color: rgb(0, 0, 0);
color: rgb(255, 255, 255);
box-shadow: 0 0 4px 1px rgb(0, 0, 0);
}
<div class="upgrade">
<div class="upgrade-img">
<img src="https://source.unsplash.com/random/64x64">
<div class="tooltip">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam ea sequi recusandae commodi necessitatibus voluptatum, labore libero quasi quos veniam eveniet laborum aspernatur harum iusto, provident itaque hic laboriosam unde!
</div>
</div>
<div class="upgrade-body">
<p>
<img src="https://source.unsplash.com/random/24x24">
100 (dmg)
</p>
<p>
<img src="https://source.unsplash.com/random/24x24">
500 (cost)
</p>
</div>
</div><div class="upgrade">
<div class="image">
<img src="https://source.unsplash.com/random/64x64">
<div class="tooltip">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam ea sequi recusandae commodi necessitatibus voluptatum, labore libero quasi quos veniam eveniet laborum aspernatur harum iusto, provident itaque hic laboriosam unde!
</div>
</div>
<div class="body">
<p>
<img src="https://source.unsplash.com/random/24x24">
100 (dmg)
</p>
<p>
<img src="https://source.unsplash.com/random/24x24">
500 (cost)
</p>
</div>
</div><div class="upgrade">
<div class="image">
<img src="https://source.unsplash.com/random/64x64">
<div class="tooltip">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam ea sequi recusandae commodi necessitatibus voluptatum, labore libero quasi quos veniam eveniet laborum aspernatur harum iusto, provident itaque hic laboriosam unde!
</div>
</div>
<div class="body">
<p>
<img src="https://source.unsplash.com/random/24x24">
100 (dmg)
</p>
<p>
<img src="https://source.unsplash.com/random/24x24">
500 (cost)
</p>
</div>
</div>