This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 1 year ago.
I am a beginner. I am practicing HTML and CSS. I got a problem. I have taken a <div> for image. Inside the <div> I have taken image with <img>. But there is a problem I am facing. Every image taken by <img> is taking extra area form bottom of the image.
Here is a output image. I marked the area with red color.
My HTML and CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* ---------------------------- Top -------------------------------- */
.top {
display: flex;
margin: 0 15%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.top .part1 {
width: 40%;
height: 100vh;
text-align: center;
padding: 5%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.top .part1 .title {
font-size: 45px;
}
.top .part1 .subtitle {
font-size: 20px;
padding-bottom: 12%;
}
.top .part1 a {
text-decoration: none;
color: black;
}
.top .part1 .btn {
padding: 4% 10%;
border: 1px solid black;
border-radius: 50px;
}
.top .part2 {
width: 60%;
background: url(./images/top.jpg) no-repeat center center/cover;
}
/* -------------------------------- Work --------------------------------------------- */
.work {
margin: 0 15%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
/* --------------------------------- Our Work -------------------------------------------- */
.our-work {
width: 100%;
padding: 2.5%;
text-align: center;
background: #333;
}
.our-work p {
border-left: 1px dotted white;
border-right: 1px dotted white;
display: inline-block;
padding: 0 1%;
color: white;
font-size: 20px;
}
/* ---------------------------- Image ------------------------------------------------- */
img {
width: 100%;
}
/* ---------------------------- Image Text ----------------------------------------------- */
.image-text {
padding: 3%;
background: #000;
color: white;
text-align: center;
}
/* ---------------------------- Image Text Head ------------------------------------------ */
.image-text .head {
font-size: 20px;
padding-bottom: 2%;
}
/* ---------------------------- Image Text Text ------------------------------------------ */
.image-text .text {
font-size: 16px;
}
<!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>Acme Photography</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div class="top">
<div class="part1">
<p class="title">ACME</p>
<p class="title">PHOTOGRAPHY</p>
<p class="subtitle">Beautiful Natural Photography</p>
View Work
</div>
<div class="part2"></div>
</div>
<div class="work">
<div class="our-work"><p>Our Work</p></div>
<div class="image1"><img src="./images/1.jpg" alt=""></div>
<div class="image-text">
<p class="head">Photo One</p>
<p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, tenetur.</p>
</div>
<div class="image2"><img src="./images/2.jpg" alt=""></div>
<div class="image-text">
<p class="head">Photo Two</p>
<p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, tenetur.</p>
</div>
<div class="image3"><img src="./images/3.jpg" alt=""></div>
<div class="image-text">
<p class="head">Photo Three</p>
<p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, tenetur.</p>
</div>
<div class="image4"><img src="./images/4.jpg" alt=""></div>
<div class="image-text">
<p class="head">Photo Four</p>
<p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, tenetur.</p>
</div>
<div class="image5"><img src="/images/5.jpg" alt=""></div>
<div class="image-text">
<p class="head">Photo Five</p>
<p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, tenetur.</p>
</div>
</div>
</body>
</html>
How can I fix that? Please help me.
By default, <img> tag has display: inline-block CSS property.
To remove the bottom space, apply CSS display: block to image as:
img {
display: block;
width: 100%;
}
you can try to place this in your css:
img {
width: 100%;
top: 0;
}
I don't know, try it.
Related
This question already has answers here:
How to apply padding to every line in multi-line text?
(5 answers)
Closed 3 months ago.
.wrapper {
display: flex;
flex-direction: column;
gap: 20px;
padding: 50px; }
.wide-container, .narrow-container {
flex: none;
background-color: #f7f7f7;
border-radius: 5px;
padding: 10px 20px;
box-shadow: 0 5px 35px rgba(0, 0, 0, 0.2);
border: 1px #c2c2c2 solid;
}
.wide-container {
width: 600px;
}
.narrow-container {
width: 300px;
}
.flex {
display: flex;
flex-wrap: wrap;
gap: 10px 0;
}
.text {
flex: none;
padding: 5px 2px;
background-color: salmon;
color: white;
}
<div class="wrapper">
<div class="wide-container">
<div class="flex"><span class="text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. </span></div>
</div>
<div class="narrow-container">
<div class="flex"><span class="text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. </span></div>
</div>
</div>
I need to apply some styles to piece of a text, and it should be inside of a flex box, because I need some of its features. The problem is that when there is not enough space, text will overflow:
So, I need to split text somehow, to keep the styling on a new line like this (did it manually here):
UPD:
Thanks for the answers, but the problem is a little bit more complex than it looks at first glance. Solution in answers (so far) leads to this result:
Which means that line breaks inside of a .text container. If you compare this result with the result I need (screenshot above), you will understand the issue.
use word-break:break-all; or word-break: break-word;
.wrapper {
display: flex;
flex-direction: column;
gap: 20px;
padding: 50px; }
.wide-container, .narrow-container {
flex: none;
background-color: #f7f7f7;
border-radius: 5px;
padding: 10px 20px;
box-shadow: 0 5px 35px rgba(0, 0, 0, 0.2);
border: 1px #c2c2c2 solid;
}
.wide-container {
width: 600px;
}
.narrow-container {
width: 300px;
}
.flex {
flex-wrap: wrap;
flex:none;
gap: 10px 0;
}
.text {
flex: none;
word-break: break-word;
padding: 5px 2px;
line-height:35px;
background-color: salmon;
color: white;
}
<div class="wrapper">
<div class="wide-container">
<div class="flex"><span class="text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. </span></div>
</div>
<div class="narrow-container">
<div class="flex">
<span class="text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. 3</span>
</div>
</div>
</div>
Remove flex from text class and it will work.
.text {
padding: 5px 2px;
background-color: salmon;
color: white;
}
https://codepen.io/IChoseTheRedPill/pen/zYaRjZb
Based on your description you are looking for the </br> HTML element. Just added a </br> in your example.
However, removing flex: none from your .text class is a much more elegant solution to your problem, as suggested in another answer.
In addition, to get the "highlight" effect that you want you can't apply a background-color to the whole .text class.
.wrapper {
display: flex;
flex-direction: column;
gap: 20px;
padding: 50px; }
.wide-container, .narrow-container {
flex: none;
background-color: #f7f7f7;
border-radius: 5px;
padding: 10px 20px;
box-shadow: 0 5px 35px rgba(0, 0, 0, 0.2);
border: 1px #c2c2c2 solid;
}
.wide-container {
width: 600px;
}
.narrow-container {
width: 300px;
}
.flex {
display: flex;
flex-wrap: wrap;
gap: 10px 0;
}
.text {
padding: 5px 2px;
line-height: 1.5;
color: white;
}
.highlight {
background-color: salmon;
}
<div class="wrapper">
<div class="wide-container">
<div class="flex"><span class="text"><span class="highlight">Lorem ipsum dolor sit amet consectetur, adipisicing elit. </span></span></div>
</div>
<div class="narrow-container">
<div class="flex"><span class="text"><span class="highlight">Lorem ipsum dolor sit amet consectetur, </span><span class="highlight">adipisicing elit.</span></span></div>
</div>
</div>
This worked correctly for me when flex was disabled
.text {
background-color: salmon;
color: white;
line-height: 2em!important;
padding: 3px 0px;
}
I am new to frontend dev. When I reduce the browser window size the layout breaks. Elements overlap each other and height of section changes etc.
Here is my HTML code in which I have made a navbar and a section in which I created 3 items.
#import url('https://fonts.googleapis.com/css2?family=Dancing+Script&family=Lobster&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Dancing+Script&family=Lobster&family=Varela+Round&display=swap');
* {
margin: 0;
padding: 0;
}
ul li {
list-style-type: none;
text-decoration: none;
}
#navbar {
display: flex;
align-items: center;
position: relative;
top: 0;
/* justify-content: center; */
}
#navbar::before {
content: "";
background-color: black;
position: absolute;
height: 100%;
width: 100%;
z-index: -1;
opacity: 0.4;
}
/* Logo */
#logo {
margin: 10px 34px;
}
/* Logo and Image */
#logo img {
margin: 3px 6px;
height: 56px;
}
#navbar ul {
display: flex;
font-size: 1.3rem;
}
#navbar ul li a {
text-decoration: none;
display: block;
padding: 3px 23px;
border-radius: 20px;
color: white;
}
#navbar ul li a:hover {
background-color: white;
color: black;
}
/* Home section */
#home {
display: flex;
flex-direction: column;
padding: 3px 200px;
height: 278px;
justify-content: center;
align-items: center;
font-family: 'Lobster', cursive;
}
#home::before {
content: "";
background: url('../bg1.jpg') no-repeat center center/cover;
position: absolute;
height: 56%;
width: 100%;
z-index: -1;
opacity: 0.89;
top: 0px;
left: 0px;
}
#home h1 {
color: white;
text-align: center;
}
#home p {
color: white;
text-align: center;
font-size: 1.5rem;
}
.h-primary {
font-size: 3.8rem;
padding: 12px;
font-family: 'Varela Round', sans-serif;
}
.h-secondary {
font-size: 2.2rem;
padding: 12px;
font-family: 'Varela Round', sans-serif;
}
.h-tertiary {
font-size: 0.9rem;
padding: 12px;
font-family: 'Varela Round', sans-serif;
}
#services {
margin: 110px 0;
margin-left: 20px;
margin-right: 20px;
display: flex;
}
#services .box {
border: 2px solid brown;
padding: 20px;
margin: 3px 6px;
border-radius: 20px;
background-color: rgb(236, 229, 229);
}
#services .box img {
display: block;
height: 171px;
margin: auto;
}
.btn {
padding: 6px 20px;
border: 2px solid white;
background-color: brown;
color: white;
margin: 17px;
font-size: 1.5rem;
border-radius: 10px;
cursor: pointer;
}
.center {
text-align: center;
}
<nav id="navbar">
<div id="logo">
<img src="logo.png" alt="">
</div>
<ul>
<li class="items">Home</li>
<li class="items">Service</li>
<li class="items">About</li>
<li class="items">Contact</li>
</ul>
</nav>
<section id="home">
<h1 class="h-primary">Welcome to Myonline meal</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatem aperiam quaerat cumque consequatur quasi
</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Debitis consequatur </p>
<button class="btn">Order Now</button>
</section>
<section class="services-container">
<h1 class="h-primary center">Our Service</h1>
<div id="services">
<div class="box">
<img src="img/1.png" alt="">
<h2 class="h-secondary center">Food Ordering</h2>
<p class="center h-tertiary">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium quia atque, corrupti</p>
</div>
<div class="box">
<img src="img/2.png" alt="">
<h2 class="h-secondary center">Food Ordering</h2>
<p class="center h-tertiary">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium quia atque, corruptir</p>
</div>
<div class="box">
<img src="img/3.png" alt="">
<h2 class="h-secondary center">Food Ordering</h2>
<p class="center h-tertiary">Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium quia atque, corruptir</p>
</div>
</div>
</section>
You should learn about responsiveness, when you make a website, it usually looks different on different screen sizes and devices, and in order to make it look better on smaller screens, you need to style your page differently according to the device's size, for example using media queries.
In your case you mostly use px unit to set sizes for margins, paddings and such in your css, but there are better units that are described as relative, such as %, em and rem.
You can learn more about all this just googling or watching tutorials, but in short, percentage unit is relative to the parent's size, em is relative to this element's font-size, and rem is relative to the root font-size (html tag) which is usually 16px, so for example if you set a font-size on a div of 3rem, that would mean 3 * 16px, which is 48px, but the difference between saying 3rem and just 48px, is that in some cases 3rem might become smaller or larger depending on the device or any other factor.
div {
display: flex;
flex-direction: column;
align-items: start;
margin: 1em 0;
}
.small button {
font-size: 16px;
}
.big button {
font-size: 48px;
}
.non-relative {
padding: 8px 16px;
}
.relative {
padding: 0.5em 1em;
}
<div class="small">
<button class="non-relative">Non-Relative</button>
<button class="relative">Relative</button>
</div>
<div class="big">
<button class="non-relative">Non-Relative</button>
<button class="relative">Relative</button>
</div>
Here you can see that, when I set the button's padding with px, it stays the same no matter the font size, but with the em unit, it will be relative to it, so proportionally it will be the same as the smaller version. Hope this is a good enough example, I am kind of sleepy and might've missed something, but hope this helps you!
I'm relatively new to this, so someone help me understand how can I make my page content stretch to fill all the space and not just align in the center? I want to make it fullscreen. In which part of my code do I need changes?
#import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');
body {
font-family: 'Roboto Condensed', sans-serif;
margin: 0;
background: rgb(255, 255, 255);
height: auto;
}
html {
scroll-behavior: smooth;
}
h1 {
font-weight: 400;
font-size: 2.5rem;
text-transform: uppercase;
margin: 0;
}
h2 {
font-weight: 400;
font-size: 1.2rem;
text-transform: capitalize;
margin: 0;
}
img {
display: block;
width: 100%;
}
main {
max-width: 900px;
margin: auto;
box-shadow: 30px 0px 40px rgba(0, 0, 0, 0.1), -30px 0px 40px rgba(0, 0, 0, 0.1);
}
#landing {
background: #fff;
}
#landing-text {
display: flex;
flex: 0 1 40vw;
height: 50vh;
justify-content: center;
align-items: center;
text-align: center;
padding-right: 1rem;
padding-left: 1rem;
}
#landing-text h2 {
color: #888;
}
#landing-image {
background: url(https://source.unsplash.com/dS-q7-zkD9c);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
height: 50vh;
flex: 0 1 60vw;
margin: 0;
}
.btn {
padding: 0.5rem 2rem;
border: 1px #ccc solid;
display: inline-block;
margin: 2rem 0 0;
border-radius: 50px;
text-decoration: none;
color: #333;
transition: background 500ms ease;
}
.btn:hover {
background: #000000;
color: #fff;
transform: scale(1.11);
transition: all 0.6s;
}
#header {
padding: 1.5rem;
text-align: center;
background: #333;
color: #fff;
}
#header h2 {
border-left: dotted 1px #fff;
border-right: dotted 1px #fff;
display: inline-block;
padding-right: 1rem;
padding-left: 1rem;
}
.caption {
padding: 0.8rem;
text-align: center;
}
footer {
text-align: center;
padding: 2rem 1rem;
margin: auto;
color: #333;
}
footer h3 {
font-size: 3rem;
margin-bottom: 0;
}
.social-part .fa {
padding-right: 20px;
}
ul li a {
margin-right: 20px;
}
/* Screen Sizes 500px and Up */
#media (min-width: 500px) {
#landing {
display: flex;
height: 100%;
}
#landing-text {
height: 100vh;
}
#landing-image {
height: 100vh;
}
}
/* Screen Sizes 700px and Up */
#media (min-width: 700px) {
.btn {
padding: 1rem 3rem;
}
}
<!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">
<link rel="stylesheet" href="styles.css">
<title>Acme Photography</title>
</head>
<body>
<main>
<!-- Landing Area -->
<div id="landing">
<div id="landing-text">
<div id="landing-text-inner">
<h1>Acme Photography</h1>
<h2>Beautiful Natural Photography</h2>
<a href="#images" class="btn" id="view-work">
View Work
</a>
</div>
</div>
<div id="landing-image"></div>
</div>
<div id="images">
<div id="header">
<h2>Our Work</h2>
</div>
<img src="https://source.unsplash.com/1600x900/?nature,water" alt="">
<div class="caption">
<h3>Photo One</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, tenetur.</p>
</div>
<img src="https://source.unsplash.com/1600x900/?nature,trees" alt="">
<div class="caption">
<h3>Photo Two</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, tenetur.</p>
</div>
<img src="https://source.unsplash.com/1600x900/?nature,flowers" alt="">
<div class="caption">
<h3>Photo Three</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, tenetur.</p>
</div>
<img src="https://source.unsplash.com/1600x900/?nature,animals" alt="">
<div class="caption">
<h3>Photo Four</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, tenetur.</p>
</div>
<img src="https://source.unsplash.com/1600x900/?nature,clouds" alt="">
<div class="caption">
<h3>Photo Five</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, tenetur.</p>
</div>
</div>
</main>
<footer>
<h3>Get In Touch</h3>
<p>Email or call us to set up a consult</p>
<p>Email:
<strong>contact#acmephotos.test</strong>
</p>
<p>Phone:
<strong>(617) 555-5555</strong>
</p>
</footer>
<script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="main.js"></script>
</body>
</html>
Remove max-with on main
main {
/*max-width: 900px;*/
margin: auto;
box-shadow: 30px 0px 40px rgba(0, 0, 0, 0.1), -30px 0px 40px rgba(0, 0, 0, 0.1);
}
#import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');
body {
font-family: 'Roboto Condensed', sans-serif;
margin: 0;
background: rgb(255, 255, 255);
height: auto;
}
html {
scroll-behavior: smooth;
}
h1 {
font-weight: 400;
font-size: 2.5rem;
text-transform: uppercase;
margin: 0;
}
h2 {
font-weight: 400;
font-size: 1.2rem;
text-transform: capitalize;
margin: 0;
}
img {
display: block;
width: 100%;
}
main {
/*max-width: 900px;*/
margin: auto;
box-shadow: 30px 0px 40px rgba(0, 0, 0, 0.1), -30px 0px 40px rgba(0, 0, 0, 0.1);
}
#landing {
background: #fff;
}
#landing-text {
display: flex;
flex: 0 1 40vw;
height: 50vh;
justify-content: center;
align-items: center;
text-align: center;
padding-right: 1rem;
padding-left: 1rem;
}
#landing-text h2 {
color: #888;
}
#landing-image {
background: url(https://source.unsplash.com/dS-q7-zkD9c);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
height: 50vh;
flex: 0 1 60vw;
margin: 0;
}
.btn {
padding: 0.5rem 2rem;
border: 1px #ccc solid;
display: inline-block;
margin: 2rem 0 0;
border-radius: 50px;
text-decoration: none;
color: #333;
transition: background 500ms ease;
}
.btn:hover {
background: #000000;
color: #fff;
transform: scale(1.11);
transition: all 0.6s;
}
#header {
padding: 1.5rem;
text-align: center;
background: #333;
color: #fff;
}
#header h2 {
border-left: dotted 1px #fff;
border-right: dotted 1px #fff;
display: inline-block;
padding-right: 1rem;
padding-left: 1rem;
}
.caption {
padding: 0.8rem;
text-align: center;
}
footer {
text-align: center;
padding: 2rem 1rem;
margin: auto;
color: #333;
}
footer h3 {
font-size: 3rem;
margin-bottom: 0;
}
.social-part .fa {
padding-right: 20px;
}
ul li a {
margin-right: 20px;
}
/* Screen Sizes 500px and Up */
#media (min-width: 500px) {
#landing {
display: flex;
height: 100%;
}
#landing-text {
height: 100vh;
}
#landing-image {
height: 100vh;
}
}
/* Screen Sizes 700px and Up */
#media (min-width: 700px) {
.btn {
padding: 1rem 3rem;
}
}
<!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">
<link rel="stylesheet" href="styles.css">
<title>Acme Photography</title>
</head>
<body>
<main>
<!-- Landing Area -->
<div id="landing">
<div id="landing-text">
<div id="landing-text-inner">
<h1>Acme Photography</h1>
<h2>Beautiful Natural Photography</h2>
<a href="#images" class="btn" id="view-work">
View Work
</a>
</div>
</div>
<div id="landing-image"></div>
</div>
<div id="images">
<div id="header">
<h2>Our Work</h2>
</div>
<img src="https://source.unsplash.com/1600x900/?nature,water" alt="">
<div class="caption">
<h3>Photo One</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, tenetur.</p>
</div>
<img src="https://source.unsplash.com/1600x900/?nature,trees" alt="">
<div class="caption">
<h3>Photo Two</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, tenetur.</p>
</div>
<img src="https://source.unsplash.com/1600x900/?nature,flowers" alt="">
<div class="caption">
<h3>Photo Three</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, tenetur.</p>
</div>
<img src="https://source.unsplash.com/1600x900/?nature,animals" alt="">
<div class="caption">
<h3>Photo Four</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, tenetur.</p>
</div>
<img src="https://source.unsplash.com/1600x900/?nature,clouds" alt="">
<div class="caption">
<h3>Photo Five</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, tenetur.</p>
</div>
</div>
</main>
<footer>
<h3>Get In Touch</h3>
<p>Email or call us to set up a consult</p>
<p>Email:
<strong>contact#acmephotos.test</strong>
</p>
<p>Phone:
<strong>(617) 555-5555</strong>
</p>
</footer>
<script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="main.js"></script>
</body>
</html>
I suggest you always use this code at the top of your CSS document.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
The star points to all the elements!
Your page is simply responsive. You can use a framework like Bootstrap. And put the writings and boxes together and the page will be stretched.
You can try width: 100%; in your CSS if you'd like to stretch the content from the left edge to the right edge of your webpage.
As said by Lalji Tadhani above, remove the max-width in the main html tag's css because it will only let it stay till 900px and will not allow its contents to stretch till both of the sides.
I want the background to be rounded at the left hand side (i.e the red background curved and occupying the full left side of the parent div) and it isn't. I can't seem to figure out why this is the case.
.body {
background: #e7e7e7e7;
font-family: "Muli", sans-serif;
}
.course {
/*only takes
/*padding adding to the existing container*/
display: flex;
box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.2);
padding: 5px;
border-radius: 10px;
background-image: #fff;
position: absolute; /*this makes it stuck to the document body or the nearest ancestor which has a parent. When you scroll it's still all good. */
width: 700px;
top: 50%;
left: 50%;
transform: translate(
-50%,
-50%
); /*this is RELATIVE to the actual elements size. We moved down from doc by 50%, so now need to move up by 50% to balance out. */
/*ALT: width: 70%;
left: 15%; */
max-width: 100%;
overflow: hidden;
outline-style: none;
}
h6 {
text-transform: uppercase;
opacity: 0.6;
letter-spacing: 3px;
}
h2 {
margin-top: 10px;
letter-spacing: 1px;
}
.preview {
background: #e40046;
color: #fff;
padding: 30px;
width: 250px;
position: relative;
outline-style: none;
}
<!DOCTYPE html>
<html>
<head>
<title>Card UI design</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<style>
#import url("https://fonts.googleapis.com/css?family=Muli&display=swap");
* {
padding: 0;
margin: 0;
box-sizing: border-box;
/* box-sizing: border-box; CAN ALSO EDIT SIZE LIKE THIS*/
}
</style>
</head>
<body class="body">
<div class="container">
<div class="course">
<div class="preview">
<h6>Course</h6>
<h2>Web Development</h2>
View All Chapters
</div>
<div class="info">
<div class="progress-wrapper">
<div class="progress">
<span class="progress-text">8/9 Challenges</span>
<h6>Chapter 4</h6>
</div>
<h2>JAVASCRIPT, HTML & CSS</h2>
<p class="p-trunc">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis
autem culpa architecto dolores quibusdam deleniti pariatur
corporis, voluptatum ipsa explicabo.
</p>
<button class="btn">Next</button>
</div>
</div>
</div>
</div>
</body>
</html>
The error is with div class and div preview.
.body {
background: #e7e7e7e7;
font-family: "Muli", sans-serif;
}
.course {
/*only takes
/*padding adding to the existing container*/
display: flex;
box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.2);
padding: 5px;
border-radius: 10px;
background-image: #fff;
position: absolute; /*this makes it stuck to the document body or the nearest ancestor which has a parent. When you scroll it's still all good. */
width: 700px;
top: 50%;
left: 50%;
transform: translate(
-50%,
-50%
); /*this is RELATIVE to the actual elements size. We moved down from doc by 50%, so now need to move up by 50% to balance out. */
/*ALT: width: 70%;
left: 15%; */
max-width: 100%;
overflow: hidden;
outline-style: none;
}
h6 {
text-transform: uppercase;
opacity: 0.6;
letter-spacing: 3px;
}
h2 {
margin-top: 10px;
letter-spacing: 1px;
}
.preview {
background: #e40046;
color: #fff;
padding: 30px;
width: 250px;
position: relative;
outline-style: none;
border-radius: 10px 0 0 10px;
margin-right: 10px;
}
<!DOCTYPE html>
<html>
<head>
<title>Card UI design</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<style>
#import url("https://fonts.googleapis.com/css?family=Muli&display=swap");
* {
padding: 0;
margin: 0;
box-sizing: border-box;
/* box-sizing: border-box; CAN ALSO EDIT SIZE LIKE THIS*/
}
</style>
</head>
<body class="body">
<div class="container">
<div class="course">
<div class="preview">
<h6>Course</h6>
<h2>Web Development</h2>
View All Chapters
</div>
<div class="info">
<div class="progress-wrapper">
<div class="progress">
<span class="progress-text">8/9 Challenges</span>
<h6>Chapter 4</h6>
</div>
<h2>JAVASCRIPT, HTML & CSS</h2>
<p class="p-trunc">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis
autem culpa architecto dolores quibusdam deleniti pariatur
corporis, voluptatum ipsa explicabo.
</p>
<button class="btn">Next</button>
</div>
</div>
</div>
</div>
</body>
</html>
I'm experiencing a little problem, probably trivial, that I can't really solve. I've two div's, each containing a div with some text inside.
I noticed that changing the font height within those two inner containers, misaligns the outer ones. I know i could probably play with absolute positions, but can someone tell me why?
body {
margin: 0;
}
.outBox {
width: 300px;
height: 300px;
background: rgb(173, 247, 136);
display: inline-flex;
align-items: center;
}
.inBox {
width: 120px;
background: rgba(53, 186, 222, 1);
margin: 0 auto;
text-align: center;
padding: 5px;
}
.inBox h2 {
margin: 0;
font-size: 16px;
color: white;
}
.inBox p {
margin: 0;
font-size: 18px;
color: white;
}
<div class="outBox">
<div class="inBox">
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h2>
</div>
</div>
<div class="outBox">
<div class="inBox">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
I'm sure someone will come along who can explain why inline-flex on an element differs to flex on the parent (I don't fully understand it), but I do know that if you take off the "display: inline-flex" on your outBox, and put them inside a container element with "display: flex" (or put that on the body), it will solve your problem.
Try wrapping the divs in a "wrapper" with it display set to "flex"
.wrapper {
display: flex;
}
body {
margin: 0;
}
.wrapper {
display: flex;
}
.outBox {
width: 300px;
height: 300px;
background: rgb(173, 247, 136);
display: inline-flex;
align-items: center;
}
.inBox {
width: 120px;
background: rgba(53, 186, 222, 1);
margin: 0 auto;
text-align: center;
padding: 5px;
}
.inBox h2 {
margin: 0px;
font-size: 16px;
color: white;
}
.inBox p {
margin: 0px;
font-size: 18px;
color: white;
}
<div class="wrapper">
<div class="outBox">
<div class="inBox">
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h2>
</div>
</div>
<div class="outBox">
<div class="inBox">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>