Why isn't the <button> element breaking into the new line after the H1 tag?-CodePudding

My goal is to place the button tag at the end of the ".col-1" container. I have tried creating the new container named "hero-header" inside of the first one and setting it to the display: flex; didn't work at all because I don't know how to specify the width without the elements escaping out of the container.

Using properties like align-self or align-items didn't work because I don't have height specified.

One of the things I've tried as well is setting the flex-direction of "hero-header" to the column but after I do that my items get pushed to the left even though I used flexbox positioning properties.

One more thing, why won't my ul elements go into the same line after applying display: flex; to the instead of the UL?

Here's the code:

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  color: white;
  font-family: sans-serif;
}

.col-1 {
  padding-top: 0.7em;
  padding-left: 10px;
  padding-right: 10px;
  background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
    url("/img/pexels-li-sun-2294361.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 100vh;
}

a {
  color: white;
}

h2 {
  margin-left: 1.5em;
  text-shadow: 1px 1px 5px black;
}

.navbar-brand {
  color: orangered;
}

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

ul {
  display: flex;
  padding: 20px;
  list-style: none;
  text-shadow: 3px 3px 20px black;
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
}

h2 a {
  text-decoration: none;
}

ul li a {
  text-decoration: none;
  padding-right: 2em;
}

.hero-header {
  display: flex;
  justify-content: center;
  margin-top: 5em;
}

.hero-header h1 {
  letter-spacing: 3px;
  font-family: "Montserrat", sans-serif;
}

button {
  width: 13%;
}

<!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">
    <link rel="stylesheet" href="css/style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Open Sans:wght@300&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap" rel="stylesheet">
    <title>GymNyc</title>
</head>
<body>
            <div class="col-1">
                <nav>
                    <h2><a href="#index.html">Gym<span class="navbar-brand">Nyc</span></a></h2>
                    <ul>
                        <li><a href="#">About us</a></li>
                        <li><a href="#">Features</a></li>
                        <li><a href="#">Classes</a></li>
                        <li><a href="#">Coaches</a></li>
                        <li><a href="#">Contact us</a></li>
                    </ul>
                </nav>
                <div class="hero-header">
                    <h1>MAKE A CHANGE.</h1>
                    <button>sign up</button>
                </div>
            </div>
</body>
</html>

CodePudding user response：

You need to use this two properties on .hero-header class and it should works as you want to work ;-) if I understood correctly:-D...

to break lines / in this case, row/column

flex-direction: column;

to center vertically

align-items: center;

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  color: white;
  font-family: sans-serif;
}

.col-1 {
  padding-top: 0.7em;
  padding-left: 10px;
  padding-right: 10px;
  background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
    url("/img/pexels-li-sun-2294361.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 100vh;
}

a {
  color: white;
}

h2 {
  margin-left: 1.5em;
  text-shadow: 1px 1px 5px black;
}

.navbar-brand {
  color: orangered;
}

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

ul {
  display: flex;
  padding: 20px;
  list-style: none;
  text-shadow: 3px 3px 20px black;
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
}

h2 a {
  text-decoration: none;
}

ul li a {
  text-decoration: none;
  padding-right: 2em;
}

.hero-header {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top: 5em;
}

.hero-header h1 {
  letter-spacing: 3px;
  font-family: "Montserrat", sans-serif;
}

button {
  width: 13%;
}

<!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">
    <link rel="stylesheet" href="css/style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Open Sans:wght@300&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap" rel="stylesheet">
    <title>GymNyc</title>
</head>
<body>
            <div class="col-1">
                <nav>
                    <h2><a href="#index.html">Gym<span class="navbar-brand">Nyc</span></a></h2>
                    <ul>
                        <li><a href="#">About us</a></li>
                        <li><a href="#">Features</a></li>
                        <li><a href="#">Classes</a></li>
                        <li><a href="#">Coaches</a></li>
                        <li><a href="#">Contact us</a></li>
                    </ul>
                </nav>
                <div class="hero-header">
                    <h1>MAKE A CHANGE.</h1>
                    <button>sign up</button>
                </div>
            </div>
</body>
</html>

CodePudding user response：

<div class="hero-header">
                <h1>MAKE A CHANGE.</h1>
            </div>
            <center><button>sign up</button></center>
        </div>

Because you have placed the button in the same div as h1. You need to place it like this. And it will work fine. And why your elements don't go into a straight line is because of the "font-size" difference. Although the flex attribute aligns them in the center due to the different font sizes it seems as if they are not centered.

CodePudding user response：

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  color: white;
  font-family: sans-serif;
}

.col-1 {
  padding-top: 0.7em;
  padding-left: 10px;
  padding-right: 10px;
  background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
    url("/img/pexels-li-sun-2294361.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 100vh;
}

a {
  color: white;
}

h2 {
  margin-left: 1.5em;
  text-shadow: 1px 1px 5px black;
  font-size: 15px;
}

.navbar-brand {
  color: orangered;
}

nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

nav ul,h2 {
  display: flex;
  list-style: none;
  text-shadow: 3px 3px 20px black;
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
}
ul{
  padding-top: 10px;
}
h2 a {
  text-decoration: none;
  font-size: 1em;
}

ul li a {
  text-decoration: none;
  padding-right: 2em;
}

.hero-header {
  display: flex;
  justify-content: center;
  margin-top: 5em;
}

.hero-header h1 {
  letter-spacing: 3px;
  font-family: "Montserrat", sans-serif;
}

button {
width: 8rem;
font-size: 1em;
bottom: 13px;
position: relative;
right: 10px;
height: 40px;
}
@media only screen and (max-width:650px){
nav ul{
font-size: 10px;
}
h2{
position: relative;
bottom: 5px;
}
button{
width: 50px;
height: 30px;
bottom: 10px;
}
}

<!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">
    <link rel="stylesheet" href="github.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Open Sans:wght@300&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap" rel="stylesheet">
    <title>GymNyc</title>
</head>
<body>
            <div class="col-1">
                <nav>
                  <h2><a href="#index.html">Gym<span class="navbar-brand">Nyc</span></a></h2>
                    <ul>
                        <li><a href="#">About us</a></li>
                        <li><a href="#">Features</a></li>
                        <li><a href="#">Classes</a></li>
                        <li><a href="#">Coaches</a></li>
                        <li><a href="#">Contact us</a></li>
                        <button>sign up</button>
                    </ul>
                </nav>
                <div class="hero-header">
                    <h1>MAKE A CHANGE.</h1>
                </div>
            </div>
</body>
</html>

I have tried to align the button and the logo and the navbar text by using top and bottom and added a media query so that on-screen with viewports that have smaller widths it can adjust itself. If you want to change the position of logo or button you can change the values of top and bottom and it will align the elements where you want. On different screens the page will show differently and it is because of the font-size. You can adjust it.