I have 4 boxes, each with a fontawesome icon, a background for the icon, an h3 and a p with some text. When I hover i want the box and everything inside to scale about 1.1. I've tried adding transition to the boxes class and and scale on hover but it does nothing. I also tried adding these properties to each element inside the box individually. Im using grid to align the boxes horizontally and vertically on mobile. Im not including the media queries.
The first orange box titled "box" is a very basic example of what i want to accomplish with the rest of the boxes.
this is the html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/42f1fd7b3c.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="./box.css">
<title>Document</title>
</head>
<body>
<div class="zoom-box">
<div>
<i class="fas fa-phone"></i>
</div>
<h3>box</h3>
<p>box zooms on hover</p>
</div>
<section id="services">
<h1>Services</h1>
<div class="service_grid">
<div class="service_box dlvry">
<div class="truck_back icon_back">
<i class="fas fa-truck fa-3x"></i>
</div>
<h3>Delivery</h3> <br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit fuga quasi molestias error aliquam sint alias cum, praesentium blanditiis amet placeat nemo soluta voluptate. Non ex provident distinctio voluptatem fuga.</p>
</div>
<div class="service_box mnfct">
<div class="industry_back icon_back">
<i class="fas fa-industry fa-3x"></i>
</div>
<h3>Manufacture</h3> <br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias dolor repellendus velit inventore. Nam rerum eligendi libero odit, vero accusantium est placeat provident id animi vitae quaerat dolore fugit unde?</p>
</div>
<div class="service_box mktg">
<div class="bullhorn_back icon_back">
<i class="fas fa-bullhorn fa-3x"></i>
</div>
<h3>Marketing</h3> <br>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deleniti doloribus velit cum molestiae eius accusantium, et debitis sapiente quae culpa, cupiditate eum magni quod quas nam dolorum, hic voluptatum accusamus!</p>
</div>
<div class="service_box merch">
<div class="store_back icon_back">
<i class="fas fa-store fa-3x"></i>
</div>
<h3>Merchandising</h3> <br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum obcaecati nostrum qui incidunt consequatur repellendus, commodi eligendi placeat voluptates! Iste magnam illum debitis modi fugiat aliquam vero unde, minima sequi?</p>
</div>
</div>
</section>
</body>
</html>
this is the css
/* GLOBALS */
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
/* EXAMPLE BOX */
.zoom-box {
background-color:#CF4B32;
width: 100px;
height: 100px;
border-radius: 5%;
padding: 5px;
margin: 32px auto;
transition: transform .2s; /* Animation */
}
.zoom-box h3 {
text-align: center;
}
.zoom-box:hover {
transform: scale(1.1);
}
/* EXAMPLE BOX END */
/* BOXES WITH NO HOVER EFFECT */
#services {
background: rgb(0, 0, 17);
min-height: 100vh;
}
#services h1 {
padding: 80px;
color: #fdfffc;
text-align: center;
}
.service_grid {
padding: 0 30px;
display: grid;
gap: 20px;
grid-template-columns: repeat(4, 1fr);
grid-template-areas: 'de mn ma me';
}
.service_box {
margin: 0 auto;
background: #fdfffc;
border-radius: 5%;
padding: 1.5rem 2rem;
max-width: 400px;
text-align: justify;
}
.service_box h3 {
text-align: center;
}
/* ICONS & BACKGROUNDS */
.icon_back {
width: 90px;
height: 90px;
border-radius: 50%;
margin: 0 auto 15px auto;
}
.dlvry {
grid-area: de;
}
.truck_back {
background: #b0def5;
padding: 20px;
}
.fa-truck {
color: #03254c;
}
.mnfct {
grid-area: mn;
}
.industry_back {
background: #f1acac;
padding: 20px;
}
.fa-industry {
color: #b71c1c;
}
.mktg {
grid-area: ma;
}
.bullhorn_back {
background: #fcf088;
padding: 20px;
}
.fa-bullhorn {
color: #fabc20;
}
.merch {
grid-area: me;
}
.store_back {
padding: 17px;
background: #aed581;
}
.fa-store {
color: #33691e;
}
/* ICONS & BACKGROUNDS END */
Using the same code for your example seems to work...
I added/edited this to your CSS:
.service_box {
margin: 0 auto;
background: #fdfffc;
border-radius: 5%;
padding: 1.5rem 2rem;
max-width: 400px;
text-align: justify;
transition: transform .2s; /* Animation */
}
.service_box:hover {
transform: scale(1.1);
}
Working example:
/* GLOBALS */
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
/* EXAMPLE BOX */
.zoom-box {
background-color:#CF4B32;
width: 100px;
height: 100px;
border-radius: 5%;
padding: 5px;
margin: 32px auto;
transition: transform .2s; /* Animation */
}
.zoom-box h3 {
text-align: center;
}
.zoom-box:hover {
transform: scale(1.1);
}
/* EXAMPLE BOX END */
/* BOXES WITH NO HOVER EFFECT */
#services {
background: rgb(0, 0, 17);
min-height: 100vh;
}
#services h1 {
padding: 80px;
color: #fdfffc;
text-align: center;
}
.service_grid {
padding: 0 30px;
display: grid;
gap: 20px;
grid-template-columns: repeat(4, 1fr);
grid-template-areas: 'de mn ma me';
}
.service_box {
margin: 0 auto;
background: #fdfffc;
border-radius: 5%;
padding: 1.5rem 2rem;
max-width: 400px;
text-align: justify;
transition: transform .2s; /* Animation */
}
.service_box:hover {
transform: scale(1.1);
}
.service_box h3 {
text-align: center;
}
/* ICONS & BACKGROUNDS */
.icon_back {
width: 90px;
height: 90px;
border-radius: 50%;
margin: 0 auto 15px auto;
}
.dlvry {
grid-area: de;
}
.truck_back {
background: #b0def5;
padding: 20px;
}
.fa-truck {
color: #03254c;
}
.mnfct {
grid-area: mn;
}
.industry_back {
background: #f1acac;
padding: 20px;
}
.fa-industry {
color: #b71c1c;
}
.mktg {
grid-area: ma;
}
.bullhorn_back {
background: #fcf088;
padding: 20px;
}
.fa-bullhorn {
color: #fabc20;
}
.merch {
grid-area: me;
}
.store_back {
padding: 17px;
background: #aed581;
}
.fa-store {
color: #33691e;
}
/* ICONS & BACKGROUNDS END */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/42f1fd7b3c.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="./box.css">
<title>Document</title>
</head>
<body>
<div class="zoom-box">
<div>
<i class="fas fa-phone"></i>
</div>
<h3>box</h3>
<p>box zooms on hover</p>
</div>
<section id="services">
<h1>Services</h1>
<div class="service_grid">
<div class="service_box dlvry">
<div class="truck_back icon_back">
<i class="fas fa-truck fa-3x"></i>
</div>
<h3>Delivery</h3> <br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit fuga quasi molestias error aliquam sint alias cum, praesentium blanditiis amet placeat nemo soluta voluptate. Non ex provident distinctio voluptatem fuga.</p>
</div>
<div class="service_box mnfct">
<div class="industry_back icon_back">
<i class="fas fa-industry fa-3x"></i>
</div>
<h3>Manufacture</h3> <br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias dolor repellendus velit inventore. Nam rerum eligendi libero odit, vero accusantium est placeat provident id animi vitae quaerat dolore fugit unde?</p>
</div>
<div class="service_box mktg">
<div class="bullhorn_back icon_back">
<i class="fas fa-bullhorn fa-3x"></i>
</div>
<h3>Marketing</h3> <br>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deleniti doloribus velit cum molestiae eius accusantium, et debitis sapiente quae culpa, cupiditate eum magni quod quas nam dolorum, hic voluptatum accusamus!</p>
</div>
<div class="service_box merch">
<div class="store_back icon_back">
<i class="fas fa-store fa-3x"></i>
</div>
<h3>Merchandising</h3> <br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum obcaecati nostrum qui incidunt consequatur repellendus, commodi eligendi placeat voluptates! Iste magnam illum debitis modi fugiat aliquam vero unde, minima sequi?</p>
</div>
</div>
</section>
</body>
</html>
To scale on hover you should add css code below.
.service_box:hover{
transform: scale(1.1);
}
You can test your code at jsfiddle and add my hover code.
Related
This question already has an answer here:
Why is a flex item limited to parent size?
(1 answer)
Closed 4 months ago.
So I have a flex container with 2 children. And I want to assign a fixed width to the first child. But If I set width: 200px, for some reason it does not work.
Here's my code:
.carousel {
background-color: #087f5b;
color: white;
padding: 32px;
width: 800px;
display: flex;
gap: 88px;
position: relative;
}
.img-container {
width: 200px;
height: 200px;
border: 1px solid;
}
<div class="carousel">
<div class="img-container"> </div>
<blockquote>
<p class="testimonial-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum,
sapiente labore! Accusantium, voluptas omnis dicta facere, porro
mollitia minus ad ut debitis consequuntur.
</p>
</blockquote>
</div>
However, if I use min-width instead of just width, it works alright.
I also found out that if I delete some text from the blockquote, then it works fine.
.carousel {
background-color: #087f5b;
color: white;
padding: 32px;
width: 800px;
display: flex;
gap: 88px;
position: relative;
}
.img-container {
width: 200px;
height: 200px;
border: 1px solid;
}
.carousel blockquote {
flex: 1;
}
<div class="carousel">
<div class="img-container"> </div>
<blockquote>
<p class="testimonial-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum,
sapiente labore! Accusantium, voluptas omnis dicta facere, porro
mollitia minus ad ut debitis consequuntur.
</p>
</blockquote>
</div>
I have been creating a site and noticed that the flex-box justify-content property is having no effect. This is set to center but the flexbox items appear to align at the start of the container's horizontal axis. Not too sure why this is the case. I have set out both the css and HTML that I have used. Any suggestions would be very helpful!
/*General settings*/
#import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght#0,400;1,300&display=swap');
* {
font-family: 'Poppins', sans-serif;
margin: 0;
}
/*nav settings*/
.nav-container {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #0077c2;
width: 100%;
padding: 2vw 0;
flex-wrap: nowrap;
}
.nav-container ul {
list-style: none;
margin-right: 10vw;
}
.nav-container li {
list-style: none;
display: inline-block;
margin-right: 1vw;
}
.logo {
margin-left: 2vw;
color: #fff;
}
.logo :hover {
border: 3px #ff8000 solid;
border-radius: 5px;
}
.nav-link {
text-decoration: none;
color: #fff;
}
.nav-link:hover {
text-decoration: 3px underline #ff8000;
}
/*img section*/
.img-container {
display: flex;
justify-content: center;
margin-top: 5vw;
border: 2px #ff8000 solid;
width: 80%;
margin: 5vh auto;
flex-direction: row;
}
.img-container img {
width: 40%;
margin: 0 auto;
}
.img-container p {
font-size: 0.9rem;
}
<header>
<div class="nav-container">
<div class="logo">
<h1>Development<br>One</h1>
</div>
<div>
<ul>
<li><a class="nav-link" href="#">Home</a></li>
<li><a class="nav-link" href="#">Apple Development</a></li>
<li><a class="nav-link" href="#">Android development</a></li>
<li><a class="nav-link" href="#">About</a></li>
<li><a class="nav-link" href="#">Contact us</a></li>
</ul>
</div>
</div>
</header>
<section class="img-container">
<div>
<h2>Section One Title</h2>
<img src="img/androiddevelopers.png" alt="app-development">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt repellendus nemo eveniet sint. Consectetur error totam nulla ex alias dolorum minus nostrum. Ex est suscipit dolor dolores repellendus! Architecto, ducimus?</p>
</div>
<div>
<h2>Section two Title</h2>
<img src="img/androiddevelopers.png" alt="app-development">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt repellendus nemo eveniet sint. Consectetur error totam nulla ex alias dolorum minus nostrum. Ex est suscipit dolor dolores repellendus! Architecto, ducimus?</p>
</div>
<div>
<h2>Section three Title</h2>
<img src="img/androiddevelopers.png" alt="app-development">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt repellendus nemo eveniet sint. Consectetur error totam nulla ex alias dolorum minus nostrum. Ex est suscipit dolor dolores repellendus! Architecto, ducimus?</p>
</div>
</section>
justify-content: center is working for the .nav-container. You just didn't recognize because the three divs filled out the whole space.
Working example: (with smaller width for demonstration)
/*General settings*/
#import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght#0,400;1,300&display=swap');
* {
font-family: 'Poppins', sans-serif;
margin: 0;
}
/*nav settings*/
.nav-container {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #0077c2;
width: 100%;
padding: 2vw 0;
flex-wrap: nowrap;
}
.nav-container ul {
list-style: none;
margin-right: 10vw;
}
.nav-container li {
list-style: none;
display: inline-block;
margin-right: 1vw;
}
.logo {
margin-left: 2vw;
color: #fff;
}
.logo :hover {
border: 3px #ff8000 solid;
border-radius: 5px;
}
.nav-link {
text-decoration: none;
color: #fff;
}
.nav-link:hover {
text-decoration: 3px underline #ff8000;
}
/*img section*/
.img-container {
display: flex;
justify-content: center;
margin-top: 5vw;
border: 2px #ff8000 solid;
width: 80%;
margin: 5vh auto;
flex-direction: row;
}
.img-container div {
width: 20%;
}
.img-container img {
width: 40%;
margin: 0 auto;
}
.img-container p {
font-size: 0.9rem;
}
<header>
<div class="nav-container">
<div class="logo">
<h1>Development<br>One</h1>
</div>
<div>
<ul>
<li><a class="nav-link" href="#">Home</a></li>
<li><a class="nav-link" href="#">Apple Development</a></li>
<li><a class="nav-link" href="#">Android development</a></li>
<li><a class="nav-link" href="#">About</a></li>
<li><a class="nav-link" href="#">Contact us</a></li>
</ul>
</div>
</div>
</header>
<section class="img-container">
<div>
<h2>Section One Title</h2>
<img src="img/androiddevelopers.png" alt="app-development">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt repellendus nemo eveniet sint. Consectetur error totam nulla ex alias dolorum minus nostrum. Ex est suscipit dolor dolores repellendus! Architecto, ducimus?</p>
</div>
<div>
<h2>Section two Title</h2>
<img src="img/androiddevelopers.png" alt="app-development">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt repellendus nemo eveniet sint. Consectetur error totam nulla ex alias dolorum minus nostrum. Ex est suscipit dolor dolores repellendus! Architecto, ducimus?</p>
</div>
<div>
<h2>Section three Title</h2>
<img src="img/androiddevelopers.png" alt="app-development">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt repellendus nemo eveniet sint. Consectetur error totam nulla ex alias dolorum minus nostrum. Ex est suscipit dolor dolores repellendus! Architecto, ducimus?</p>
</div>
</section>
I've been racking my brain on this and I can't seem to get it to behave the way I want to. Essentially, I want the element which contains the open and close buttons to remain fixed even when I've already opened the navigation.
Right now, what happens is after clicking #open, the container scrolls with the screen. I want it to emulate the behavior similar to when I haven't cliked #open yet (meaning the said container remains fixed in position).
Thanks everyone! Code provided below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./css/style.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
crossorigin="anonymous"
/>
<title>Rotating Navigation</title>
</head>
<body>
<div class="container">
<div class="circle-container">
<div class="circle">
<button id="close">
<i class="fas fa-times"></i>
</button>
<button id="open">
<i class="fas fa-bars"> </i>
</button>
</div>
</div>
<div class="content">
<h1>Amazing Article</h1>
<small>Florin Pop</small>
<p
>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempora,
nihil nisi! Aut, deleniti consectetur ratione consequatur, rerum
dolorum, ipsa debitis nulla ut autem maiores architecto quos quia amet
sapiente labore. Ex ipsam minima quam accusamus, perferendis illum
rerum numquam repellendus recusandae sed quas. Aperiam quisquam animi
commodi excepturi, at magni, in assumenda veniam impedit iusto,
molestiae dolores consectetur tenetur non fugit sapiente beatae eius
praesentium consequatur! Maxime magnam ipsam laborum expedita totam
nihil magni similique ratione sequi mollitia tempore voluptate dolorum
dolorem, quisquam quasi explicabo dolores natus temporibus
necessitatibus rerum praesentium perspiciatis nesciunt modi harum!
Perspiciatis amet modi eveniet doloremque?</p
>
<h3>My Dog</h3>
<img src="./assets/charles-deluvio-Mv9hjnEUHR4-unsplash.jpg" alt="" />
<p
>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt
explicabo ipsum quaerat debitis sapiente cum ratione perspiciatis
dolore, odio impedit necessitatibus eligendi facilis obcaecati
temporibus expedita repudiandae harum incidunt, enim perferendis
cupiditate distinctio! Earum optio accusantium quos qui et
perspiciatis ullam odio error modi voluptas quidem, itaque quisquam
labore minima. Tenetur libero distinctio sit animi iusto dolore
adipisci quam dolorum ea blanditiis pariatur perferendis, ullam
aliquid, qui voluptates id facilis inventore quibusdam minus quia.
Eveniet!</p
>
</div>
</div>
<nav>
<ul>
<li><i class="fas fa-home"></i>Home</li>
<li><i class="fas fa-user-alt"></i>About</li>
<li><i class="fas fa-envelope"></i>Contact</li>
</ul>
</nav>
<script src="./js/main.js"></script>
</body>
</html>
#import url("https://fonts.googleapis.com/css?family=Lato&display=swap");
* {
box-sizing: border-box;
}
body {
font-family: "Lato", sans-serif;
background-color: #333;
color: #222;
overflow-x: hidden;
margin: 0;
}
.container {
background-color: #fafafa;
transform-origin: top left;
transition: transform 0.5s linear;
width: 100vw;
min-height: 100vh;
padding: 50px;
}
.container.show-nav {
transform: rotate(-20deg);
}
.circle-container {
position: fixed;
top: -100px;
left: -100px;
}
.circle {
background-color: #ff7979;
height: 200px;
width: 200px;
border-radius: 50%;
position: relative;
transition: transform 0.5s linear;
}
.container.show-nav .circle {
transform: rotate(-80deg);
position: fixed;
}
.circle button {
position: absolute;
top: 50%;
left: 50%;
height: 100px;
background: transparent;
border: 0;
font-size: 26px;
color: #fff;
}
.circle button:focus {
outline: none;
}
.circle button#open {
left: 60%;
}
.circle button#close {
transform-origin: top left;
transform: rotate(90deg);
}
.container.show-nav + nav li {
transform: translateX(0);
transition-delay: 0.3s;
}
nav {
position: fixed;
bottom: 40px;
left: 0;
z-index: 100;
}
nav ul {
list-style-type: none;
padding-left: 30px;
}
nav ul li {
text-transform: uppercase;
color: #fff;
margin: 40px 0;
transform: translateX(-100%);
transition: transform 0.4s ease-in;
}
nav ul li i {
font-size: 20px;
margin-left: 10px;
transform: translateX(-150%);
}
nav ul li + li {
margin-left: 15px;
transform: translateX(-200%);
}
nav ul li + li + li {
margin-left: 30px;
}
.content img {
width: 100%;
}
.content {
max-width: 1000px;
}
.content h1 {
margin: 0;
}
.conent small {
color: #555;
font-style: italic;
}
.content p {
color: #333;
line-height: 1.5;
}
const open = document.getElementById("open");
const close = document.getElementById("close");
const container = document.querySelector(".container");
open.addEventListener("click", () => container.classList.add("show-nav"));
close.addEventListener("click", () => container.classList.remove("show-nav"));
You need to pull out the circle-container and everything in it from the container. Once it is separate you can position it to be fixed to the top left corner of the body and won't be bound by the same rules as if it was inside container Then you can style it from there.
I changed quite a few things in this code to get it to work so look it over and see what I did.
Fiddle here: https://jsfiddle.net/708Lo31v/
const open = document.getElementById("open");
const close = document.getElementById("close");
const container = document.querySelector(".container");
const cont1 = document.querySelector(".circle-container");
open.addEventListener("click", () => container.classList.add("show-nav"));
open.addEventListener("click", () => cont1.classList.add("show-nav"));
close.addEventListener("click", () => container.classList.remove("show-nav"));
close.addEventListener("click", () => cont1.classList.remove("show-nav"));
#import url("https://fonts.googleapis.com/css?family=Lato&display=swap");
* {
box-sizing: border-box;
}
body {
font-family: "Lato", sans-serif;
background-color: #333;
color: #222;
overflow-x: hidden;
margin: 0;
}
.container {
background-color: #fafafa;
transform-origin: top left;
transition: transform 0.5s linear;
width: 100vw;
min-height: 100vh;
padding: 50px;
}
.container.show-nav {
transform: rotate(-20deg);
position: relative;
}
.circle-container {
position: fixed;
top: -100px;
left: -100px;
z-index: 2;
}
.circle {
background-color: #ff7979;
height: 200px;
width: 200px;
border-radius: 50%;
position: relative;
transition: transform 0.5s linear;
}
.circle-container.show-nav .circle {
transform: rotate(-100deg);
position: fixed;
}
.circle button {
position: absolute;
top: 50%;
left: 50%;
height: 100px;
background: transparent;
border: 0;
font-size: 26px;
color: #fff;
}
.circle button:focus {
outline: none;
}
.circle button#open {
left: 60%;
}
.circle button#close {
transform-origin: top left;
transform: rotate(90deg);
}
.container.show-nav + nav li {
transform: translateX(0);
transition-delay: 0.3s;
}
nav {
position: fixed;
bottom: 40px;
left: 0;
z-index: 100;
}
nav ul {
list-style-type: none;
padding-left: 30px;
}
nav ul li {
text-transform: uppercase;
color: #fff;
margin: 40px 0;
transform: translateX(-100%);
transition: transform 0.4s ease-in;
}
nav ul li i {
font-size: 20px;
margin-left: 10px;
transform: translateX(-150%);
}
nav ul li + li {
margin-left: 15px;
transform: translateX(-200%);
}
nav ul li + li + li {
margin-left: 30px;
}
.content img {
width: 100%;
}
.content {
max-width: 1000px;
}
.content h1 {
margin: 0;
}
.conent small {
color: #555;
font-style: italic;
}
.content p {
color: #333;
line-height: 1.5;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./css/style.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
crossorigin="anonymous"
/>
<title>Rotating Navigation</title>
</head>
<body>
<div class="circle-container">
<div class="circle">
<button id="close">
<i class="fas fa-times"></i>
</button>
<button id="open">
<i class="fas fa-bars"> </i>
</button>
</div>
</div>
<div class="container">
<div class="content">
<h1>Amazing Article</h1>
<small>Florin Pop</small>
<p
>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempora,
nihil nisi! Aut, deleniti consectetur ratione consequatur, rerum
dolorum, ipsa debitis nulla ut autem maiores architecto quos quia amet
sapiente labore. Ex ipsam minima quam accusamus, perferendis illum
rerum numquam repellendus recusandae sed quas. Aperiam quisquam animi
commodi excepturi, at magni, in assumenda veniam impedit iusto,
molestiae dolores consectetur tenetur non fugit sapiente beatae eius
praesentium consequatur! Maxime magnam ipsam laborum expedita totam
nihil magni similique ratione sequi mollitia tempore voluptate dolorum
dolorem, quisquam quasi explicabo dolores natus temporibus
necessitatibus rerum praesentium perspiciatis nesciunt modi harum!
Perspiciatis amet modi eveniet doloremque?</p
>
<h3>My Dog</h3>
<img src="./assets/charles-deluvio-Mv9hjnEUHR4-unsplash.jpg" alt="" />
<p
>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt
explicabo ipsum quaerat debitis sapiente cum ratione perspiciatis
dolore, odio impedit necessitatibus eligendi facilis obcaecati
temporibus expedita repudiandae harum incidunt, enim perferendis
cupiditate distinctio! Earum optio accusantium quos qui et
perspiciatis ullam odio error modi voluptas quidem, itaque quisquam
labore minima. Tenetur libero distinctio sit animi iusto dolore
adipisci quam dolorum ea blanditiis pariatur perferendis, ullam
aliquid, qui voluptates id facilis inventore quibusdam minus quia.
Eveniet!</p
>
</div>
</div>
<nav>
<ul>
<li><i class="fas fa-home"></i>Home</li>
<li><i class="fas fa-user-alt"></i>About</li>
<li><i class="fas fa-envelope"></i>Contact</li>
</ul>
</nav>
<script src="./js/main.js"></script>
</body>
</html>
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 5 years ago.
I trie doing different things but can't seem to get rid of the white space between 2 inline-blocks here, thus list is not next to inline-block-div:
.parent {
border: 10px solid red;
}
.list {
border: 5px solid green;
margin-top: 0;
display: inline-block;
width: 25%;
}
.inline-block-div {
border: 5px solid blue;
display: inline-block;
vertical-align: top;
width: 75%;
}
<div class="parent">
<div class="list">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>
<div class="inline-block-div">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iste pariatur autem ipsam. Quidem beatae ipsum mollitia unde ab vitae consequatur culpa alias accusantium corporis. Sapiente autem voluptatibus sunt asperiores temporibus.</div>
</div>
The space actually comes from HTML. By default space will be added to inline-block elements. I hope you knew to fight the space's. And another issue in your CSS is you forgot to add box-sizing:border-box property.
Without this property width is calculated as follows
width: 75% + border-left-width + border-right-width. So eventually your width is
75%+10px. Your width will be added more if any padding mentioned. Try this code instead
div{
box-sizing:border-box;
}
.parent {
border: 10px solid red;
width:100%
}
.list {
border: 5px solid green;
margin-top: 0;
display: inline-block;
width: 25%;
}
.inline-block-div {
display: inline-block;
vertical-align: top;
width: 75%;
margin-left:-4px;
border:5px solid blue
}
<div class="parent">
<div class="list">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>
<div class="inline-block-div">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iste pariatur autem ipsam. Quidem beatae ipsum mollitia unde ab vitae consequatur culpa alias accusantium corporis. Sapiente autem voluptatibus sunt asperiores temporibus.</div>
</div>
I recommend to use flex. Flex is very useful to develop.
.parent {
border: 10px solid red;
display: flex;
}
.list {
border: 5px solid green;
margin-top: 0;
display: inline-block;
width: 25%;
}
.inline-block-div {
display: inline-block;
vertical-align: top;
width: 75%;
}
<div class="parent">
<div class="list">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>
<div class="inline-block-div">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iste pariatur autem ipsam. Quidem beatae ipsum mollitia unde ab vitae consequatur culpa alias accusantium corporis. Sapiente autem voluptatibus sunt asperiores temporibus.</div>
</div>
You can make the parent a flexbox to have it fixed
.parent {
border: 10px solid red;
display: flex;
}
.list {
border: 5px solid green;
margin-top: 0;
display: inline-block;
width: 25%;
}
.inline-block-div {
display: inline-block;
vertical-align: top;
width: 75%;
}
<div class="parent">
<div class="list">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>
<div class="inline-block-div">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iste pariatur autem ipsam. Quidem beatae ipsum mollitia unde ab vitae consequatur culpa alias accusantium corporis. Sapiente autem voluptatibus sunt asperiores temporibus.</div>
</div>
I have a little question due to position of background image in my footer.
As You can see on the picture, my current background image (green dotted line with ball - it is svg image) is placed in the middle if the footer.
I would like to place it in the position of the red line, staying there while resizing window.
Code of it is:
footer{
position: relative;
/* START OF IMAGE BG */
&:before{
content: "";
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("/wp-content/themes/company/static/img/line.svg");
-moz-background-size:90%;
background-size:90%;
background-repeat: no-repeat;
}
/* END OF IMG BG */
padding: rem-calc(45 20);
#media #{$medium-up}{
padding: rem-calc(85);
}
background-color: $bluedark;
color: $white;
min-height: rem-calc(500);
p{
font-size: rem-calc(12);
#media #{$medium-up}{
font-size: rem-calc(16);
}
font-weight: 300;
&.section-header{
text-transform: uppercase;
font-weight: 600;
}
&.bold{
font-weight: 600;
}
&.green{
color: $green;
}
}
.social-media{
img{
display: inline-block;
margin: rem-calc(0 5 20 5);
max-height: rem-calc(20);
#media #{$medium-up}{
max-height: rem-calc(40);
}
}
}
.underline{
margin-top: rem-calc(50);
border-top: 1px solid $bluegrey;
padding-top: rem-calc(20);
.logo{
float: left;
width: rem-calc(200);
height: rem-calc(45);
background: url("/wp-content/themes/company/static/img/logo_light.svg");
background-size: contain;
background-repeat: no-repeat;
}
select{
float: right;
}
}
}
And html is:
<footer>
<div class="line"></div>
<div class="flex">
<div class="row">
<div class="large-3 columns">
<p class="section-header">O nas</p>
<p>O Firmie</p>
<p>Zespół</p>
<p class="green">Blog</p>
</div>
<div class="large-3 columns">
<p class="section-header">Pomoc</p>
<p>FAQ</p>
<p>Regulamin</p>
<p>Polityka prywatności</p>
</div>
<div class="large-3 columns">
<p class="section-header">Social Media</p>
<div class="social-media">
<img src="{{site.theme.link}}/static/img/social-media/facebook.png">
<img src="{{site.theme.link}}/static/img/social-media/twitter.png">
<img src="{{site.theme.link}}/static/img/social-media/instagram.png">
</div>
</div>
<div class="large-3 columns">
<p class="section-header">Kontrakt</p>
<div class="button green">Formularz kontaktowy</div>
</div>
</div>
<div class="row underline">
<div class="logo"></div><span>
<select>
<option value="Polski">Polski</option>
<option value="English">English</option>
</select>
</div>
</div>
I know it is wrong placed due to top:0 however I dont know how to make it stay right on the top border of footer.
I would be grateful for any help.
A similar example of yours, I think its usefull for your purpouse:
div {
border: solid 1px green;
margin-bottom: 20px;
}
footer {
position: relative;
height: 50px;
background-color: red;
text-align: center;
padding-top: 20px;
}
footer:before {
content: "";
position: absolute;
display: block;
top: -50%;
left: 0;
width: 100%;
height: 100%;
background: url("http://www.curtainshopsouthport.co.uk/scissors.png");
-moz-background-size: 90%;
background-size: 90%;
background-repeat: no-repeat;
background-position: left 50%;
}
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam quis placeat architecto dolore recusandae nam amet, voluptate consequatur tenetur, quibusdam cupiditate culpa perferendis praesentium ab quasi voluptatum doloremque illum suscipit ea. Placeat
aperiam tempore maiores minus harum sint debitis beatae sit, eos voluptas est temporibus animi ullam praesentium voluptates molestiae dolore illo officiis blanditiis dolores. Qui labore asperiores quia dolore amet, culpa consectetur est quibusdam iusto
incidunt maxime aliquid sit eius explicabo aut, possimus corporis temporibus. Alias officia libero repellat veritatis, obcaecati repudiandae at voluptas, maxime doloremque facilis, sunt praesentium voluptatibus eaque provident natus, earum asperiores?
Possimus voluptatem, soluta deserunt.</div>
<footer>footer</footer>
As long as you don't have overflow issues, all you should need to do is replace top:0 with bottom:100%
footer{
position: relative;
&:before{
content: "";
position: absolute;
display: block;
bottom: 100%; /* change here */
left: 0;
width: 100%;
height: 100%;
padding-bottom: 50%;
background: url("img/line.svg");
-moz-background-size:90%;
background-size:90%;
background-repeat: no-repeat;
}