I have got my footer to stay at the bottom of the page however it is overlapping the content and i cant stop it.
I have looked all over the internet for a solution and none works. I have a feeling that i need to move divs around etc but i could be wrong.
Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css?family=Concert+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Eczar" rel="stylesheet">
<link rel="stylesheet" href="style/stylesheet.css">
<title>Layout</title>
</head>
<body>
<div id="header">
<img src="img/top-bar/bar.png" height="10px" class="top">
<ul id="menu-bar">
<li>Home</li>
<li>Page 1</li>
<li class="dropdown">
Page 2
<div class="dropdown-content">
Drop 1
Drop 2
</div>
</li>
<li>Page 3</li>
<li>Login</li>
</ul>
<img src="img/archery-1839284.jpg" class="cover">
</div>
<div id="wrapper">
<div id="content">
<div id="first" class="item">
<p class="para">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime distinctio sed officia, nam iure quam necessitatibus nobis non, aut quaerat autem. Quam mollitia, fugiat amet veritatis, voluptate earum quidem et! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci ex earum impedit ipsum consequatur dolor doloremque eum. Sed fugit dolor maiores pariatur nesciunt iste cupiditate consequuntur, dolore alias numquam voluptatum!
</p>
</div>
<div id="img-span">
<img src="img/board-911636.jpg" class="wide">
</div>
<div class="item" style="background-color: red;">
<p class="para">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem sit non ipsam aut perferendis neque magnam deleniti, officia necessitatibus porro odio ipsum est eum aliquam nulla placeat, deserunt? Atque, nisi.
</p>
</div>
</div>
<div id="footer">
<img src="img/top-bar/bar.png" height="10px" class="bottom">
</div>
</div>
</body>
</html>
CSS:
body {
background-color: grey;
margin: 0;
padding: 0;
font-family: 'Eczar', serif;
scroll-behavior: smooth;
}
#header {
position: relative;
text-align: center;
}
.top {
position: fixed;
width: 100%;
z-index: 3000;
left: 0;
top: 0;
}
.bottom {
width: 100%;
position: absolute;
bottom: 0;
left: 0;
}
#wrapper {
padding: 0;
margin: 0;
position: absolute;
width: 100%;
margin-top: 100%;
}
.cover {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
max-width: 100%;
background-image: url(../img/archery-1839284.jpg);
overflow: hidden;
}
#content {
width: 100%;
top: 100%;
height: 100%;
position: relative;
background-color: blue;
text-align: center;
}
.item {
padding-left: 20%;
padding-right: 20%;
padding-top: 4px;
padding-bottom: 4px;
overflow: hidden;
margin: 0;
position: relative;
}
.item p {
font-size: 18px;
}
.img-span {
padding: 0;
margin: 0;
width: 100%;
position: relative
}
.wide {
width: 100%;
height: 100%;
opacity: 1;
overflow: hidden;
display: block;
}
#footer {
width: 100%;
height: 70px;
background-color: greenyellow;
z-index: 3000;
bottom: 0;
left: 0;
position: absolute;
clear: both;
}
Just set the #footer to position: relative; will fix the overlapping issue.
#footer {
width: 100%;
height: 70px;
background-color: greenyellow;
position: relative;
clear: both; }
But you should have a look at the following website which explains how to create a footer that will always stick on the bottom of the page, with large or with small contents. This would be a much better way.
http://www.cssstickyfooter.com/using-sticky-footer-code.html
I don't think that the way you go at it is the best but what would work in your case is to change your wrapper class adding a padding bottom equal to your footer height like:
#wrapper {
padding: 0 0 10px 0;
margin: 0;
position: absolute;
width: 100%;
margin-top: 100%;
}
#footer {
height:10px;
}
As per your problem you want stick your footer to the bottom of your page right ? so, that you have to put following css code to
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom:70px;
}
Related
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
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.
This question already has answers here:
What elements can be contained within a <a> tag?
(6 answers)
Closed 3 years ago.
I'm trying to create a card for a website I'm pulling together. On hover, some text slides into view (I've used :hover combined with max-height). To make the whole card clickable, I tried to change a <div> to <a>, I added display:block.
I'm surprised that the behaviour is different - I expected them to be the same.
Two questions:
How do I get the right behaviour - simply making the card clickable without JavaScript.
What is the underlying issue that I've missed?
This version has the <div>:
.card {
background: yellow;
border-radius: .5em;
height: 15em;
position: relative;
overflow: hidden;
transition: all 1s ease-in-out;
}
.card:hover img {
transform: scale(1.1);
}
.card:hover .card-slider {
max-height: 7em;
}
.card-content {
position: absolute;
bottom: 0;
display: block;
}
.card-slider {
transition: all 1s ease-in-out;
max-height: 0;
overflow: hidden;
}
.card h1 {
background: rgba(0, 0, 0, 0.1);
color: white;
}
.card img {
transition: all 1s ease-in-out;
position: relative;
width: 100%;
height: 100%;
object-fit: cover;
}
.card .meta-cat {
position: absolute;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.1);
text-transform: uppercase;
}
.card .meta {
display: flex;
margin: 0;
padding: 0;
justify-content: space-between;
}
.meta-author, .meta-date {
list-style: none;
}
<article class="card">
<img src="http://via.placeholder.com/350x200" alt="">
<header class="meta-cat">Lorem.</header>
<div href="#" class="card-content">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, velit.</h1>
<section class="card-slider">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias dignissimos dolor ex in iusto magnam
molestias odit quaerat rem rerum, similique sit sunt totam veritatis vitae voluptate, voluptatum? Amet,
maxime.</p>
<ul class="meta">
<li class="meta-author">WO J Wright</li>
<li class="meta-date">Posted 5 days ago</li>
</ul>
</section>
</div>
</article>
This version changes the <div> to a <a>.
.card {
background: yellow;
border-radius: .5em;
height: 15em;
position: relative;
overflow: hidden;
transition: all 1s ease-in-out;
}
.card:hover img {
transform: scale(1.1);
}
.card:hover .card-slider {
max-height: 7em;
}
.card-content {
position: absolute;
bottom: 0;
display: block;
}
.card-slider {
transition: all 1s ease-in-out;
max-height: 0;
overflow: hidden;
}
.card h1 {
background: rgba(0, 0, 0, 0.1);
color: white;
}
.card img {
transition: all 1s ease-in-out;
position: relative;
width: 100%;
height: 100%;
object-fit: cover;
}
.card .meta-cat {
position: absolute;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.1);
text-transform: uppercase;
}
.card .meta {
display: flex;
margin: 0;
padding: 0;
justify-content: space-between;
}
.meta-author, .meta-date {
list-style: none;
}
<article class="card">
<img src="http://via.placeholder.com/350x200" alt="">
<header class="meta-cat">Lorem.</header>
<a href="#" class="card-content">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, velit.</h1>
<section class="card-slider">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias dignissimos dolor ex in iusto magnam
molestias odit quaerat rem rerum, similique sit sunt totam veritatis vitae voluptate, voluptatum? Amet,
maxime.</p>
<ul class="meta">
<li class="meta-author">WO J Wright</li>
<li class="meta-date">Posted 5 days ago</li>
</ul>
</section>
</a>
</article>
Actually you can have block elements inside <a> tag, as you already said, just replacing the nested <a> tag inside .meta-author with a span, makes your last snipped works.
.card {
background: yellow;
border-radius: .5em;
height: 15em;
position: relative;
overflow: hidden;
transition: all 1s ease-in-out;
}
.card:hover img {
transform: scale(1.1);
}
.card:hover .card-slider {
max-height: 7em;
}
.card-content {
position: absolute;
bottom: 0;
display: block;
}
.card-slider {
transition: all 1s ease-in-out;
max-height: 0;
overflow: hidden;
}
.card h1 {
background: rgba(0, 0, 0, 0.1);
color: white;
}
.card img {
transition: all 1s ease-in-out;
position: relative;
width: 100%;
height: 100%;
object-fit: cover;
}
.card .meta-cat {
position: absolute;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.1);
text-transform: uppercase;
}
.card .meta {
display: flex;
margin: 0;
padding: 0;
justify-content: space-between;
}
.meta-author, .meta-date {
list-style: none;
}
<article class="card">
<img src="http://via.placeholder.com/350x200" alt="">
<header class="meta-cat">Lorem.</header>
<a href="#" class="card-content">
<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, velit.</h1>
<section class="card-slider">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias dignissimos dolor ex in iusto magnam
molestias odit quaerat rem rerum, similique sit sunt totam veritatis vitae voluptate, voluptatum? Amet,
maxime.</p>
<ul class="meta">
<li class="meta-author"><span>WO J Wright</span></li>
<li class="meta-date">Posted 5 days ago</li>
</ul>
</section>
</a>
</article>
I would like this image(smaller - grey one) to stay at the bottom of its div(meadow image) when the window is resized.. I have tried with auto values on attributes but I guess it has something to do with positioning, can't figure out what it is exactly..any ideas maybe? Thanks a tonne!
Codepen: http://codepen.io/anon/pen/zoEYgP
.images {
background: url("http://kingofwallpapers.com/meadow/meadow-008.jpg");
background-size: cover;
height: 780px;
/*position: relative;*/
}
.smaller {
text-align: center;
}
.smaller img {
position: relative;
bottom: -280px;
}
#media screen and(max-width: 768px) {
.images {
height: auto;
/*position: relative;*/
}
.smaller img {
width: 80%;
/*height: auto;*/
/*margin-bottom: 0px;*/
}
}
<section class="images">
<div class="smaller">
<img src="https://placeholdit.imgix.net/~text?txtsize=38&txt=400%C3%97500&w=400&h=500" alt="">
</div>
</section>
see the codepen, I made smaller .image position: absolute and tweak some css aound
.images {
background: url("http://kingofwallpapers.com/meadow/meadow-008.jpg");
background-size: cover;
height: 768px;
/*height: 100vh;*/
min-height: 500px;
max-width: 100%;
position: relative;
}
.smaller img {
position: absolute;
bottom: 0;
left: 0;
max-width: 50%;
margin: 0 auto;
right: 0;
}
#media screen and(max-width: 768px) {
.images {
height: 100vh;
//position: relative;
}
.smaller img {
//width: 80%;
//height: auto;
//margin-bottom: 0px;
}
}
<section class="images">
<div class="smaller">
<img src="https://placeholdit.imgix.net/~text?txtsize=38&txt=400%C3%97500&w=400&h=500" alt="">
</div>
</section>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis nulla laboriosam laborum sapiente sit voluptate voluptatum, velit eius quam minus natus incidunt omnis quidem cupiditate, maxime, ex reprehenderit minima enim!</p>