Hi I have some text in quoutes (I used png files as quoutes).
The problem is with the line breaking when you shrink down the window size. I am trying to avoid breaking line with image only, like this :
It should only break line with at least some text to the left, like this:
How can I achieve this? Any help would be much appreciated.
.testimonials {
padding: 80px 0;
padding: 60px 0;
position: relative;
}
.testimonials::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.testimonials .testimonial-item {
text-align: center;
color: #fff;
}
.testimonials .testimonial-item .testimonial-img {
width: 100px;
border-radius: 50%;
border: 2px solid #fff;
margin: 0 auto;
}
.testimonials .testimonial-item h3 {
font-size: 30px;
font-weight: bold;
margin: 10px 0 5px 0;
color: black;
}
.testimonials .testimonial-item h4 {
font-size: 20px;
color: red;
margin: 0 0 15px 0;
}
.testimonials .testimonial-item .quote-icon-left, .testimonials .testimonial-item .quote-icon-right {
color: rgba(255, 255, 255, 0.6);
font-size: 26px;
}
.testimonials .testimonial-item .quote-icon-left {
display: inline-block;
left: -2px;
position: relative;
top: 5px;
}
.testimonials .testimonial-item .quote-icon-right {
display: inline-block;
right: -2px;
position: relative;
}
.testimonials .testimonial-item p {
font-style: italic;
margin: 0 auto 15px auto;
color: black;
}
#media (min-width: 1024px) {
.testimonials {
background-attachment: fixed;
}
}
#media (min-width: 992px) {
.testimonials .testimonial-item p {
width: 80%;
}
}
<div class="testimonials">
<div class="testimonial-item">
<h3>John</h3>
<h4>Master</h4>
<p>
<img src="https://www.pngall.com/wp-content/uploads/12/Quotes-Mark-Symbol-PNG-Image.png" class="bi bi-quote quote-icon-left" style="max-width:26px;"/>
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
<img src="https://www.pngall.com/wp-content/uploads/12/Quotes-Mark-Symbol-PNG-Image.png" class="bi bi-quote quote-icon-right" style="max-width:26px;"/>
</p>
</div>
</div>
I just figured out an asnwer based on post : Keep <img> always at the end of text line
<div class="testimonials">
<div class="testimonial-item">
<h3>John</h3>
<h4>Master</h4>
<p>
<img src="https://www.pngall.com/wp-content/uploads/12/Quotes-Mark-Symbol-PNG-Image.png" class="bi bi-quote quote-icon-left" style="max-width:26px;"/>
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem
<span style="white-space:nowrap;">ipsum
<img src="https://www.pngall.com/wp-content/uploads/12/Quotes-Mark-Symbol-PNG-Image.png" class="bi bi-quote quote-icon-right" style="max-width:26px;"/>
</span>
</p>
</div>
</div>
We have to combine last word with the image in the <span></span> element. Then give it a white-space:nowrap styling.
Related
I'm trying to make the parent div's left border the exact same height as the text inside the div.
Here's the problem:
My code is simple:
#box {
width: 500px;
padding-left: 2rem;
border-color: #01B288;
border-style: solid;
border-width: 0 0 0 3px;
}
h1 {
font-size: 80px;
font-family: Arial;
line-height: 1.2;
margin: 0;
padding: 0;
}
p {
font-size: 20px;
font-family: Arial;
line-height: 1.2;
margin: 0;
padding: 0;
}
<div id="box">
<h1>BIGGER FONT EXAMPLE</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit ullanec fermentum enim.</p>
</div>
I found a solution that only works for one block of text, but I have 2 blocks inside the same div.
Use ::before CSS selector.
See the snippet below.
#box {
position: relative;
width: 500px;
height: auto;
padding-left: 2rem;
}
h1 {
font-size: 80px;
font-family: Arial;
line-height: 1.2;
margin: 0;
padding: 0;
}
p {
font-size: 20px;
font-family: Arial;
line-height: 1.2;
margin: 0;
padding: 0;
}
#box::before {
content: "";
width: 3px;
height: 95%;
background-color: #01B288;
left: 0;
bottom: 0;
position: absolute;
display: block;
}
<div id="box">
<h1>BIGGER FONT EXAMPLE</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit ullanec fermentum enim.</p>
</div>
EDIT 1
Use #media query and set different height for mobile. It's currently set to 50% if the viewport is smaller than 576px (50% is obviously too much, so you can see the effect).
See the snippet below.
#box {
position: relative;
width: 500px;
height: auto;
padding-left: 2rem;
overflow: hidden;
}
h1 {
font-size: 80px;
font-family: Arial;
line-height: 1.2;
margin: 0;
padding: 0;
}
p {
font-size: 20px;
font-family: Arial;
line-height: 1.2;
margin: 0;
padding: 0;
}
#box::before {
content: "";
width: 3px;
height: 95%;
background-color: #01B288;
left: 0;
bottom: 0;
position: absolute;
display: block;
}
#media screen and (max-width: 576px) {
#box::before {
height: 50%;
}
}
<div id="box">
<h1>BIGGER FONT EXAMPLE</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit ullanec fermentum enim.</p>
</div>
EDIT 2
What about if you remove line-height only from the first line?
See the snippet below.
#box {
position: relative;
width: 500px;
height: auto;
padding-left: 2rem;
overflow: hidden;
}
h1 {
font-size: 80px;
font-family: Arial;
line-height: 1.2;
margin: 0;
padding: 0;
}
p {
font-size: 20px;
font-family: Arial;
line-height: 1.2;
margin: 0;
padding: 0;
}
#box::before {
content: "";
width: 3px;
height: 100%;
background-color: #01B288;
left: 0;
bottom: 0;
position: absolute;
display: block;
}
h1:first-line {
line-height: 0.8;
}
<div id="box">
<h1>BIGGER FONT EXAMPLE</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit ullanec fermentum enim.</p>
</div>
So have a look at the code below. If you remove the margins and set the line-height to the same height (1em for example) for all the elements in the div that its concerning then you can recreate the line like below.
It might be minimal but if your going to use a different font and it's a bit off just play with the calc(1em / ..). If your going to change te line-height you might try to fiddle with calc(..em / 8).
body{ font-family: Arial, sans-serif; }
h1{ font-size: 80px; }
p{ font-size: 20px; }
div > *{
position: relative;
line-height: 1em;
margin-top: 0;
margin-bottom: 0;
}
div > *::before {
position: absolute;
content: '';
border-left: 3px solid DarkSeaGreen;
height: 100%;
left: -5px;
}
div > *:first-child::before{ top: calc(1em / 8); }
div > *:last-child::before { bottom: calc(1em / 8); }
<div>
<h1>BIGGER FONT EXAMPLE</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.</p>
</div>
Using :Before selector with height:93% of its parent and eyeballing it from top:5.5%
#box {
width: 500px;
padding-left: 2rem;
position:relative;
}
#box:before{
content:"";
position:absolute;
height:93%;
top:7%;
left:0;
border-color: #01B288;
border-style: solid;
border-width: 0 0 0 3px;
}
h1 {
font-size: 80px;
font-family: Arial;
line-height: 1.2;
margin:0;
padding:0;
}
p {
font-size: 20px;
font-family: Arial;
line-height: 1.2;
margin:0;
padding:0;
}
<div id="box">
<h1>BIGGER FONT EXAMPLE</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit ullanec fermentum enim.</p>
</div>
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.
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.
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>