I have been on this single page for more than 3 days now. Can't seem to move the paragraph div on a new line that is supposed to be under the image. The div should take full width and start on a new line. But position is changed.
Weirdly enough the footer text is way up in the main body. I tried a lot of solutions from stackoverflow. But I am starting to freak out.
Did I break something.
Please help.
The text that should be going on a new line, but keeps on staying here.
The text is not even positioned correctly when executed. The bottom text which is marked, is supposed to be in the footer. (see the image linked above also refer my code)
Note: The error is displayed on desktop computer. Mobile view is okay.
h1 {
text-align: center;
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
img {
width: 100%;
}
}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
img {
width: 100%;
}
}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
img {
width: 60%;
}
.mtxt {
width: 40%;
margin-top: 15%;
}
.lefty {
float: left;
}
.righty {
float: right;
}
}<!DOCTYPE html>
<html>
<head>
<title>Be You :)</title>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>Being Different is NOT a Sin</h1>
<img src="images/undraw_both_sides_hbv3.svg">
<div>
<p>You might think what might people say.</p>
<p>And somehow you became extremely self-conscious.</p>
</div>
<img src="images/undraw_friends_online_klj6.svg" class="righty">
<div class="mtxt lefty">
<p>Was it your Friends, Family or the Society... Whatever it was, it changed you.</p>
</div>
<div>
<!--this should be on a seperate new line also it shoould be centered-->
<div>
<p>Do you have any regrets?</p>
<p>Yes?</p>
<p>And are you feeling helpless?</p>
</div>
<!--this is the end of the new line -->
<div>
<img src="images/undraw_feeling_of_joy_ioj2.svg" class="lefty">
<div class="mtxt righty">
<p>Well, whatever your concern is, remember you can overcome anything.</p>
</div>
</div>
<div>
<img src="images/undraw_things_to_say_ewwb.svg" class="righty">
<div class="mtxt lefty">
<p>And if you say you are not sure.</p>
<p>Just think about the worst possible case that could happen.</p>
<p>Don't just keep that in your mind as a secret.</p>
</div>
</div>
<div>
<img src="images/undraw_phone_call_grmk.svg" class="lefty">
<div class="mtxt righty">
<p>We could help. More than that, you know...</p>
<p>I could help you.</p>
</div>
</div>
<div>
<img src="images/undraw_navigator_a479.svg" class="righty">
<div class="mtxt lefty">
<p>So, communicate your fears. It's how we deal with those fears/concerns.</p>
<p>Again remember there is nothing in this world that doesn't have a solution.</p>
</div>
</div>
<div>
<img src="images/undraw_to_the_moon_v1mv.svg" class="lefty">
<div class="mtxt righty">
<p>To achieve it might take time. But yes. We can overcome it.</p>
<p>Just Believe!</p>
<p>So let me take you on a journey.</p>
<p>A journey that will lift you up, to be your higher self.</p>
</div>
</div>
</div>
<div>
<div>
<center>
<!--this is also on a new line and centered at the bottom -->
<p>And always remember to look on the bright side of everything.
<3</p>
<!--new line ends-->
</center>
<img src="images/undraw_true_love_cy8x.svg">
</div>
</div>
</body>
</html>the <3 might be getting the browser not knowing how to render the page as < is the start of an html tag.
You can replace it by its html entity <:
<p style="text-align: center">And always remember to look on the bright side of everything.<3</p>
Besides that, the center tag was deprecated long time ago. Use css as above with the text-align: center.
Also, to get the footer be after the floated elements apply clear: both to the div that contains all the footer as the other content is floated and you want this element to be below the other elements that are floating.
<div style="clear: both">
<div>
<p style="text-align: center">And always remember to look on the bright side of everything.<3</p>
<img src="images/undraw_true_love_cy8x.svg">
</div>
</div>
I've used inline styles to make it easier but you can do as with the other css code to leave it more clear. And you could use the footer tag to wrap all the footer.