my html:-
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>i-Educate - New way to learn</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav class="navbar background">
<div class="navbar-left">
<img src="logo.jpg" alt="" id="logo">
<ul class="nav-list">
<li>Home</li>
<li>Services</li>
<li>About</li>
<li>Contact Us</li>
</ul>
</div>
<div class="navbar-right">
<input type="text" name="search" id="search" placeholder="Search here">
<button class="btn-search">Search</button>
</div>
</nav>
<section class="container background">
<div class="para">
<h1>This is the modern way of learning</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore magni, ut optio dolorum dicta minus repudiandae fuga itaque veniam corrupti nulla, cum fugit eveniet repellendus. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reprehenderit
facere, vel consequuntur deserunt iusto inventore voluptas eaque atque tempora. Corporis voluptatibus, sed aliquid iure distinctio, ipsa perferendis necessitatibus quam, vero excepturi rem ratione recusandae. Quo nemo consequatur blanditiis
neque eos commodi quam debitis doloribus nostrum, numquam suscipit ipsa vitae veritatis?</p>
<div class="buttons">
<button class="btn">Subscribe</button>
<button class="btn">Watch here</button>
</div>
</div>
<div class="img">
<img src="logo.jpg" alt="laptop">
</div>
</section>
<section class="content">
<h1 class="heading">About us</h1>
<div class="main-box">
<div class="text">
<h1>This is a heading</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus dignissimos quibusdam quos laborum aliquid repellendus minima iure est temporibus voluptatibus voluptas possimus fuga vel, molestiae at hic quo necessitatibus voluptatum excepturi
animi rem doloribus omnis tempore. Optio sapiente quo, architecto dolore hic ea molestiae at adipisci consectetur libero quasi possimus? Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minus velit perspiciatis pariatur earum
debitis blanditiis nemo, harum repell </p>
</div>
<div class="photo">
<img src="https://source.unsplash.com/1600x900/?books , student" alt="">
</div>
</div>
<div class="middle-box">
<div class="text">
<h1>This is a heading</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus dignissimos quibusdam quos laborum aliquid repellendus minima iure est temporibus voluptatibus voluptas possimus fuga vel, molestiae at hic quo necessitatibus voluptatum excepturi
animi rem doloribus omnis tempore. Optio sapiente quo, architecto dolore hic ea molestiae at adipisci consectetur libero quasi possimus? Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minus velit perspiciatis pariatur earum
debitis blanditiis nemo, harum repell </p>
</div>
<div class="photo">
<img src="https://source.unsplash.com/700x900/?classroom , education" alt="">
</div>
</div>
<div class="main-box">
<div class="text">
<h1>This is a heading</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus dignissimos quibusdam quos laborum aliquid repellendus minima iure est temporibus voluptatibus voluptas possimus fuga vel, molestiae at hic quo necessitatibus voluptatum excepturi
animi rem doloribus omnis tempore. Optio sapiente quo, architecto dolore hic ea molestiae at adipisci consectetur libero quasi possimus? Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minus velit perspiciatis pariatur earum
debitis blanditiis nemo, harum repell </p>
</div>
<div class="photo">
<img src="https://source.unsplash.com/1600x900/?coding" alt="">
</div>
</div>
</section>
<section class="contact">
<h1>Contact Us</h1>
<div class="contact-box">
<input type="text" name="name" id="name" placeholder="Enter Your Name">
<input type="email" name="email" id="email" placeholder="Enter Your email">
<input type="text" name="address" id="address" placeholder="Enter Your address">
<textarea name="query" id="query" cols="30" rows="10" placeholder="Enter your query"></textarea>
<button class="contact-btn">Submit</button>
</div>
</section>
<footer class="footer">
copyright preserved
</footer>
</body>
</html>
```
my style.css(styling+mediaQuery):-
* {
margin: 0;
padding: 0;
}
#logo {
width: 50px;
height: 50px;
margin-left: 5px;
border: 2px solid black;
border-radius: 50px;
}
.navbar {
display: flex;
position: sticky;
top: 0;
}
.navbar .navbar-left {
display: flex;
/* background-color: red; */
width: 50%;
}
.navbar .navbar-left .nav-list {
display: flex;
align-items: center;
justify-content: center;
}
.nav-list li {
list-style: none;
padding: 5px 5px;
}
.nav-list li a {
text-decoration: none;
cursor: pointer;
color: white;
padding: 5px 15px;
font-size: 17px;
}
.nav-list li a:hover {
background-color: white;
color: black;
}
.background {
background: rgba(0, 0, 0, 0.1) url('../bg.jpg');
background-size: cover;
background-blend-mode: darken;
}
.navbar .navbar-right {
width: 50%;
/* display: flex; */
/* background-color: purple; */
text-align: right;
padding-top: 15px;
padding-right: 10px;
}
.navbar .navbar-right input {
width: 20%;
border: 2px solid rgb(26, 8, 26);
padding: 2px 2px;
border-radius: 5px;
}
.btn-search {
padding: 2px 2px;
border: 2px solid black;
border-radius: 5px;
cursor: pointer;
}
.container {
display: flex;
height: 700px;
/* border: 2px solid red; */
}
.container .para {
/* background-color: red; */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 65%;
padding: 5px 70px;
margin-bottom: 10px;
color: white;
}
.para h1 {
font-size: 30px;
padding: 20px 0px;
}
.para p {
font-size: 18px;
margin-left: 160px;
}
.container .img {
display: flex;
/* background-color: purple; */
width: 35%;
/* justify-content: center; */
align-items: center;
}
.container .img img {
width: 150px;
height: 150px;
border: 2px solid black;
border-radius: 150px;
}
.buttons {
/* border: 2px solid green; */
width: 65%;
margin-top: 20px;
}
.buttons .btn {
padding: 5px;
font-size: 15px;
margin: 0px 3px;
border: 2px solid black;
color: white;
border-radius: 10px;
background: none;
}
.buttons .btn:hover {
background-color: white;
color: black;
}
.content {
/* border: 2px solid green; */
height: 83vh;
background-color: #f2d8b6;
}
.content .heading {
text-align: center;
font-size: 35px;
/* margin-top: 5px; */
}
.content .main-box {
border: 2px solid green;
height: 150px;
display: flex;
width: 70%;
margin: auto;
margin-top: 21px;
border-radius: 10px;
margin-bottom: 50px;
}
.content .middle-box {
border: 2px solid green;
border-radius: 10px;
height: 150px;
display: flex;
width: 70%;
margin: auto;
margin-top: 21px;
margin-bottom: 50px;
flex-direction: row-reverse;
}
.middle-box img {
padding-left: 10px;
}
.content .text {
padding: 5px 10px;
font-size: 17px;
}
.content .photo img {
width: 130px;
height: 130px;
padding-right: 20px;
padding-top: 10px;
/* border: 2px solid black; */
}
.contact {
background-color: rgb(255, 241, 241);
}
.contact h1 {
text-align: center;
padding: 5px 0px;
font-size: 35px;
}
.contact .contact-box {
display: flex;
flex-direction: column;
}
.contact .contact-box input,
textarea {
width: 50%;
margin: auto;
padding: 8px 0px;
margin-top: 5px;
margin-bottom: 5px;
border: 2px solid black;
border-radius: 8px;
font-size: 18px;
}
.contact-box .contact-btn {
width: 100px;
margin: auto;
padding: 5px;
border: 2px solid black;
border-radius: 8px;
font-size: 20px;
cursor: pointer;
}
.contact-box .contact-btn:hover {
background-color: black;
color: white;
}
.footer {
background-color: black;
height: 35px;
}
#media only screen and (max-width:1220px) {
.navbar {
border: 2px solid blue;
flex-direction: column;
height: 350px;
justify-content: center;
align-items: 'center';
width: 100%;
}
.navbar-left {
border: 2px solid red;
flex-direction: column;
margin: auto;
}
.navbar-right {
display: flex;
flex-direction: column;
width: 100%;
justify-content: center;
align-items: center;
margin: auto;
}
.navbar-right input {
width: 50%;
}
.nav-list {
flex-direction: column;
}
.container .para {
padding: 5px 0px;
}
}
Sir i am getting problem in setting width of the elements like navbarr-right and navbar-left , i want to center the navbar elements when the media query is applied and also want to change its width so that it should be a good looking but it is not happening.
please suggest me where i am doing wrong and in a beginner friendly way that where i have to change and what to change alongwith the clear reason because i am a begineer.
im not so familar with web but why you don't just use #navbarleft or #navbar-right
I meanwhy you don't directly access it with the name you gave on the class name , i hope this makes a difference , try and tell me
Related
How can I make an image fill the full height in a flexbox item? The image should be stretched to fill the height while keeping the aspect ratio.
body {
background: #20262E;
padding: 20px;
font-family: Arial;
}
.banner-message {
background: #eee;
border-radius: 20px;
padding: 0px;
overflow: hidden;
width: 500px;
display: flex;
align-items: stretch;
}
.banner-message .banner-message-media {
flex: 1;
}
.banner-message .banner-message-content {
padding: 20px;
flex: 2;
}
<div class="banner-message">
<div class="banner-message-media">
<img src="https://picsum.photos/id/1068/250/150" />
</div>
<div class="banner-message-content">
<h3>Content Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae delectus, quod veniam necessitatibus saepe error dicta voluptatem vitae incidunt nulla fugit! Quasi minus libero reiciendis similique cupiditate eum veniam tenetur.</p>
</div>
</div>
Add height:100%; and width:fit-content;
img {
height: 100%;
width: fit-content;
}
SCCS:
body {
background: #20262E;
padding: 20px;
font-family: Arial;
}
.banner-message {
background: #eee;
border-radius: 20px;
padding: 0px;
overflow: hidden;
width: 500px;
display: flex;
align-items: stretch;
.banner-message-media {
border-radius: 10px;
flex: 1;
img {
height:100%;
width:fit-content;
}
}
.banner-message-content {
padding: 20px;
flex: 2;
}
}
body {
background: #20262e;
padding: 20px;
font-family: Arial;
}
.banner-message {
background: #eee;
border-radius: 20px;
padding: 0px;
overflow: hidden;
width: 500px;
display: flex;
align-items: stretch;
}
.banner-message .banner-message-media {
border-radius: 10px;
flex-grow: 1;
}
.banner-message .banner-message-content {
padding: 20px;
flex-grow: 2;
}
img {
height: 100%;
width: fit-content;
}
<div class="banner-message">
<div class="banner-message-media">
<img src="https://picsum.photos/id/1068/250/150" />
</div>
<div class="banner-message-content">
<h3>Content Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae delectus, quod veniam necessitatibus saepe error dicta voluptatem vitae incidunt nulla fugit! Quasi minus libero reiciendis similique cupiditate eum veniam tenetur.</p>
</div>
</div>
Use object-fit property in your .banner-message-media css class. Like this
object-fit: fill or object-fit: cover.
I feel like I've tried everything already. The website looks fine on my laptop, in chrome web developer tools, when checking iphone 6/7/8 plus, iphone x, ipad and ipad pro (so any height above 667px) my content is getting cut off, the footer disappears and half of the last page is gone on ipad.
I know it's the height, if I change the height property to something silly like 5000px and then of course my content is there but I've got loads of white space on other mobile devices so it's clear that's not the solution.
Here's what it looks like on a device like iphone 6 - perfectly normal
here is what I get on ihone X - the footer is goooone :(
Here's codepen: https://codepen.io/DiteIkporo/pen/vYOmMdK
Here is my css code
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary: #ddd;
--dark: #002a3a;
--light: #fff;
--shadow: 0 3px 5px #000000;
--logo-color: #00b0b9;
--header-color: #3b89b9;
--btn2: #293857;
--grey: #6f7a90;
--shadow2: 0 0 8px #000000;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
.container {
width: 80%;
margin: 0 auto;
}
body{
font-family: arial, helvetica, sans-serif;
line-height: 1.6;
}
header {
padding: .5rem 2rem;
align-items: center;
width: 100%;
margin: 0;
background: var(--btn2);
box-shadow: var(--shadow);
position: sticky;
top: 0;
z-index: 1;
}
header #navbar{
display: flex;
justify-content: space-between;
}
#header-img{
width:8rem;
margin-left: -1rem;
}
#navbar ul{
display: flex;
}
#navbar ul li {
padding: 10px;
}
#navbar a{
color: var(--light);
text-transform: uppercase;
}
#navbar a:hover{
color: #eee;
font-weight: bold;
}
.product{
margin: 0;
background: url('../img/product.jpg') center center/cover;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
color: var(--light);
padding: 0 20px;
}
.product input{
padding: 0.3rem;
display: block;
margin: 0.9rem auto;
}
.product input#email{
width: 300px;
border-radius: 5px;
}
.product h1{
text-transform: uppercase;
font-size: 5rem;
line-height: 1.2;
}
.btn1 {
font-size: 1.2rem;
border-radius: 10px;
border: 1px #fff solid;
background: transparent;
color: var(--light);
}
.btn1:hover{
cursor: pointer;
}
.features {
background: url('../img/blue-close-up.jpg') center center/cover;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
color: var(--light);
padding: 2rem;
}
.box {
background: var(--btn2);
opacity: 0.9;
text-align: center;
padding: 2rem;
box-shadow: var(--shadow);
margin: 1rem;
}
.box p{
padding: 0.3rem;
margin-bottom: 0.5rem;
}
.btn2 {
font-size: 1rem;
color: var(--light);
background-color: transparent;
border: solid #fff 1px;
border-radius: 5px;
padding: 0.5rem;
}
.pricing{
background: url('../img/blue-sky.jpg') center center/cover;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
color: var(--light);
padding: 2rem;
}
.level{
background: var(--header-color);
opacity: 0.9;
text-align: center;
padding: 2rem;
box-shadow: var(--shadow);
margin: 1rem;
}
.level p{
padding: 0.3rem;
margin-bottom: 0.5rem;
}
.btn3 {
font-size: 1rem;
color: var(--light);
background-color: transparent;
padding: 0.5rem;
border-radius: 5px;
border: #fff solid 1px;
cursor: pointer;
}
.video {
background:url('../img/blue-close-up.jpg');
background-size: cover;
min-height: 100vh;
align-items: center;
display: flex;
align-items: center;
}
.block > iframe{
max-width: 560px;
width:100%;
box-shadow: var(--shadow);
}
.block{
/* background: var(--btn2); */
text-align: center;
/* box-shadow: var(--shadow); */
margin: auto;
width: 50%;
padding: 40px;
color: var(--light);
}
.block h2{
padding-bottom: 1.3rem;
}
.footer{
text-align: end;
padding: .5rem .5rem;
background: var(--btn2);
box-shadow: var(--shadow2);
position: relative;
}
.footer ul{
display: flex;
justify-content: flex-end;
}
.footer ul li{
margin-left: 1rem;
}
.footer ul li a{
color: var(--light);
}
.footer a:hover{
color: #eee;
font-weight: bold;
}
.footer span{
color: var(--light);
}
.price{
font-size: 2.5rem;
}
and this is my mobile.css
#navbar{
flex-direction: column;
align-items: center;
}
.product h1{
font-size: 3rem;
}
.features{
flex-direction: column;
padding:0;
}
.features h2{
font-size: 1rem;
}
.features p{
font-size: 0.8rem;
margin-bottom:0.2rem;
}
.box{
padding: 0.6rem;
margin: 1rem 2rem;
}
.btn2{
padding: 0.3rem;
}
.pricing{
flex-direction: column;
padding: 0;
}
.level{
padding:0.5rem;
margin: 1rem 2rem;
}
.level p{
padding:0.1rem;
margin-bottom:0.2rem;
font-size: 0.8rem;
}
.price {
font-size: 1rem;
}
.btn3{
padding:0.3rem;
}
.block {
padding: 10px;
width:80%;
}
this is my html
<!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>DI Tech</title>
<script src="https://kit.fontawesome.com/fa769308d4.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" media="screen and (max-width: 768px)" href="css/mobile.css">
<link rel="stylesheet" media="screen and (min-width: 1100px)" href="css/widescreen.css">
</head>
<body>
<header id="header">
<nav id="navbar" class="main-nav">
<div class="logo">
<img id="header-img" src="img/fitbit-logo.png" alt="Fitbit logo">
</div>
<ul>
<li><a class="nav-link" href="#Product">Product</a></li>
<li><a class="nav-link" href="#Features">Features</a></li>
<li><a class="nav-link" href="#Pricing">Pricing</a></li>
</ul>
</nav>
</header>
<section id="Product" class="product">
<h1>The future of tech is here</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique quibusdam, perspiciatis animi repellendus eum officiis amet obcaecati debitis, quidem facere quasi repellat ab laboriosam eius nesciunt non autem natus porro! Enim tempora quod sit laudantium!</p>
<form action="https://www.freecodecamp.com/email-submit" method="POST" id="form">
<input id="email" name="email" type="email" required placeholder="Enter Your Email...">
<input id="submit" type="submit" value="Subscribe" class="btn1"/>
</form>
</section>
<section id="Features" class="features">
<div class="box">
<i class="fas fa-cogs fa-2x"></i>
<h2>Lorem, Ipsum.</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Iusto perferendis ad necessitatibus magni obcaecati aperiam temporibus, quis odio iure.</p>
Read More
</div>
<div class="box">
<i class="fas fa-user-friends fa-2x"></i>
<h2>Lorem, Ipsum Dolor.</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reprehenderit ab beatae suscipit ipsam nulla voluptatibus nisi aut nam tempore veniam?
</p>
Read More
</div>
<div class="box">
<i class="fas fa-chart-line fa-2x"></i>
<h2>Lorem, Ipsum.</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Magnam amet quisquam tenetur? Exercitationem accusantium aliquid nesciunt.</p>
Read More
</div>
</section>
<section id="Pricing" class="pricing">
<div class="option">
<div class="level">Standard
<h2 class="price">£79</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quisquam quas eaque laboriosam praesentium amet nihil, aliquam nulla quasi necessitatibus inventore.</p>
<button class="btn3">Select</button>
</div>
</div>
<div class="option">
<div class="level">Pro
<h2 class="price">£109</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quisquam quas eaque laboriosam praesentium amet nihil, aliquam nulla quasi necessitatibus inventore.</p>
<button class="btn3">Select</button>
</div>
</div>
<div class="option">
<div class="level">Ultra
<h2 class="price">£159</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quisquam quas eaque laboriosam praesentium amet nihil, aliquam nulla quasi necessitatibus inventore.</p>
<button class="btn3">Select</button>
</div>
</div>
</section>
<div class="video">
<div class="block">
<h2>Watch our most recent ad here</h2>
<iframe width="560" height="315" src="https://www.youtube.com/embed/KTZH4Upbv4w?controls=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<div class="footer">
<footer>
<ul>
<li>Privacy</li>
<li>Terms</li>
<li>Contact</li>
</ul>
<Span>DI Tech, Copyright © 2019</Span>
</footer>
</div>
<!-- JQuery CDN -->
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<!-- Local JS File -->
<script src="js/main.js"></script>
</body>
</html>
Seems to be a bug in the dev tools as far as I can tell. I've had this problem in my own development too and I thought it was my fault. But after encountering it again today, I decided to look into it some more. I've gone on 3 reputable websites, viz. Stackoverflow, Gmail and freeCodeCamp, and selected the iPhone X in the dev tools to see if they had this problem too.
Lo and behold, they all do. You can just barely make out the content at the very end of the respective pages, and if you scroll up and then down quickly you can even see there's more content there that should be visible but just isn't.
So yeah, not a personal development flaw I don't think.
I have a problem with text-indent.
Here is the image what I want to make.
I don't want to use <li>.
I want to make custom list style.
Here is my code.
.dotted-style{
width: 200px;
word-break: break-all;
}
.dotted-style::before{
display: inline-block;
content: '';
width: 4px;
height: 4px;
background-color: gray;
border-radius: 100%;
margin: auto 5px;
vertical-align: middle;
}
<p class="dotted-style">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Possimus aliquam non aspernatur reprehenderit, velit, laboriosam harum aut dolorum, quasi a iure maiores. Eos laboriosam exercitationem quasi magni doloribus fuga rerum?
</p>
Try this with margin:
CSS:
.dotted-style {
width: 200px;
word-break: break-all;
margin-left: 15px;/*added*/
}
.dotted-style::before {
display: inline-block;
content: '';
width: 4px;
height: 4px;
background-color: gray;
border-radius: 100%;
margin: auto 5px auto -10px;/*modified*/
vertical-align: middle;
}
Demo: http://jsfiddle.net/lotusgodkk/GCu2D/2189/
Try this:
.dotted-style{
width: 200px;
word-break: break-all;
position:relative;
padding-left:15px;
}
.dotted-style::before{
display: inline-block;
content: '';
width: 4px;
height: 4px;
background-color: gray;
border-radius: 100%;
margin: auto 5px;
vertical-align: middle;
position:absolute;
left:0;
top:10px;
}
I have an info box but I want it to slide in from left to right. But the css animation begins with a very high div because of the p tag inside it. Is there a way to fix this ?
JsFiddle : https://jsfiddle.net/scj5vc3b/
Html :
<div class="info-box info">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore ipsam fugit vero, autem asperiores accusamus ea unde magni distinctio excepturi minus amet repudiandae, debitis nulla voluptatem earum deleniti error reiciendis!</p>
</div>
SCSS :
.info-box {
margin: 10px 0;
border-left: 3px solid black;
overflow: hidden;
display: inline-block;
-webkit-animation: slideIn 1s linear;
position: relative;
p {
display: block;
padding: 10px 20px 10px 10px;
margin-bottom: 0;
}
}
#keyframes slideIn {
0% {max-width: 0px;}
100% {max-width: 1000px;}
}
.info-box.info {
background-color: lighten(blue, 24);
}
Use a transform on the paragraph instead:
.info-box {
margin: 10px 0;
border-left: 3px solid black;
-webkit-animation: slideIn 1s linear;
position: relative;
display: inline-block;
overflow: hidden;
}
p {
padding: 10px 20px 10px 10px;
margin-bottom: 0;
transform: translateX(-100%);
-webkit-animation: slideIn 1s linear forwards;
}
i {
padding-right: 15px;
}
#keyframes slideIn {
to {
transform: translateX(0%);
}
}
.info-box {
background-color: lightblue;
}
<div class="info-box info">
<p><i class="fa fa-info"></i>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore ipsam fugit vero, autem asperiores accusamus ea unde magni distinctio excepturi minus amet repudiandae, debitis nulla voluptatem earum deleniti error reiciendis!</p>
</div>
I would like to imitate the effect and output that I have on my #boxLeft, but when I do so, and add a css3 transition, it fails. I had to use fix it with a -100px margin-top value to hide it. Could anyone help?
HTML and CSS:
body {
padding: 0;
margin: 0;
}
p, h1, h2, h3, h4, h5, h6 {
padding: 0;
margin: 0;
}
#box {
width: 100%;
height: 100px;
background-color: #636363;
}
.boxLeft,
.boxRight {
width: 50%;
height: 100px;
/* display: inline-block; */
float: left;
padding: 10px;
box-sizing: border-box;
z-index: 1;
overflow: hidden;
}
.boxLeft {
background-color: red;
}
.blHeader {
text-align: right;
}
.boxLeft:hover {
background-color: orange;
width: 100%;
transition: .5s;
}
.boxLeft:hover ~.boxRight {
display: none;
}
.boxLeft:hover > .blHeader {
text-align: left;
}
.boxLeft:hover > .blCon {
display: block;
}
.blCon,
.brCon {
display: none;
}
.boxRight {
background-color: blue;
}
.boxRight:hover {
background-color: green;
width: 100%;
transition: .5s;
margin-top: -100px;
}
.boxRight:hover~.boxLeft {
display: none;
}
.boxRight:hover > .brHeader {
text-align: left;
}
.boxRight:hover > .brCon {
display: block;
transition: .5s;
}
<div id="box">
<div class="boxLeft">
<h2 class="blHeader">Left Header</h2>
<p class="blCon">Left content Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa harum recusandae perferendis animi, assumenda iste, repudiandae temporibus. Magni earum dicta perspiciatis tempore consequatur necessitatibus ullam recusandae dolore reiciendis,
repudiandae cumque!</p>
</div>
<div class="boxRight">
<h2 class="brHeader">RIght Header</h2>
<p class="brCon">Right content Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa harum recusandae perferendis animi, assumenda iste, repudiandae temporibus. Magni earum dicta perspiciatis tempore consequatur necessitatibus ullam recusandae dolore reiciendis,
repudiandae cumque!</p>
</div>
</div>
I'm sure I'm just missing out on something, but I've had a crack at it for hours. Thanks in advance. Here's a pen link: http://goo.gl/l2eqG0
The selector .boxRight:hover ~ .boxLeft isn't working as expected because the general sibling combinator, ~, only selects following sibling elements. Since the element .boxLeft precedes the element .boxRight, nothing is selected and the element .boxLeft isn't hidden when hovering over the element .boxRight.
To work around this, one option is to hide the first element when hovering over the parent #box element.
#box:hover .boxLeft {
display: none;
}
Then you can override this when actually hovering over the first element:
#box .boxLeft:hover {
display: block;
}
This works because there are only two elements. If you're not hovering over the first element, you can assume that you are otherwise hovering over the second element (which means that imitate the general sibling combinator since you can style the first element when hovering over the parent).
Updated Snippet:
body {
padding: 0;
margin: 0;
}
p, h1, h2, h3, h4, h5, h6 {
padding: 0;
margin: 0;
}
#box {
width: 100%;
height: 100px;
background-color: #636363;
}
.boxLeft,
.boxRight {
width: 50%;
height: 100px;
/* display: inline-block; */
float: left;
padding: 10px;
box-sizing: border-box;
z-index: 1;
overflow: hidden;
}
.boxLeft {
background-color: red;
}
.blHeader {
text-align: right;
}
.boxLeft:hover {
background-color: orange;
width: 100%;
transition: .5s;
}
.boxLeft:hover ~.boxRight {
display: none;
}
.boxLeft:hover > .blHeader {
text-align: left;
}
.boxLeft:hover > .blCon {
display: block;
}
.blCon,
.brCon {
display: none;
}
.boxRight {
background-color: blue;
float: right;
}
.boxRight:hover {
background-color: green;
width: 100%;
transition: .5s;
}
#box:hover .boxLeft {
display: none;
}
#box .boxLeft:hover {
display: block;
}
.boxRight:hover > .brHeader {
text-align: left;
}
.boxRight:hover > .brCon {
display: block;
transition: .5s;
}
<div id="box">
<div class="boxLeft">
<h2 class="blHeader">Left Header</h2>
<p class="blCon">Left content Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa harum recusandae perferendis animi, assumenda iste, repudiandae temporibus. Magni earum dicta perspiciatis tempore consequatur necessitatibus ullam recusandae dolore reiciendis,
repudiandae cumque!</p>
</div>
<div class="boxRight">
<h2 class="brHeader">RIght Header</h2>
<p class="brCon">Right content Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa harum recusandae perferendis animi, assumenda iste, repudiandae temporibus. Magni earum dicta perspiciatis tempore consequatur necessitatibus ullam recusandae dolore reiciendis,
repudiandae cumque!</p>
</div>
</div>
However, a more flexible option would be to remove the elements .boxLeft and .boxRight from the normal flow by absolutely position them. In doing so, you can avoid hiding the corresponding sibling elements on hover:
Updated Snippet:
body {
padding: 0;
margin: 0;
}
p, h1, h2, h3, h4, h5, h6 {
padding: 0;
margin: 0;
}
#box {
width: 100%;
height: 100px;
background-color: #636363;
}
.boxLeft,
.boxRight {
width: 50%;
height: 100px;
position: absolute;
top: 0;
padding: 10px;
box-sizing: border-box;
z-index: 1;
overflow: hidden;
}
.boxLeft {
background-color: red;
}
.blHeader {
text-align: right;
}
.boxLeft:hover {
background-color: orange;
width: 100%;
transition: .5s;
}
.boxLeft:hover ~ .boxRight {
z-index: auto;
}
.boxLeft:hover > .blHeader {
text-align: left;
}
.boxLeft:hover > .blCon {
display: block;
}
.blCon,
.brCon {
display: none;
}
.boxRight {
background-color: blue;
right: 0;
}
.boxRight:hover {
background-color: green;
width: 100%;
transition: .5s;
}
.boxRight:hover > .brHeader {
text-align: left;
}
.boxRight:hover > .brCon {
display: block;
transition: .5s;
}
<div id="box">
<div class="boxLeft">
<h2 class="blHeader">Left Header</h2>
<p class="blCon">Left content Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa harum recusandae perferendis animi, assumenda iste, repudiandae temporibus. Magni earum dicta perspiciatis tempore consequatur necessitatibus ullam recusandae dolore reiciendis,
repudiandae cumque!</p>
</div>
<div class="boxRight">
<h2 class="brHeader">RIght Header</h2>
<p class="brCon">Right content Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa harum recusandae perferendis animi, assumenda iste, repudiandae temporibus. Magni earum dicta perspiciatis tempore consequatur necessitatibus ullam recusandae dolore reiciendis,
repudiandae cumque!</p>
</div>
</div>