I'm having this problem, when I added a background image to a flexbox column, I can see that there is a big blank space at the bottom at the bottom. I tried to inspect the page but could not find the problem. I have no idea how to fix the problem, what I want to do is remove the blank space or make the picture go down all the way.
body {
background-color: rgb(245, 245, 245);
font-family: 'Roboto', sans-serif;
padding: 0;
margin: 0;
overflow: auto;
}
.main {
display: flex;
justify-content: space-evenly;
}
.row {
flex: 50%;
padding: 3em;
padding-left: 15em;
}
.row1 {
flex: 50%;
}
.row-text-top {
padding-bottom: 1em;
font-size: 21px;
}
.row-text-mid {
padding-bottom: 3em;
font-size: 16px;
}
.row-text-mid1 {
font-size: 25px;
border-left: 5px solid #ff9b7c;
padding: 0.5em;
padding-top: 0.1em;
padding-bottom: 0.1em;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
}
.row-text-low {
padding-top: 3em;
}
.row1 {
background-image: url(earth.jpg);
background-size: cover;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>City</title>
<link href="wwd.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="index.js"></script>
</head>
<body>
<div class="main">
<div class="row">
<h1>Overview</h1>
<div class="row-text-top">
One of the most urgent issues of our time, climate change has widespread implications — from the exacerbation of
poverty, to the breakdown of infrastructure, to the loss of environmental, political, economic and social security.
Experts agree that climate change threatens to set back development efforts by decades, placing least developed countries
and already-vulnerable populations in an even more precarious position.
</div>
<div class="row-text-mid">
The latest Intergovernmental Panel on Climate Change (IPCC) Fifth Assessment Report (AR5), signed
off by almost 200 nations, concludes with 95% certainty or more that humans have caused the majority
of climate change since the 1950s. It predicts global surface temperature to continue to rise, along
with increased sea level rise, melting of glaciers and ice sheets, acidification of oceans, increase
in the intensity of tropical storms and changes in precipitation patterns.
</div>
<div class="row-text-mid1">
In other words; the science on climate change is clearer than ever, and so is the urgency for human action.
</div>
<div class="row-text-low">
As a global community, we all have a role in developing and implementing solutions toward significant
transformation in our development patterns. It requires not only a shift in awareness and accountability
for our own individual choices but in a social, political and economic shift towards enabling conditions
for these sustainable choices to be made– and in turn, a more just, equal and healthy planet.
</div>
</div>
<div class="row1">
</div>
</div>
</body>
</html>
It's a bit hard to see because of the image not being there but I will add a picture as well:
The issue is here:
.row {
flex: 50%;
padding: 3em; <---- This line
padding-left: 15em;
}
You're adding additional padding all around the row element, including the bottom. After removing this padding, the space at the bottom of the screen is gone.
Here's a working demo: https://codepen.io/Lissy93/pen/yLvBJLe
Tip: I recommend using the developer tools, with the element selector you can hover over the space, and it will show exactly which element is causing it, and show whether it is (green for) padding and (orange for) margin.
View this snippet fullscreen. The dashed red border is the limit of your flexbox. The space below the image (based on your image) is elsewhere.
body {
background-color: rgb(245, 245, 245);
font-family: 'Roboto', sans-serif;
padding: 0;
margin: 0;
overflow: auto;
}
.main {
display: flex;
justify-content: space-evenly;
border: 5px dashed red;
}
.row {
flex: 50%;
padding: 3em;
/* padding-left: 15em;*/
}
.row1 {
flex: 50%;
}
.row-text-top {
padding-bottom: 1em;
font-size: 21px;
}
.row-text-mid {
padding-bottom: 3em;
font-size: 16px;
}
.row-text-mid1 {
font-size: 25px;
border-left: 5px solid #ff9b7c;
padding: 0.5em;
padding-top: 0.1em;
padding-bottom: 0.1em;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
}
.row-text-low {
padding-top: 3em;
}
.row1 {
background-image: url(https://picsum.photos/id/1/200/300);
background-size: cover;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>City</title>
<link href="wwd.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="index.js"></script>
</head>
<body>
<div class="main">
<div class="row">
<h1>Overview</h1>
<div class="row-text-top">
One of the most urgent issues of our time, climate change has widespread implications — from the exacerbation of poverty, to the breakdown of infrastructure, to the loss of environmental, political, economic and social security. Experts agree that climate
change threatens to set back development efforts by decades, placing least developed countries and already-vulnerable populations in an even more precarious position.
</div>
<div class="row-text-mid">
The latest Intergovernmental Panel on Climate Change (IPCC) Fifth Assessment Report (AR5), signed off by almost 200 nations, concludes with 95% certainty or more that humans have caused the majority of climate change since the 1950s. It predicts global
surface temperature to continue to rise, along with increased sea level rise, melting of glaciers and ice sheets, acidification of oceans, increase in the intensity of tropical storms and changes in precipitation patterns.
</div>
<div class="row-text-mid1">
In other words; the science on climate change is clearer than ever, and so is the urgency for human action.
</div>
<div class="row-text-low">
As a global community, we all have a role in developing and implementing solutions toward significant transformation in our development patterns. It requires not only a shift in awareness and accountability for our own individual choices but in a social,
political and economic shift towards enabling conditions for these sustainable choices to be made– and in turn, a more just, equal and healthy planet.
</div>
</div>
<div class="row1">
</div>
</div>
</body>
</html>
I dont see any space on the bottom. I using firefox on linux.
body {
background-color: rgb(245, 245, 245);
font-family: 'Roboto', sans-serif;
padding: 0;
margin: 0;
overflow: auto;
}
.main {
display: flex;
justify-content: space-evenly;
}
.row {
flex: 50%;
padding: 3em;
padding-left: 15em;
}
.row1 {
flex: 50%;
}
.row-text-top {
padding-bottom: 1em;
font-size: 21px;
}
.row-text-mid {
padding-bottom: 3em;
font-size: 16px;
}
.row-text-mid1 {
font-size: 25px;
border-left: 5px solid #ff9b7c;
padding: 0.5em;
padding-top: 0.1em;
padding-bottom: 0.1em;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
}
.row-text-low {
padding-top: 3em;
}
.row1 {
background-image: url(https://via.placeholder.com/200);
background-size: cover;
}
<div class="main">
<div class="row">
<h1>Overview</h1>
<div class="row-text-top">
One of the most urgent issues of our time, climate change has widespread implications — from the exacerbation of
poverty, to the breakdown of infrastructure, to the loss of environmental, political, economic and social security.
Experts agree that climate change threatens to set back development efforts by decades, placing least developed countries
and already-vulnerable populations in an even more precarious position.
</div>
<div class="row-text-mid">
The latest Intergovernmental Panel on Climate Change (IPCC) Fifth Assessment Report (AR5), signed
off by almost 200 nations, concludes with 95% certainty or more that humans have caused the majority
of climate change since the 1950s. It predicts global surface temperature to continue to rise, along
with increased sea level rise, melting of glaciers and ice sheets, acidification of oceans, increase
in the intensity of tropical storms and changes in precipitation patterns.
</div>
<div class="row-text-mid1">
In other words; the science on climate change is clearer than ever, and so is the urgency for human action.
</div>
<div class="row-text-low">
As a global community, we all have a role in developing and implementing solutions toward significant
transformation in our development patterns. It requires not only a shift in awareness and accountability
for our own individual choices but in a social, political and economic shift towards enabling conditions
for these sustainable choices to be made– and in turn, a more just, equal and healthy planet.
</div>
</div>
<div class="row1">
</div>
</div>
Related
This question already has answers here:
Removing extra white space when using first-letter
(3 answers)
Closed 1 year ago.
I am just trying to layout some type of information page that has the question and then there is a it's answer. I have applied some indentation and make the first letter bigger of the paragraph. The problem is that there is a extra space under the first line. I don't want the extra space that is appeared after using ::before-letter pseudo selector. have any idea or trick...
Here is the code :
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
nav {
height: 50px;
background-color: rgb(236, 195, 141);
}
ul {
display: flex;
align-items: center;
justify-content: center;
list-style: none;
}
li {
margin: 15px 10px;
font-size: 20px;
}
section {
background-color: rgb(194, 175, 212);
padding: 10px 20px;
}
h1 {
margin: 10px 0;
font-size: 30px;
}
p {
text-align: justify;
padding-right: 50px;
}
p::first-letter {
font-size: 55px;
padding-left: 30px;
}
footer {
background-color: rgb(236, 195, 141);
height: 30px;
text-align: center;
line-height: 30px;
}
<!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>Document</title>
</head>
<body>
<nav class="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact Us</li>
</ul>
</nav>
<section class="main">
<h1>What you know about Technology?</h1>
<p class="para">Technology is the important part of our day to day life. We get up in the morning from the
ringing of our alarm clocks and go to bed at night after switching our lights off. All these luxuries
that we are able to afford are a resultant of science and technology. Most importantly, how we can do
all this in a short time are because of the advancement of science and technology only. It is hard to
imagine our life now without science and technology. Indeed our existence itself depends on it now.
Every day new technologies are coming up which are making human life easier and more comfortable. Thus,
we live in an era of science and technology.
Essentially, Science and Technology have introduced us to the establishment of modern civilization. This
development contributes greatly to almost every aspect of our daily life. Hence, people get the chance
to enjoy these results, which make our lives more relaxed and pleasurable. If we think about it, there
are numerous benefits of science and technology. They range from the little things to the big ones. For
instance, the morning paper which we read that delivers us reliable information is a result of
scientific progress. In addition, the electrical devices without which life is hard to imagine like a
refrigerator, AC, microwave and more are a result of technological advancement.
</p>
</section>
<footer>All rights reserved 2021</footer>
</body>
</html>
I don't know if this solution is neat enough, but you can fix it by adjusting its line-height.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
nav {
height: 50px;
background-color: rgb(236, 195, 141);
}
ul {
display: flex;
align-items: center;
justify-content: center;
list-style: none;
}
li {
margin: 15px 10px;
font-size: 20px;
}
section {
background-color: rgb(194, 175, 212);
padding: 10px 20px;
}
h1 {
margin: 10px 0;
font-size: 30px;
}
p {
text-align: justify;
padding-right: 50px;
}
p::first-letter {
font-size: 55px;
padding-left: 30px;
line-height: 0.8;
}
footer {
background-color: rgb(236, 195, 141);
height: 30px;
text-align: center;
line-height: 30px;
}
<!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>Document</title>
</head>
<body>
<nav class="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact Us</li>
</ul>
</nav>
<section class="main">
<h1>What you know about Technology?</h1>
<p class="para">Technology is the important part of our day to day life. We get up in the morning from the
ringing of our alarm clocks and go to bed at night after switching our lights off. All these luxuries
that we are able to afford are a resultant of science and technology. Most importantly, how we can do
all this in a short time are because of the advancement of science and technology only. It is hard to
imagine our life now without science and technology. Indeed our existence itself depends on it now.
Every day new technologies are coming up which are making human life easier and more comfortable. Thus,
we live in an era of science and technology.
Essentially, Science and Technology have introduced us to the establishment of modern civilization. This
development contributes greatly to almost every aspect of our daily life. Hence, people get the chance
to enjoy these results, which make our lives more relaxed and pleasurable. If we think about it, there
are numerous benefits of science and technology. They range from the little things to the big ones. For
instance, the morning paper which we read that delivers us reliable information is a result of
scientific progress. In addition, the electrical devices without which life is hard to imagine like a
refrigerator, AC, microwave and more are a result of technological advancement.
</p>
</section>
<footer>All rights reserved 2021</footer>
</body>
</html>
This question already has answers here:
How can I get rid of margin around my HTML content?
(5 answers)
How can I remove space (margin) above HTML header?
(8 answers)
Remove padding beneath heading tag
(6 answers)
Closed 3 years ago.
I am trying to remove the spacing around the teal box in the header. I want the bottom line to match up with the bottom of the teal box. Here is a picture of what I am trying to achieve what my goal is, followed by my code:
.
#wrap {
margin: 0 auto;
width: 960px;
text-align: center;
}
body {
margin: 0 auto;
width: 960px;
}
#firstName {
color: white;
background-color: #4aaaa5;
width: 300px;
height: 85px;
float: left;
font-family: Georgia, 'Times New Roman', Times, serif;
line-height: 250%;
text-align: center;
}
#menu {
color: #777777;
background-color: white;
width: 300px;
height: 85px;
font-family: Georgia, 'Times New Roman', Times, serif;
float: right;
line-height: 125px;
}
hr {
margin: 0, 0, 0, 0;
clear: both;
}
img {
width: 200px;
height: 200px;
}
#aboutMe {
clear: both;
}
<!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>Rob Connolly's Portfolio</title>
<link rel="stylesheet" href="/Users/georgeconnolly/Desktop/ucsd-bootcamp/homework-trial/style.css">
</head>
<div id="wrap">
<header>
<h1 id="firstName">
Rob Connolly
</h1>
<div id="menu">
<span>
About
</span>
<span>
Portfolio
</span>
<span>
Contact
</span>
</div>
</div>
</header>
<hr>
<body>
<div id="aboutMe">
<h2>
About Me
</h2>
<img src="/Users/georgeconnolly/Desktop/ucsd-bootcamp/homework/assets/images/rob-connolly.jpg" alt="rob connolly photo">
<p>
Welcome to my portfolio page. I would first like to say that I appreciate you taking the time to learn a little bit about who I am. I would describe myself as someone who has a "whatever it takes to get the job done right" outlook. For someone reason,
it is something I was born with. No matter how large the barrier is to complete the job, I will get my project to the finish line! For example, before my wife and I got married, we needed to build a substantial budget to put on a wedding without
depleting our savings. I told my girlfriend at the time, wife now, I will find a way to fund this whole wedding in 90 days. I accomplished that goal with 10 days to spare, $25,000. It all started with buying and selling 1100 pairs of women's shoes
in 72 hours. Check out the pictures HERE.
</p>
<p>
Something that sets me apart as a developer is, I look at things as an entrepreneur. I have founded 2 companies, bootstrapped them to scale, and I have had successful exits. I always try and build things in a manner that fits the project. I want to see
my code help your business scale.
</p>
<p>
If you have any more questions about me, my experience, or how many games is Notre Dame going to win in Football, please use the contact form above.
</p>
</div>
<p>
Copyright ©
</p>
</body>
</html>
First, you should move your <header> to inside your <body>. Second, you can remove the margin for #firstName by adding margin: 0 to the selector:
#firstName {
margin: 0;
}
Then, you can use Flexbox on #menu to center your menu vertically:
#menu {
/* Adds Flexbox to element */
display: flex;
/* Aligns the menu's children horizontally, putting equal
spacing between each child */
justify-content: space-between;
/* Aligns the menu's children vertically */
align-items: center;
}
#wrap {
margin: 0 auto;
width: 960px;
text-align: center;
}
body {
margin: 0 auto;
width: 960px;
}
#firstName {
/* Remove margin from the div */
margin: 0;
color: white;
background-color: #4aaaa5;
width: 300px;
height: 85px;
float: left;
font-family: Georgia, 'Times New Roman', Times, serif;
line-height: 250%;
text-align: center;
}
#menu {
color: #777777;
background-color: white;
width: 300px;
height: 85px;
font-family: Georgia, 'Times New Roman', Times, serif;
float: right;
line-height: 125px;
/* Add Flexbox to your menu*/
display: flex;
justify-content: space-between;
align-items: center;
}
hr {
margin: 0, 0, 0, 0;
clear: both;
}
img {
width: 200px;
height: 200px;
}
#aboutMe {
clear: both;
}
<!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>Rob Connolly's Portfolio</title>
<link rel="stylesheet" href="/Users/georgeconnolly/Desktop/ucsd-bootcamp/homework-trial/style.css">
</head>
<body>
<div id="wrap">
<header>
<h1 id="firstName">Rob Connolly</h1>
<div id="menu">
<span>About </span>
<span>Portfolio </span>
<span>
Contact
</span>
</div>
</header>
</div>
<hr>
<div id="aboutMe">
<h2>
About Me
</h2>
<img src="/Users/georgeconnolly/Desktop/ucsd-bootcamp/homework/assets/images/rob-connolly.jpg" alt="rob connolly photo">
<p>
Welcome to my portfolio page. I would first like to say that I appreciate you taking the time to learn a little bit about who I am. I would describe myself as someone who has a "whatever it takes to get the job done right" outlook. For someone reason,
it is something I was born with. No matter how large the barrier is to complete the job, I will get my project to the finish line! For example, before my wife and I got married, we needed to build a substantial budget to put on a wedding without
depleting our savings. I told my girlfriend at the time, wife now, I will find a way to fund this whole wedding in 90 days. I accomplished that goal with 10 days to spare, $25,000. It all started with buying and selling 1100 pairs of women's shoes
in 72 hours. Check out the pictures HERE.
</p>
<p>
Something that sets me apart as a developer is, I look at things as an entrepreneur. I have founded 2 companies, bootstrapped them to scale, and I have had successful exits. I always try and build things in a manner that fits the project. I want to see
my code help your business scale.
</p>
<p>
If you have any more questions about me, my experience, or how many games is Notre Dame going to win in Football, please use the contact form above.
</p>
</div>
<p>
Copyright ©
</p>
</body>
</html>
I am trying to create my first website from scratch using HTML/CSS. The problem I am having is that text I have on a page exceeds the bounds of the background image and when I scroll downwards, the container (.violence) seems to stop displaying the linear-gradient and moves on to a white background. Is there any way I can extend and fit the gradient to match the amount of text I put in?
Thanks in advance.
I have tried searching the web for solutions but my lack of knowledge and understanding of HTML/CSS have prevented me from resolving the issue.
* {
margin: 0;
padding: 0;
}
header {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(background.jpg);
height: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: 100%;
}
.main-nav {
float: right;
list-style: none;
margin-top: 30px;
}
.main-nav li {
display: inline-block;
}
.main-nav li a {
color: white;
text-decoration: underline;
padding: 5px 10px;
font-family: "Trajan Pro", sans-serif;
font-size: 15px;
}
.main-nav li.active a {
border: 1px solid white;
}
.main-nav li a:hover {
border: 1px solid white;
}
.logo img {
width: 150px;
height: auto;
float: left;
}
body {
font-family: monospace;
}
.row {
max-width: 1200px;
margin: auto;
}
.welcome {
position: absolute;
width: 1200px;
margin-left: 375px;
margin-top: 425px;
}
h1 {
color: white;
font-family: "Trajan Pro", sans-serif;
font-size: 50px;
text-align: center;
margin-top: 0px;
}
h2 {
color: white;
font-family: "Trajan Pro", sans-serif;
font-style: italic;
font-size: 22px;
text-align: center;
margin-top: 0px;
}
.violence {
position: absolute;
width: 1200px;
margin-left: 375px;
margin-top: 75px;
}
h3 {
color: white;
font-family: "Trajan Pro", sans-serif;
font-style: italic;
font-size: 20px;
text-align: center;
margin-top: 0px;
}
h4 {
color: white;
font-family: "Trajan Pro", sans-serif;
font-size: 15px;
text-align: left;
margin-top: 25px;
}
h5 {
color: white;
font-family: "Trajan Pro", sans-serif;
font-style: italic;
font-size: 20px;
text-align: center;
margin-top: 0px;
}
h6 {
color: white;
font-family: "Trajan Pro", sans-serif;
font-size: 15px;
text-align: left;
margin-top: 0px;
}
h7 {
color: white;
font-family: "Trajan Pro", sans-serif;
font-style: italic;
font-size: 20px;
text-align: center;
margin-top: 0px;
}
h8 {
color: white;
font-family: "Trajan Pro", sans-serif;
font-size: 15px;
text-align: left;
margin-top: 0px;
}
h9 {
color: white;
font-family: "Trajan Pro", sans-serif;
font-style: italic;
font-size: 20px;
text-align: center;
margin-top: 0px;
}
<html>
<head>
<title>The Quest for Arrakis: The Second Imperial Renaissance</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div class="row">
<div class="logo">
<img src="logo.png">
</div>
<ul class="main-nav">
<li> HOME </li>
<li class="active"> GAME SETTING </li>
<li> CHARACTERS AND ENTITIES </li>
<li> WRITING SAMPLES </li>
<li> GAME FEATURES </li>
<li> JOIN </li>
<li> CONTACT US </li>
</ul>
</div>
<div class="violence">
<h3>
<p>"There is no escape—we pay for the violence of our ancestors." <br>- Frank Herbert, Dune</p>
</h3>
<h4>
<p>Quest for Arrakis II continues the decade long history and political machinations of the original Quest for Arrakis. It is an intense setting that stays true to the canon as set forth by Frank Herbert and focuses primarily on power politics and
grand story telling. Much like the in the novels most anything is possible…if the player is willing to pay the right price.</p><br>
<p>The setting is an alternative universe to the world as designed by Frank Herbert and taking place some twelve centuries before the time of Paul Atreides. The Corrino Empire has suffered through a devastating war which has taken the life of the
previous Emperor and plunged the human race into a period of economic collapse and massive social unrest. Old houses have fallen or been reduced in power leaving a vacuum for the ambitious to make a name for themselves. Under the watchful eye
of a new soverign the Empire begins the long road back to prosperity. New houses seek to establish themselves as old ones try to return to glory.</p><br>
<p>We offer an intense gaming atmosphere with motivated players, helpful staff and well detailed game environment. Everything is story driven and the opportunities are endless for writers willing to be active. Will you raise your banner in this brave
new age? The perils are daunting and the road will be hard but do you have what it takes to rise to power in the Quest for Arrakis II?</p>
<h5><br>
<p>"Beginnings are such delicate times." <br>-Princess Irulan</p>
</h5>
<h6><br>
<p>In the Year 8760 A.G., The Imperium has emerged from a devestating conflict known as The Second Muadru Incursion. Houses have fallen, and widespread economic collapse have devastated the fortunes of the Houses of the Imperium. As the Empire
returns to glory beneath the Rule of Padishah-Emperor Ezhar the Seventh, Houses New and Old seek to stablise themselves in a turbulent epoch of Imperial History with plenty of opportunity to do so.</p>
</h6>
<h7><br>
<p>"Control the coinage and the courts - let the rabble have the rest." Thus the Padishah Emperor advises you. And he tells you; "If you want profits, you must rule." There is truth in these words, but I ask myself: "Who are the rabble and who
are the ruled?"<br>-Princess Irulan</p>
</h7>
<h8>
<p><br>The Quest for Arrakis II offers many paths to power.</p>
<p><br>The Landsraad acts as the Political Hub of the Imperium with the Houses and Players generating most of our Game's Laws and Rule Sets.</p>
<p><br>If economics piques your interest, then CHOAM serves as the legislature that defines the economic fortunes of the Empire with its Board of Directors governing In Character Policy.</p>
<p><br>If it is the Favour of the Corrino that drives your ambitions, then the Court of the Emperor will provide you with the opportunity to make a name and reputation for yourself beneath the watchful eye of the Emperor.
<p><br>Regardless of the path you choose, all roads leads to Arrakis and the fortunes that lie hidden beneath its sands, guarded by Fremen and Worm alike. The journey will not be easy but with enough patience, perseverance and determination,
you may one day rule the Desert Planet and harness the riches and power for yourself!</p>
</h8>
<h9>
<p><br>"One must always keep the tools of statecraft sharp and ready. Power and fear –sharp and ready." <br>- Baron Vladimir Harkonnen</p>
</h9>
</div>
</header>
</body>
</html>
I expect the text to continue being visible.
Your question was too vague but I still tried so here is my answer for you.You should apply the background-image property to the violence class itself instead of the header class.
I understand you are new to HTML/CSS but you should check on the web for quality resources to learn the languages as well as best practises.Your code has very basic errors which should not be there.
HTML has heading tags <h1> to <h6> but you have used headings tags beyond that which HTML does not recognise or support.
From what I can see you have used headings tags for styling purposes which is wrong.In this case you should remove all the heading tags except <h3> which is actually used as a heading.
I can also see your knowledge about semantic tags is shallow so it would be better if you spend a little time reading about them.
When my site is full screen, the four pictures show up in a horizontal line. However, when the window gets smaller, the last picture folds over into the next line. I want all the pictures to stay in a horizontal line no matter what the window size. Any suggestions?
My code:
body {
font-size: 1.5rem;
margin: 0;
display: inline-block;
list-style-type: none;
position: relative;
width: 100%;
background-color: #d5e0e8;
}
img {
padding: 2px;
}
h1 {
text-align:center;
padding: 20px;
font-family: 'Oswald', sans-serif;
}
h2 {
text-align: center;
font-size: 40px;
font-family: 'Oswald', sans-serif;
background-color: #a2b5c1;
}
h3{
text-align: center;
font-size: 40px;
font-family: 'Oswald', sans-serif;
background-color: #a2b5c1;
}
h4 {
text-align: center;
font-size: 40px;
font-family: 'Oswald', sans-serif;
background-color: #a2b5c1;
}
ul {
font-family: 'Open Sans Condensed', sans-serif;
font-size: 25px;
background-color: #6e95ad;
margin: 25px;
}
p {
text-align: center;
font-size: 25px;
font-family: 'Open Sans Condensed', sans-serif;
background-color: #6e95ad;
margin: 25px;
}
p1 {
margin: 525;
font-family: 'Open Sans Condensed', sans-serif;
}
<html>
<img src="making%20a%20scene.jpg">
<img src="sbsn.jpg">
<img src="mvp.jpg">
<img src="kevin.jpg">
<head>
<link rel="stylesheet" href="styles.css" >
<link href="https://fonts.googleapis.com/css?family=Oswald:700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
<title> My Job </title>
</head>
<body>
<div style="visibility: hidden; height: 0; width: 0">
</div>
<div>
<h1> ... ENTERTAINMENT </h1>
<h2 class="display-3"> Who We Are </h2>
<p class="lead"> ...is a television production and development company located in S..., California. We create content for television and digital sites such as The History Channel, TLC, Netflix, Discovery, YouTube Red, and many more.
INE was founded by ... and .... These exectives are responsible for creating shows such as The Office (US), The Biggest Loser, Masterchef, Real Housewives of Orange County, Tabatha‘s Salon Takeover, and several others. </p>
<p1> ...Entertainment Sizzle Reel </p1>
</div>
<div>
<h3> My Role </h3>
<p> In the summer of 2017, I was hired as a Development Research Associate after working for three months as an intern for .... My role as a research associate varies each work day. My duties include finding and contacting potential talent for digital and reality series, writing and organizing television pitches for networks, deck design, cold-calling experts, and exectuive assitance to ... and .... </p>
</div>
<!-- They are very scary. -->
<span>
<h4> Employment Hightlights </h4>
<ul>
<li> Transcripting broadcast scripts for <i> Making a Scene with James Franco </i></li>
<li> $ $ $ </li>
<li> Acting as Production Assistant for <i> MVP </i> starring Rob Gronkowski, Andre Ward, Terell Owens, and Julius Randall at CBS Studios</li>
<li><s> Free Lunch </s></li>
<li> My roommate was named Morgan Freeman. </li>
</ul>
</span>
</body>
</html>
I guess you are searching the CSS white-space: nowrap. The effect is that a line will never break.
HTML
<div class="nowrap">
<img src="making%20a%20scene.jpg">
<img src="sbsn.jpg">
<img src="mvp.jpg">
<img src="kevin.jpg">
</div>
CSS
.nowrap {
white-space: nowrap;
}
Demo:
https://jsfiddle.net/2yxcz34d/1/
You could further control the behaviour of the .nowrap container with the CSS overflow: hidden; or overflow: visible;.
So I have this working for you, but first note is you need to remove the HTML tag to the very top. It should come before the body. For this question I moved it to the top and put everything else below inside of a tag. Use for a headline that should appear in the body.
Working Example: https://codepen.io/anon/pen/LzZpbe
In the HTML I wrapped the images in a div and gave it the class "gallery-container" and wrapped each image in a div and gave it a calss "gal-image".
HTML
<div class="gallery-container">
<div class="gal-image">
<img src="https://i.sdlcdn.com/img/product/descimg/SDL008306056_2.jpg">
</div>
<div class="gal-image">
<img src="https://images-na.ssl-images-amazon.com/images/I/71GTFDd4KiL._SX355_.jpg">
</div>
<div class="gal-image">
<img src="http://ssl-product-images.www8-hp.com/digmedialib/prodimg/lowres/c03815648.png">
</div>
<div class="gal-image">
<img src="https://assets.logitech.com/assets/65057/k840-mechanical-pdp.png">
</div>
</div><!-- END GALLERY CONTAINER -->
For the CSS I gave the .gallery-container a width of 100% and the .gal-image a width of 25%. This ensures the images will always be 25% of the total .gallery-container width(100%) so all 4 images will always be side-by-side. I gave your images a padding-right of 2px to separate them by 2px but gave the last image a padding-right of 0 so it does not push the container our 2px and cause a horizontal scrollbar.
CSS
img{
padding-right:2px;
max-width:100%;
}
img:last-of-type{
padding-right:0px;
}
.gallery-container{
width:100%;
}
.gal-image{
width:25%;
float:left;
}
Yesterday I posted a question and some people responded very nicely. However I have tried everything you said and nothing seems to be working.
It does work if I give the image a width, but only if that width is smaller than the actual parragraph (500px). My image is bigger than that. I have tried to change the width in the image (adding a class to the image and then specifying the image's width in the css and still not working, even writing !important before the semicolon)
I am gonna paste the entire's "website" (is an easy one page Resume) code so you can see more clearly what might be wrong.
I want the image to be centered and maintain its original size:
<!DOCTYPE html>
<html>
<head>
<title>My Resume</title>
<link href="http://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Playfair+Display:900" rel="stylesheet" type="text/css">
<style type="text/css">
body, h1, h2, h3, p {
margin: 0;
}
header {
padding-top: 120px;
padding-bottom: 120px;
background-image: url('http://bit.ly/1FV66V8');
background-size: cover;
font-family: 'Playfair Display';
text-align: center;
color: #DB5175;
}
h1 {
font-size: 72px;
}
h2 {
margin-bottom: 40px;
font-size: 24px;
}
h3 {
margin-top: 70px;
margin-bottom: 70px;
border: 2px solid #ffffff;
display: inline-block;
padding-right: 30px;
padding-left: 30px;
padding-top: 15px;
padding-bottom: 15px;
text-transform: uppercase;
letter-spacing: 2px;
}
main {
padding-bottom: 100px;
background-color: #DB5175;
font-family: 'Roboto';
color: white;
text-align: center;
}
p {
padding-bottom: 20px;
width: 500px;
margin-left: auto;
margin-right: auto;
line-height: 160%;
}
</style>
</head>
<body>
<header>
<h1>Name Surname</h1>
<h2>Blogger</h2>
<p>
<img src="https://lh4.googleusercontent.com/-AhzOzjiqgqg/UMIP9ONtHsI/AAAAAAAACzM/GzwcSFumocs/s65/facebook.png" alt="Facebook Icon" />
<img src="https://lh5.googleusercontent.com/-E4DPgG0jOhk/UMIP81ijQ1I/AAAAAAAACzI/5jFodl9F9N4/s65/twitter_bird.png" alt="Twitter Icon" />
<img src="https://lh6.googleusercontent.com/-mswXpGilY98/Ugp9MeFO_pI/AAAAAAAAER0/nhReers_OJg/s64/instagram.png" alt="Instagram Icon" />
<img src="https://lh5.googleusercontent.com/-DMXeFEjNoV8/UMIP9F6SnJI/AAAAAAAACzQ/itYWZIxvOuw/s65/pintrest.png" alt="Pinterest Icon" />
</p>
</header>
<main>
<h3>Background</h3>
<p>I've been rolling solo since 2014, but previously jammed with a bunch of tech startups like Dropbox, Codecademy, and Treehouse. My recent work is a departure from my product-centric past, focusing on 3D illustration, animation, and motion design.</p>
<p><img src="http://los40tuxtla.com/wp-content/uploads/2015/05/nrm_1410437342-blake-lively-gucci-hp.jpg" alt="Foto Blanca"/></p>
<p>That's kind of what it's all about, y'know? Feeling out our path, taking creative risks, and knocking it out of the park without taking it too seriously. I get into specific tactics and proven strategies, but it's also an ongoing conversation about growth, meaning, and happiness.</p>
<p>I've met lots of creative and curious people through my newsletter, where we talk shop and share experiences. I'd love to meet you, too!</p>
<h3>Philosophy</h3>
<p>I'm a lifelong learner and love to gather new skills and study extraordinary people. I believe 1) being exceptional is often just putting in more effort than anyone expects, 2) releasing our ego is a prerequisite for growth, and 3) life is too important to take seriously. Party on!</p>
</main>
</body>
</html>
Thanks!
Just set the width 100% in image. It will automatically adapt with the parent width.
body, h1, h2, h3, p {
margin: 0;
}
header {
padding-top: 120px;
padding-bottom: 120px;
background-image: url('http://bit.ly/1FV66V8');
background-size: cover;
font-family: 'Playfair Display';
text-align: center;
color: #DB5175;
}
h1 {
font-size: 72px;
}
h2 {
margin-bottom: 40px;
font-size: 24px;
}
h3 {
margin-top: 70px;
margin-bottom: 70px;
border: 2px solid #ffffff;
display: inline-block;
padding-right: 30px;
padding-left: 30px;
padding-top: 15px;
padding-bottom: 15px;
text-transform: uppercase;
letter-spacing: 2px;
}
main {
padding-bottom: 100px;
background-color: #DB5175;
font-family: 'Roboto';
color: white;
text-align: center;
}
p {
padding-bottom: 20px;
width: 500px;
margin-left: auto;
margin-right: auto;
line-height: 160%;
}
<header>
<h1>Name Surname</h1>
<h2>Blogger</h2>
<p>
<img src="https://lh4.googleusercontent.com/-AhzOzjiqgqg/UMIP9ONtHsI/AAAAAAAACzM/GzwcSFumocs/s65/facebook.png" alt="Facebook Icon" />
<img src="https://lh5.googleusercontent.com/-E4DPgG0jOhk/UMIP81ijQ1I/AAAAAAAACzI/5jFodl9F9N4/s65/twitter_bird.png" alt="Twitter Icon" />
<img src="https://lh6.googleusercontent.com/-mswXpGilY98/Ugp9MeFO_pI/AAAAAAAAER0/nhReers_OJg/s64/instagram.png" alt="Instagram Icon" />
<img src="https://lh5.googleusercontent.com/-DMXeFEjNoV8/UMIP9F6SnJI/AAAAAAAACzQ/itYWZIxvOuw/s65/pintrest.png" alt="Pinterest Icon" />
</p>
</header>
<main>
<h3>Background</h3>
<p>I've been rolling solo since 2014, but previously jammed with a bunch of tech startups like Dropbox, Codecademy, and Treehouse. My recent work is a departure from my product-centric past, focusing on 3D illustration, animation, and motion design.</p>
<p><img src="http://los40tuxtla.com/wp-content/uploads/2015/05/nrm_1410437342-blake-lively-gucci-hp.jpg" width="100%" alt="Foto Blanca"/></p>
<p>That's kind of what it's all about, y'know? Feeling out our path, taking creative risks, and knocking it out of the park without taking it too seriously. I get into specific tactics and proven strategies, but it's also an ongoing conversation about growth, meaning, and happiness.</p>
<p>I've met lots of creative and curious people through my newsletter, where we talk shop and share experiences. I'd love to meet you, too!</p>
<h3>Philosophy</h3>
<p>I'm a lifelong learner and love to gather new skills and study extraordinary people. I believe 1) being exceptional is often just putting in more effort than anyone expects, 2) releasing our ego is a prerequisite for growth, and 3) life is too important to take seriously. Party on!</p>
</main>
Thanks to all.
I wanna answer what I did in the end in case it helps someone else in the future.
The teacher/class said to "wrap" the image in a p. Following #Fabian Lurtz's adice in changed the p for a div.
Then in the css, following #Alvin Pascoe's advice in this thread: http://bit.ly/1OniMMl
I added:
.div {
display: block;
margin-left: auto;
margin-right: auto;
}
If my "website" would have had more divs I could have just setup a class or id
Hope it helps. Thanks again to all!
If you want to set the width to 100%, just set the width to-
max-width: 100%