I'm building a React app and I want to build a navigation bar. However, I can't align the elements in the nav bar in the middle.
You can see it in the image below:
I've tried to add: margin-bottom: 30px but nothing worked:
Here is my react code:
return (
<>
<div className='home-bar'>
<div className="home-bar-links">
<p>Mathly</p>
</div>
</div>
</>
);
and here is my css:
.home {
position: relative;
width: 100%;
min-height: 100px;
}
.home-bar {
margin-top: 0;
padding: 1rem;
height: 7vh;
position: sticky;
display: flex;
flex-direction: row-reverse;
background-color: #D9B99B;
border-bottom-left-radius: 30%;
overflow: hidden;
}
.home-bar-links {
display: inline-block;
font-weight: 600;
font-family: Georgia, 'Times New Roman', Times, serif;
font-size: 1.5rem;
margin-bottom: 150px;
}
For vertical alignment, just add align-items: center; to your home-bar CSS. Then remove margin-bottom: 150px; from your home-bar-links CSS, like so:
.home {
position: relative;
width: 100%;
min-height: 100px;
}
.home-bar {
margin-top: 0;
padding: 1rem;
height: 7vh;
position: sticky;
display: flex;
flex-direction: row-reverse;
align-items: center;
background-color: #D9B99B;
border-bottom-left-radius: 30%;
overflow: hidden;
}
.home-bar-links {
display: inline-block;
font-weight: 600;
font-family: Georgia, 'Times New Roman', Times, serif;
font-size: 1.5rem;
/* margin-bottom: 150px; */
}
<div class='home-bar'>
<div class="home-bar-links">
<p>Mathly</p>
</div>
</div>
Note that align-items controls the alignment of items on the cross axis (which, in this case, is the vertical axis, as your flex-direction is set to row, which makes the horizontal axis the main axis).
Related
Hope someone can shed light on this question of mine.
I have a flex container, which has 2 flex containers with flex-direction: column.
However, it all displays in 1 column.
Initially, it displayed in 2 columns but did not start at the same height, and now it is in one column only.
Advise here will be appreciated.
<!-- ***** finding container ***** -->
section.finding-container {
top: 180px;
display: flex;
flex-direction: row;
position: absolute;
justify-content: space-between;
align-items: center;
/* height: 100% */
/* margin-right: 215px; */
}
.find-agent {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 350px;
margin-bottom: auto;
margin-left: 50px;
}
.find-agent img,
h1,
p,
button {
display: block;
margin-left: auto;
margin-right: auto;
}
.find-agent h1 {
font-weight: 550;
color: #1E95EE;
text-align: center;
margin-top: 12px;
margin-bottom: 0;
}
.find-agent p {
color: #3A3C3E;
font-weight: 350;
width: 445px;
height: 71px;
text-align: center;
opacity: 1;
}
.try {
border: 2px solid #1E95EE;
border-radius: 5px;
opacity: 1;
color: #1E95EE;
font-size: 18px;
font-weight: Regular;
height: 50px;
width: 143px;
text-align: center;
vertical-align: middle;
text-decoration: none;
justify-content: center;
}
.agent-profiles {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 0;
margin-bottom: auto;
}
.agent-profiles h2,
img {
display: block;
margin-left: auto;
margin-right: auto;
}
.agent-profiles h2 {
font-weight: 350;
color: #1E95EE;
text-align: center;
width: 182px;
height: 44px;
letter-spacing: 0;
opacity: 1;
}
```
<!-- ***** finding container ***** -->
<section class="finding-container">
<div class="find-agent">
<img src="./images/search.svg" alt="search">
<h1>Find the perfect agent</h1>
<p>
No more browsing through thousands of applications. Each week, we'll send you a fresh batch of hand-picked, personally-vetted candidates.
</p>
<button type="button" class="try">Try today</button>
</div>
<div class="agent-profiles">
<h2>
Selections from the Overpass Marketplace
</h2>
<img src="./images/profiles.svg" alt="profiles">
</div>
</section>
I have a flex container, which has 2 flex containers with flex-direction: column.
You've got an invalid comment in your CSS, which is breaking your first line of code:
<!-- ***** finding container ***** -->
section.finding-container {
top: 180px;
display: flex;
flex-direction: row;
position: absolute;
justify-content:space-between;
align-items: center;
/* height: 100% */
/* margin-right: 215px; */
}
That's HTML commenting syntax. In CSS, it's invalid, so the following section.finding-container selector is seen as an error and ignored. The container then falls back to its default layout model, display: block, which stacks child elements vertically. (You can see the proper CSS commenting syntax at the bottom of your rule.)
More details about CSS commenting syntax and error handling:
Why are some of my CSS rules not working?
Initially, it displayed in 2 columns but did not start at the same height ...
You've got all sorts of margins and alignment properties (such as justify-content) set on the items and container, so they're rendering at different heights.
section.finding-container {
/* top: 180px; */
display: flex;
flex-direction: row;
position: absolute;
justify-content: space-between;
/* align-items: center; */
border: 2px dashed red; /* for illustration purposes */
padding: 10px; /* for illustration purposes */
}
.find-agent {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
/* margin-top: 350px; */
/* margin-bottom: auto; */
/* margin-left: 50px; */
border: 1px solid green; /* for illustration purposes */
}
.find-agent img,
h1,
p,
button {
display: block;
margin-left: auto;
margin-right: auto;
}
.find-agent h1 {
font-weight: 550;
color: #1E95EE;
text-align: center;
margin-top: 12px;
margin-bottom: 0;
}
.find-agent p {
color: #3A3C3E;
font-weight: 350;
width: 445px;
height: 71px;
text-align: center;
opacity: 1;
}
.try {
border: 2px solid #1E95EE;
border-radius: 5px;
opacity: 1;
color: #1E95EE;
font-size: 18px;
font-weight: Regular;
height: 50px;
width: 143px;
text-align: center;
vertical-align: middle;
text-decoration: none;
justify-content: center;
}
.agent-profiles {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 0;
/* margin-bottom: auto; */
border: 1px solid black; /* for illustration purposes */
}
.agent-profiles h2,
img {
display: block;
margin-left: auto;
margin-right: auto;
}
.agent-profiles h2 {
font-weight: 350;
color: #1E95EE;
text-align: center;
width: 182px;
height: 44px;
letter-spacing: 0;
opacity: 1;
}
<section class="finding-container">
<div class="find-agent">
<img src="./images/search.svg" alt="search">
<h1>Find the perfect agent</h1>
<p>
No more browsing through thousands of applications.
Each week, we'll send you a fresh batch of hand-picked,
personally-vetted candidates.
</p>
<button type="button" class="try">Try today</button>
</div>
<div class="agent-profiles">
<h2>
Selections from the
Overpass Marketplace
</h2>
<img src="./images/profiles.svg" alt="profiles">
</div>
</section>
For my #l-splash image, I'm having issues with the height: 100vh expanding past the viewpoint.
I have tried changing the overflow and different max-heights. I want my width to take up 100% of the left grid so it exactly takes up half of the screen. I suspect the problem is how my nav bar is stickied but I ideally need it to continue sticking to the top of the screen. Thanks for the help
https://jsfiddle.net/mtgcosxd/1/
header {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
background: #fffaf0;
position: sticky;
width: 100%;
top: 0;
font-family: 'Montserrat', sans-serif;
/*font-family: 'Gotham-Light', gotham;*/
font-weight: 300;
font-size: 1vw;
}
body {
max-width: 100%;
overflow-x: hidden;
padding: 0px;
margin: 0px;
color: #fffaf0;
font-family: 'Work Sans', sans-serif;
font-weight: 300;
}
.nav {
position: -webkit-sticky;
position: sticky;
top: 0%;
color: #80985d;
}
.navLink {
padding: 0 10px;
font-weight: 300;
text-transform: uppercase;
cursor: pointer;
text-align: center;
}
#logo {
margin-top: 4px;
margin-bottom: 4px;
width: 4%;
height: 4%;
cursor: pointer;
}
.container {
display: grid;
grid-template-columns: [content] 1fr [images] 1fr
}
.content {
grid-column: content;
background: #2f6e84;
}
#l-splash {
width: 100%;
height: 100vh;
overflow: auto;
}
<div class="nav">
<header>
<div class="navLink" id="story-scroll">Our Story</div>
<div class="navLink" id="menu-scroll">Menu</div>
<img src="https://placekitten.com/200/300" id="logo" lt="logo">
<div class="navLink" id="press-scroll">Press</div>
<div class="navLink" id="contact-scroll">Contact</div>
</header>
</div>
<div class="container">
<div class="content">
<div id="splash container">
<img id="l-splash" src="https://images.unsplash.com/photo-1526069631228-723c945bea6b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80">
</div>
You don't need to set height: 100vh on the image - as you are already having flexboxes and grids in your layout, you can inherit the heights using a column flexbox wrapper on body- here are the changes:
made you body a column flexbox and gave 100vh height,
allow the container to fill the remaining space left by the nav using flex: 1 on the container,
add height: 100% to the container of the img,
fill the image in its container using height: 100% and using object-fit,
body {
max-width: 100%;
overflow-x: hidden;
padding: 0px;
margin: 0px;
color: #fffaf0;
font-family: 'Work Sans', sans-serif;
font-weight: 300;
/* made a flexbox */
display: flex;
flex-direction: column;
height: 100vh; /* full-height */
}
header {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
background: #fffaf0;
position: sticky;
width: 100%;
top: 0;
font-family: 'Montserrat', sans-serif;
/*font-family: 'Gotham-Light', gotham;*/
font-weight: 300;
font-size: 1vw;
}
.nav {
position: -webkit-sticky;
position: sticky;
top: 0%;
color: #80985d;
}
.navLink {
padding: 0 10px;
font-weight: 300;
text-transform: uppercase;
cursor: pointer;
text-align: center;
}
#logo {
margin-top: 4px;
margin-bottom: 4px;
width: 4%;
height: 4%;
cursor: pointer;
}
.container {
display: grid;
grid-template-columns: [content] 1fr [images] 1fr;
flex: 1; /* added */
}
.content {
grid-column: content;
background: #2f6e84;
}
.content > div {
height: 100%; /* added */
}
#l-splash {
width: 100%;
/*height: 100vh;*/
height: 100%;
object-fit: cover; /* added */
overflow: auto;
display: block; /* remove inline element whitespace */
}
<div class="nav">
<header>
<div class="navLink" id="story-scroll">Our Story</div>
<div class="navLink" id="menu-scroll">Menu</div>
<img src="https://placekitten.com/200/300" id="logo" lt="logo">
<div class="navLink" id="press-scroll">Press</div>
<div class="navLink" id="contact-scroll">Contact</div>
</header>
</div>
<div class="container">
<div class="content">
<div id="splash container">
<img id="l-splash" src="https://images.unsplash.com/photo-1526069631228-723c945bea6b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80">
</div>
But you still have overflow - what now?
Add min-height: 0 to container so that you override the default min-height: auto for flex items in column direction,
You can see some examples of why you need to do this below:
Flexbox affects overflow-wrap behavior
Flexbox resize and scrollable overflow
Why don't flex items shrink past content size?
Similarly min-height: auto for a grid item can be overridden using min-height: 0 on the content element
You can see some examples of why you need to do this below:
css-grid creates an imaginary column
How to make images stay within the rows of a css grid container?
See demo below:
body {
max-width: 100%;
overflow-x: hidden;
padding: 0px;
margin: 0px;
color: #fffaf0;
font-family: 'Work Sans', sans-serif;
font-weight: 300;
/* made a flexbox */
display: flex;
flex-direction: column;
height: 100vh; /* full-height */
}
header {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
background: #fffaf0;
position: sticky;
width: 100%;
top: 0;
font-family: 'Montserrat', sans-serif;
/*font-family: 'Gotham-Light', gotham;*/
font-weight: 300;
font-size: 1vw;
}
.nav {
position: -webkit-sticky;
position: sticky;
top: 0%;
color: #80985d;
}
.navLink {
padding: 0 10px;
font-weight: 300;
text-transform: uppercase;
cursor: pointer;
text-align: center;
}
#logo {
margin-top: 4px;
margin-bottom: 4px;
width: 4%;
height: 4%;
cursor: pointer;
}
.container {
display: grid;
grid-template-columns: [content] 1fr [images] 1fr;
flex: 1; /* added */
min-height: 0; /* added */
}
.content {
grid-column: content;
background: #2f6e84;
min-height: 0; /* added */
}
.content > div {
height: 100%; /* added */
}
#l-splash {
width: 100%;
/*height: 100vh;*/
height: 100%;
object-fit: cover; /* added */
overflow: auto;
display: block; /* remove inline element whitespace */
}
<div class="nav">
<header>
<div class="navLink" id="story-scroll">Our Story</div>
<div class="navLink" id="menu-scroll">Menu</div>
<img src="https://placekitten.com/200/300" id="logo" lt="logo">
<div class="navLink" id="press-scroll">Press</div>
<div class="navLink" id="contact-scroll">Contact</div>
</header>
</div>
<div class="container">
<div class="content">
<div id="splash container">
<img id="l-splash" src="https://images.unsplash.com/photo-1526069631228-723c945bea6b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80">
</div>
You can subtract the height of the nav/header from the height of the #l-splash div. E.g.
header {
...
height: 50px;
max-height: 50px;
}
#l-splash {
...
height: calc(100vh - 50px);
}
If your nav or other divs have margins, you may need to include those in your height calculation. E.g.
header {
...
height: 50px;
margin-bottom: 5px;
}
#l-splash {
...
height: calc(100vh - 55px);
}
I was wondering how I can position the text centered horizontally. Centered horizontally with the image. I do not want to use the position: absolute attribute. This is because the length of the right and left text can change and to have an absolute attribute, you need a fixed width/size.
body {
padding: 0;
margin: 0;
}
.right-text {
position: relative;
display: inline-block;
font-family: arial;
font-size: 13px;
}
.icon {
position: relative;
display: inline-block;
width: 32px;
height: 32px;
background: url("https://i.imgur.com/VXlnn8a.png");
}
.left-text {
position: relative;
display: inline-block;
font-family: arial;
font-size: 13px;
font-weight: 700;
}
<div class="right-text">Right</div><div class="icon"></div><div class="left-text">Left</div>
You can use flexbox to align items horizontally center by adding below code to the parent div
.parent{
display:flex;
align-items: center;
}
This is the running Snippet of your code having this changes
body{
padding: 0;
margin: 0;
font-family: arial;
}
.content{
display: flex;
align-items: center;
}
.right-text {
font-size: 13px;
}
.icon {
width: 32px;
height: 32px;
background: url("https://i.imgur.com/VXlnn8a.png");
}
.left-text {
font-size: 13px;
font-weight: 700;
}
<div class="content">
<div class="right-text">Right</div>
<div class="icon"></div>
<div class="left-text">Left</div>
</div>
You can just simply add a flexbox container and set its property align-items to center.
<div class="container">
<div class="right-text">Right</div>
<div class="icon"></div>
<div class="left-text">Left</div>
</div>
And this is the class container:
.container{
display: flex;
align-items: center;
justify-content: center;
}
Hi If you want vertical align here is the updated snippet
body {
padding: 0;
margin: 0;
}
.right-text {
position: relative;
display: inline-block;
font-family: arial;
font-size: 13px;
}
.icon {
position: relative;
display: inline-block;
width: 32px;
height: 32px;
background: url("https://i.imgur.com/VXlnn8a.png");
top: 10px;
margin: 0 5px;
}
.left-text {
position: relative;
display: inline-block;
font-family: arial;
font-size: 13px;
font-weight: 700;
}
<div class="right-text">Right</div><div class="icon"></div><div class="left-text">Left</div>
You actually need to wrap your right-text, icon and left-text element in childContainer and then wrap your childContainer element in parentContainer wrap.
<div class="parentContainer">
<div class="childContainer">
<div class="right-text">Right</div><div class="icon"></div><div class="left-text">Left</div>
</div>
</div>
Next, you have to apply FlexBox with center justify-content and align-items value and you also need to add height: 100vh. Mentioned changes are applied on a below code snippet. Try this I hope it'll help you out. Thanks
body {
padding: 0;
margin: 0;
}
.right-text {
position: relative;
display: inline-block;
font-family: arial;
font-size: 13px;
}
.icon {
position: relative;
display: inline-block;
width: 32px;
height: 32px;
background: url("https://i.imgur.com/VXlnn8a.png");
}
.left-text {
position: relative;
display: inline-block;
font-family: arial;
font-size: 13px;
font-weight: 700;
}
.parentContainer {
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
}
<div class="parentContainer">
<div class="childContainer">
<div class="right-text">Right</div><div class="icon"></div><div class="left-text">Left</div>
</div>
</div>
The issue im having is I'm struggling to keep my riot games text fluid, when i resize my browser it seems like it's stuck where it's at. either the left side or the right, usually the right side has more space from the end of the S to the side of the window.
// The showcase is just the container
// containing the background image.
.showcase {
position: relative;
width: 100%;
height: 35.76em;
text-align: center;
background: url(https://www.riotgames.com/darkroom/original/d6120739b8bf25995d5c43e69b9ce85d:bf411966145dd8b6b0f224e372aa27e5/annie.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
// Info Text is The Main Text
// I'm trying to keep centered and fluid **
.info-text {
color:white;
position: absolute;
text-transform: uppercase;
letter-spacing: 1px;
font-family: "Montserrat", sans-serif;
font-size: 6.5em;
font-weight: bold;
margin: 0;
top: 15%;
left: 25%;
}
// I just ended up adding in the flex-box properties hoping to fix it,
// but im not too sure if it made things worse or actually helped out.
#media only screen and (max-width: 768px) {
.grid {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-content: center;
}
.info-text {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
height: 25vh;
margin: 0;
text-transform: uppercase;
letter-spacing: 1px;
font-family: "Montserrat", sans-serif;
font-size: 3.5em;
font-weight: bold;
top: 38%;
left: 10%;
margin: 0;
}
<section class="showcase">
<div class="welcome-headline">
<h6>Welcome</h6>
</div>
<div class="info-text">
<p>
Riot Games
</p>
</div>
</section>
You can use flexbox for that with this properties on the container (background image in your case):
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
Example:
.showcase {
position: relative;
width: 100%;
height: 35.76em;
text-align: center;
background: url(https://www.riotgames.com/darkroom/original/d6120739b8bf25995d5c43e69b9ce85d:bf411966145dd8b6b0f224e372aa27e5/annie.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
}
.info-text {
color: white;
position: absolute;
text-transform: uppercase;
letter-spacing: 1px;
font-family: "Montserrat", sans-serif;
font-size: 6.5em;
font-weight: bold;
}
#media only screen and (max-width: 768px) {
.info-text {
font-size: 3.5em;
}
}
<section class="showcase">
<div class="welcome-headline">
<h6>Welcome</h6>
</div>
<div class="info-text">
<p>
Riot Games
</p>
</div>
</section>
I have a div inside a div which has content in it (content created dynamically) I have gotten the child div to center vertically but can't vertically center the content inside. I am using Bootstrap.
.main {
position: relative;
min-height: 600px;
width: 100%;
margin: 0; padding: 0;
}
#content {
position: absolute;
display: inline-block;
text-align: center;
margin: auto;
max-width: 60%;
top: 50%;
right: 0;
left: 0;
bottom: 0;
transform: translateY(-50%)
}
#content p {
position: relative;
font-weight: 500;
font-size: 3.5em;
line-height: 1.25em;
color: #fff;
}
<div class="row">
<div class="main">
<div id="content">
<p> text content </p> ( this is inputted by Wordpress/post )
</div>
</div>
</div>
You can use a flexbox:
.main {
min-height: 300px;
background-color: rgba(0, 0, 0, 0.3);
display: flex;
justify-content: center;
align-items: center;
}
#content {
background-color: rgba(0, 0, 0, 0.4);
height: 100px;
display: flex;
justify-content: center;
align-items: center;
}
#content p {
color: white;
}
<div class="row">
<div class="main" style="">
<div id="content">
<p> text content </p>
</div>
</div>
</div>
The better solution will always be to use flexbox which comes out of the box in CSS3.
Just use the following class:
#content p {
height: 100%;
padding: 0;
margin: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
position: relative;
font-weight: 500;
font-size: 3.5em;
line-height: 1.25em;
color: #000;
}
Alternatively,
You can put the min-height of the class "main" to a 150% instead of 600px.
.main {
position: relative;
min-height: 150%;
width: 100%;
margin: 0; padding: 0;
}
That would be the easiest solution.
Try adding a style something like this, bootstrap don't have that kind of functionality, its up to the user do the job.
.center {
margin: auto;
height: 65%;
}
Hope this help