I'm using html/css and text-align: justify; When I use the text below the 2nd line has a big gap between words . The rest of the stuff is fine.
<p style="text-align: justify;">Lorem Ipsum is simply dummy text of the example and Lorem Ipsum is simply dummy text of the lorem. I'm also printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic </p>
I'm getting many extra spaces between each word in this line 2nd line. How ca I fix it ?
Like this:
Lorem Ipsum is simply dummy text of the Lorem Lorem Lorem Lorem Lorem
text of the lorem. I'm also printing and typesetting industry.
Lorem Ipsum has been
The
text-align: justify; spreads out a line to make sure there's no gap at the end of it. To do this, it has to add extra spaces in the middle.
If you don't want this, don't do text-align: justify;, or tell us what you want it to do? Perhaps you want text-align: left?
:)
<html>
<head>
<style>
p.b {
word-spacing: -3px;
}
</style>
</head>
<body>
<p>This is some text. This is some text.</p>
<p class="b">This is some text. This is some text.</p>
</body>
</html>
Related
I don't need to expand/collapse the text, read more will be a hyperlink. I only need static visual properties.
In code snippet below (optimally, look at it in full page), in the first paragraph, it is how it looks like when there is overflow.
On second paragraph, there is no overflow and it looks fine.
On third paragraph, it is how I want it to look like when there is overflow. I want only the card_def to truncate, and read more text to be at the end of third line.
.card_short {
max-height: 65px;
max-width: 603px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.card_def {
font-size: 16px;
display: inline;
overflow: hidden;
}
.card_readmore {
font-size: 16px;
display: inline;
color: #0057b3;
}
<div>This is how it looks when there is an overflow, I don't want this:</div>
<div class="card_short">
<h3 class="card_def">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</h3>
<h3 class="card_readmore">Read more</h3>
</div>
<br><br>
<div>When there isn't overflow, this paragraph is fine:</div>
<div class="card_short">
<h3 class="card_def">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum... There is no overflow here.</h3>
<h3 class="card_readmore">Read more</h3>
</div>
<br><br>
<div>I want the first paragraph to look like this:</div>
<div class="card_short">
<h3 class="card_def">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type s...</h3>
<h3 class="card_readmore">Read more</h3>
</div>
Target the first .card_short and give this element a max-height: 100%;.
.card {
position: relative;
max-width: 603px;
}
.card_short {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.card_def {
font-size: 16px;
display: inline;
overflow: hidden;
}
.card_readmore {
font-size: 16px;
display: inline;
color: #0057b3;
position: absolute;
right: 12px;
bottom: -16px;
background-color: white;
}
.d-none {
display: none;
}
<div class="card">
<div>This is how it looks when there is an overflow, I don't want this:</div>
<div class="card_short">
<h3 class="card_def">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.</h3>
<h3 class="card_readmore" style="bottom: 32px;">...Read more</h3>
</div>
<br><br>
</div>
<div class="card">
<div>When there isn't overflow, this paragraph is fine:</div>
<div class="card_short">
<h3 class="card_def">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum... There is no overflow here.</h3>
<h3 class="card_readmore d-none">...Read more</h3>
<!-- no overflow content, no read more -->
</div>
<br><br>
</div>
<div class="card">
<div>I want the first paragraph to look like this:</div>
<div class="card_short">
<h3 class="card_def">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type s</h3>
<h3 class="card_readmore">...Read more</h3>
</div>
</div>
Can anyone help me to identify an HTML tag that I can use for writing the first letter of a word in "Drop Cap" form as we do it in MS word?
You can try this.
div.first {
line-height: 1.4em;
}
div.first:first-letter {
font-size: 2.8em;
float: left;
margin-top: 0.25em;
}
<div class="first"><span class="second">Ž</span>ed Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
<div class="first"><span class="second">Z</span>as Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
The following CSS style definition will cause the first letter of all <p> tags to be rendered using a larger font and a red color:
p::first-letter{
color: red;
font-size: 3.5em;
}
I have the following CSS and HTML for a Modal:
div.backdrop {
background-color: rgba(0, 0, 0, 0.4);
height: 100%;
left: 0;
overflow: auto;
position: fixed;
top: 0;
width: 100%;
z-index: 2020;
}
div.modal {
background-color: white;
border: 1px solid red;
margin: 10% auto;
max-width: 800px;
width: 80%;
}
<h1>Page main content</h1>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<img src="https://via.placeholder.com/800x120.png"/>
<div class="backdrop">
<div class="modal">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<p>
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<p>
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</div>
</div>
How to center the modal vertically, leaving a margin on top and bottom?
And when the content is to height the modal content should scroll and not the modal itself as it is now.
First Question:
How to center the modal vertically, leaving a margin on top and bottom?
The easiest way to do this would be to make a Flexbox out of the modal's parent. This way you can center the modal vertically and horizontally for sure.
div.backdrop {
background-color: rgba(0, 0, 0, 0.4);
height: 100%;
left: 0;
overflow: auto;
position: fixed;
top: 0;
width: 100%;
z-index: 2020;
display: flex; //Added this
justify-content: center; //Added this
align-items: center; //Added this
}
To leave a margin at the top and bottom you will have to set a max-height for your modal.
div.modal {
background-color: white;
border: 1px solid red;
margin: 10% auto;
max-width: 800px;
width: 80%;
max-height: calc(100% - 40px); //Added this so there will always be 20px free space on the top and bottom.
}
div.backdrop {
background-color: rgba(0, 0, 0, 0.4);
height: 100%;
left: 0;
overflow: auto;
position: fixed;
top: 0;
width: 100%;
z-index: 2020;
display: flex;
justify-content: center;
align-items: center;
}
div.modal {
background-color: white;
border: 1px solid red;
margin: 10% auto;
max-width: 800px;
width: 80%;
max-height: calc(100% - 40px);
}
<h1>Page main content</h1>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<img src="https://via.placeholder.com/800x120.png" />
<div class="backdrop">
<div class="modal">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<p>
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<p>
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</div>
</div>
But you can see a small problem. The text is overshooting at the bottom which leads us to your second question:
Second question:
And when the content is to height the modal content should scroll and not the modal itself as it is now.
To do this and to combat the problem described above let's add a scroll bar:
div.modal {
background-color: white;
border: 1px solid red;
margin: 10% auto;
max-width: 800px;
width: 80%;
max-height: calc(100% - 40px); //Added this so there will always be 20px free space on the top and bottom.
overflow-x: auto; //Added this to add the scroll bar
}
This is the final (working) result:
div.backdrop {
background-color: rgba(0, 0, 0, 0.4);
height: 100%;
left: 0;
overflow: auto;
position: fixed;
top: 0;
width: 100%;
z-index: 2020;
display: flex;
justify-content: center;
align-items: center;
}
div.modal {
background-color: white;
border: 1px solid red;
margin: 10% auto;
max-width: 800px;
width: 80%;
max-height: calc(100% - 40px);
overflow: auto;
}
<h1>Page main content</h1>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<img src="https://via.placeholder.com/800x120.png" />
<div class="backdrop">
<div class="modal">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<p>
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<p>
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</div>
</div>
Edit:
Actually you have some CSS attributes you don't need. I made a simple example of a modal.
.backdrop {
background-color: rgba(0, 0, 0, 0.4);
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.modal {
background-color: white;
border: 1px solid red;
margin: 10% auto;
max-width: 800px;
width: 80%;
max-height: calc(100% - 40px);
overflow: auto;
}
<h1>Page main content</h1>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<img src="https://via.placeholder.com/800x120.png" />
<div class="backdrop">
<div class="modal">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<p>
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<p>
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</div>
</div>
The cleanest way I could think of is to also remove the overflow of the body. I also added some closing and opening mechanics:
function openmodal() {
document.querySelector("body").classList.toggle("overflow-hidden");
document.querySelector(".backdrop").style.display = "flex";
}
function closemodal() {
if (event.target == document.querySelector(".backdrop")) {
document.querySelector("body").classList.toggle("overflow-hidden");
document.querySelector(".backdrop").style.display = "none";
}
}
body {
overflow: auto;
}
.backdrop {
background-color: rgba(0, 0, 0, 0.4);
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
display: none;
justify-content: center;
align-items: center;
}
.modal {
background-color: white;
border: 1px solid red;
margin: 10% auto;
max-width: 800px;
width: 80%;
max-height: calc(100% - 40px);
overflow: auto;
}
.overflow-hidden {
overflow: hidden;
}
<h1>Page main content</h1>
<button onclick="openmodal()">
Clik me
</button>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<img src="https://via.placeholder.com/800x120.png" />
<div class="backdrop" onclick="closemodal()">
<div class="modal">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<p>
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<p>
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</div>
</div>
I am creating a webpage where I need to have a two boxes of text right next to each other as long as the other div has content, then the main text will take the width of the whole space.
However, as the text will scale fine, any image will not and will to the the bottom of the small div, leaving a huge empty space between main text and the image.
Is there a simple way to force the images to scale to the side of the inner div or do I need another solution for this?
Thank you in advance! :)
.container {
width: 600px;
}
.long-text {
overflow: hidden;
width: 100%;
background: white;
}
.long-text p {}
.long-text img {
width: auto;
max-height: 400px;
}
.right-column {
width: 200px;
float: right;
background: green;
padding: 5px 0 0 18px;
}
<div class="container">
<div class="long-text">
<div class="right-column">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</div>
<p>
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
<img src="https://placeimg.com/640/480/any">
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable
</p>
<p>
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
</div>
JS filddle:
https://jsfiddle.net/marginaalivirhe/d8yLko24/8/
You can also make a lay-out for each resolution.
With #media in css https://www.w3schools.com/css/css3_mediaqueries.asp
Are you looking for this result?
.container {
width: 600px;
display:flex
}
.long-text {
flex-grow:1;
background: white;
}
.long-text img {
max-height: 400px;
}
.right-column {
width: 200px;
flex-shrink:0;
background: green;
padding: 5px 0 0 18px;
}
<div class="container">
<div class="long-text">
<p>
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
<img src="https://placeimg.com/640/480/any">
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable
</p>
<p>
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<div class="right-column">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</div>
</div>
When the view of my webpage is on a desktop the text next to it displays fine, however, the moment I resize it to a much smaller size, the text appears all cluttered and appears underneath the images or past the footer. Is it possible to make the text around the image display comfortably, maybe having it above the image or so?
HTML/CSS: https://jsfiddle.net/jof0hzhc/15/
html, body {
margin: 0;
padding: 0;
width: 100%;
}
body {
position: relative;
margin: 0;
padding-bottom: 6rem;
min-height: 100%;
font-family: "Helvetica Neue", Arial, sans-serif;
background-color: black;
}
li>a{display:;}
li>a:hover, /*li hover makes the area around the list of text have a block of color around it when you hover over the text*/
li>a:focus{color:red;text-decoration:underline;} /*li focus is when you select the element, the element gets into a focus*/
header {
width: 98%;
height: 13vh;
}
.welcome {
font-family: courier;
padding: 30px;
font-size: 60px;
color: white;
}
.intro {
color: white;
}
.content {
width: 94%;
margin: 4em auto;
font-size: 20px;
line-height: 30px;
text-align: justify;
}
.content h1 {
margin-top: 0;
}
.apphead {
color: white;
font-size: 100px;
font-family: courier;
}
.apptext {
color:white;
font-size: 45px;
font-weight: bold;
font-family: courier;
}
.games {
margin:0;
position:relative;
border:solid white;
}
.games img {
position:relative;
max-width:100%;
padding: 5px;
transition: 1s;
}
.games img:hover {
transform: scale(1.1);
}
.item img{
display:block;
}
.box {
position: absolute;
color: white;
display: inline;
font-size: 17px;
}
/**
* Footer Styles
*/
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: darkgrey;
text-align: center;
}
.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #fff;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
z-index: 1; /*Allows for the navigation bar to stack on top of content and not appear as it overlaps*/
}
nav ul {
line-height: 60px;
list-style: none;
background: black;
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: orange;
opacity: 10;
}
nav ul li {
display: inline-block;
padding: 16px 40px;;
}
nav ul li a {
text-decoration: none;
color: white;
font-size: 16px;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: orange;
display: none;
}
.activepage {
font-size: 25px;
color: red;
text-decoration: underline;
}
#media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
}
<!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>Responsive Sticky Navbar</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"> </script>
</head>
<body>
<div class="wrapper">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
LOGO
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</nav>
</header>
<div class="slideshow">
<h2 class="welcome">Heading</h2>
<div class="blueberry"> <!----Image slider with 4 images---->
<ul class="slides">
<li><img src="images/spiderman.jpg" height="600px" /></li> </a>
<li><img src="images/kh3.jpg" /></li> </a>
<li><img src="images/galaxy.jpg" /></li> </a>
<li><img src="images/blue.jpg" /></li> </a>
</ul>
</div>
<div class="content">
<p class="intro">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p class="intro">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p class="intro">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p class="intro">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p class="intro">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p class="intro">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p class="intro">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p class="apptext">Games
<div class="games">
<img src="images/1.png" width="640px" height="250px">
<p class="box">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
<div class="games">
<img src="images/2.jpg" width="640px" height="250px">
<p class="box">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
<div class="games">
<img src="images/3.jpg" width="640px" height="250px">
<p class="box">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
<div class="games">
<img src="images/4.jpg" width="640px" height="250px">
<p class="box">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
<div class="games">
<img src="images/5.jpg" width="640px" height="250px">
<p class="box">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
<div class="games">
<img src="images/6.jpg" width="640px" height="250px">
<p class="box">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
</div>
</div>
</body>
<div class="footer">This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</div>
</html>
This happens because you are using position: absolute and, when the child element has this property, the parent element will ignore its height in order to compute its automatic size. So the height of the element is uniquely given by the image. When you resize your browser, the text will dispose on several lines but the height of the div won't change!
To solve this, you have two solutions:
Use a fixed height, if you are sure your text will never exceed that height (it's a bit risky).
Use position: relative in place of position: absolute. This won't align the text and the image on the same row, but you can use other solutions for this problem (and I also added one more now!).