Hi All,
I cannot position vertically the logo in my header (greenbox) It is ok to stay left horizontally but it is not centered vertically and i cannot find out why it happens.
<header>
<div class="logo">
<h1 class="logo-title">Life</h1>
</div>
<nav id="navbar">
<ul class="nav-container">
<li class="nav-link"><a href="#">Welcome</a></li>
<li class="nav-link"><a href="#">Projects</a></li>
<li class="nav-link"><a href="#">Contact</a></li>
</ul>
</nav>
</header>
/* makes sizing simpler */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* remove default spacing */
/* force styling of type through styling, rather than elements */
* {
margin: 0;
padding: 0;
font: inherit;
}
/* responsive images/videos */
img,
picture,
svg,
video {
display: block;
max-width: 100%;
}
/* HEADER */
header {
padding: 1em;
background: #212529;
position: sticky;
top: 0;
}
.logo {
width: min(90%, 1200px);
margin: 0 auto;
}
.logo-title {
color: white;
font-family: fantasy;
font-size: 3rem;
text-align: center;
}
#navbar {
width: min(90%, 1200px);
margin: 0 auto;
}
.nav-container {
text-align: center;
}
.nav-link {
list-style: none;
padding: 0.25em 0 0.5em 0;
}
.nav-link a {
text-decoration: none;
color: #adb5bd;
font-size: 1rem;
font-family: monospace;
}
.nav-link a:hover,
.nav-link a:focus {
color: white;
font-weight: bold;
}
@media (min-width: 750px) {
/* HEADER */
header {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.logo {
display: flex;
}
.logo-title {
border: 1px solid green;
}
.nav-container {
display: flex;
justify-content: space-evenly;
align-items: center;
}
.nav-link {
padding: 0;
}
}
I am sorry, I may not be understanding. It looks here that the box is centered vertically (top to bottom). Can you explain more on what look you are trying to get, or why it does not look centered to you.
Add the ‘padding’ property to the following selector:
.logo-title {
border: 1px solid green;
padding: 3px 0 0 0 ;
}
Play with it in order to get exactly what you want.
That is strange as I can see this in codepen and in chrome.
Thank you. Other solution is not possible, i.e. with flexbox?
I just copied the code you put in the original post and put it inside a codepen
...
YoungZeeZee:
/* makes sizing simpler */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* remove default spacing */
/* force styling of type through styling, rather than elements */
* {
margin: 0;
padding: 0;
font: inherit;
}
/* responsive images/videos */
img,
picture,
svg,
video {
display: block;
max-width: 100%;
}
/* HEADER */
header {
padding: 1em;
background: #212529;
position: sticky;
top: 0;
}
.logo {
width: min(90%, 1200px);
margin: 0 auto;
}
.logo-title {
color: white;
font-family: fantasy;
font-size: 3rem;
text-align: center;
}
#navbar {
width: min(90%, 1200px);
margin: 0 auto;
}
.nav-container {
text-align: center;
}
.nav-link {
list-style: none;
padding: 0.25em 0 0.5em 0;
}
.nav-link a {
text-decoration: none;
color: #adb5bd;
font-size: 1rem;
font-family: monospace;
}
.nav-link a:hover,
.nav-link a:focus {
color: white;
font-weight: bold;
}
@media (min-width: 750px) {
/* HEADER */
header {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.logo {
display: flex;
}
.logo-title {
border: 1px solid green;
}
.nav-container {
display: flex;
justify-content: space-evenly;
align-items: center;
}
.nav-link {
padding: 0;
}
}
still strange as I double checked it in codepen before asking here.
Please link to your Codepen.
It might have something to do with the font you are using.
You can try setting line-height: 1 on the .logo-title selector and see if that changes anything.
This is a border around the <h1 class="logo-title">Life</h1> element. There is nothing that you can do with flexbox here. You can change only ‘padding’ property to get more or less space between the content and its border.
do not have codepen account
here are my codes.
<!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/reset.css">
<link rel="stylesheet" href="css/portfolio.css">
<title>My Portfolio</title>
</head>
<body>
<header>
<div class="logo">
<h1 class="logo-title">Life</h1>
</div>
<nav id="navbar">
<ul class="nav-container">
<li class="nav-link"><a href="#">Welcome</a></li>
<li class="nav-link"><a href="#">Projects</a></li>
<li class="nav-link"><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<section id="welcome-section">
<div class="welcome-title">
<h1>Hey, I am Zoltan</h1>
<p>a web developer</p>
</div>
</section>
<section id="projects">
<div class="projects-container">
<h3 class="projects-header">These are my projects on Freecodecamp</h3>
<div class="flex-wrap">
<div class="project-tile">
<img src="img/survey.png" alt="survey form">
<p class="project-title"><a id="profile-link"
href="https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-survey-form-project/build-a-survey-form"
target="_blank">Survey form</a></p>
</div>
<div class="project-tile">
<img src="img/tribute page.png" alt="survey form">
<p class="project-title"><a id="tribute link"
href="https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-tribute-page-project/build-a-tribute-page"
target="_blank">Tribute page</a></p>
</div>
<div class="project-tile">
<img src="img/technical.png" alt="survey form">
<p class="project-title"><a id="technical"
href="https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-technical-documentation-page-project/build-a-technical-documentation-page"
target="_blank">Technical Doc Page</a></p>
</div>
<div class="project-tile">
<img src="img/product.png" alt="survey form">
<p class="project-title"><a id="landing page"
href="https://www.freecodecamp.org/learn/2022/responsive-web-design/build-a-product-landing-page-project/build-a-product-landing-page"
target="_blank">Product landing page</a></p>
</div>
</div>
</div>
</section>
<section class="contact">
<div class="contact-wrapper">
<h3 class="contact-title">Let's work together</h3>
<div class="flex-contact">
<div class="contact-item">
<h3>Call me on</h3>
<p>0011223344</p>
</div>
<div class="contact-item">
<h3>Send me an e-mail</h3>
<p>web@webdev.com</p>
</div>
<div class="contact-item">
<h3>Facebook</h3>
<p>Zoltanwebdev</p>
</div>
</div>
</div>
</section>
<footer>
<div class="footer-wrapper flex-footer">
<p>**This is just a fake portfolio. All the projects and contact details given are not real.</p>
<p>2023</p>
</div>
</footer>
</body>
</html>
/* makes sizing simpler */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* remove default spacing */
/* force styling of type through styling, rather than elements */
* {
margin: 0;
padding: 0;
font: inherit;
}
/* responsive images/videos */
img,
picture,
svg,
video {
display: block;
max-width: 100%;
}
/* MOBIL first */
/* HEADER */
header {
padding: 1em;
background: #212529;
position: sticky;
top: 0;
}
.logo {
width: min(90%, 1200px);
margin: 0 auto;
}
.logo-title {
color: white;
font-family: fantasy;
font-size: 3rem;
text-align: center;
}
#navbar {
width: min(90%, 1200px);
margin: 0 auto;
}
.nav-container {
text-align: center;
}
.nav-link {
list-style: none;
padding: 0.25em 0 0.5em 0;
}
.nav-link a {
text-decoration: none;
color: #adb5bd;
font-size: 1rem;
font-family: monospace;
}
.nav-link a:hover,
.nav-link a:focus {
color: white;
font-weight: bold;
}
/* WELCOME- Section */
#welcome-section {
background: #dee2e6;
padding: 1em;
height: 100vh;
}
.welcome-title {
width: min(85%, 1200px);
margin: 0 auto;
text-align: center;
padding-top: 15em;
}
.welcome-title h1 {
color: #212529;
font-size: 3rem;
font-weight: bold;
}
.welcome-title p {
color: #212529;
font-size: 2rem;
font-style: italic;
}
/* PROJECT section */
#projects {
background: #212529;
padding: 1.5em;
}
.projects-container {
width: min(85%, 1200px);
margin: 0 auto;
}
.projects-header {
color: white;
text-align: center;
font-size: 1.5rem;
text-decoration: underline;
}
.project-tile {
background: #495057;
text-align: center;
margin-top: 1em;
padding: 0.5em;
}
.project-tile img {
display: block;
margin-left: auto;
margin-right: auto;
width: 25rem;
height: 20rem;
}
.project-tile a {
text-decoration: none;
color: white;
font-weight: bolder;
font-size: 1.5rem;
cursor: pointer;
}
.project-tile p {
padding-top: 0.5em;
}
/* CONTACT section */
.contact {
background: #dee2e6;
padding: 1em;
border-bottom: 0.2em solid red;
}
.contact-wrapper {
width: min(85%, 1200px);
margin: 0 auto;
text-align: center;
}
.contact-title {
font-weight: bold;
font-size: 1.5rem;
}
.contact-item {
padding-top: 0.5em;
}
.contact-item h3 {
font-weight: bold;
font-size: 1rem
}
/* FOOTER */
footer {
background: #212529;
padding: 1em;
}
.footer-wrapper {
width: min(85%, 1200px);
margin: 0 auto;
text-align: center;
color: white;
}
.footer-wrapper P {
padding-top: 0.5em;
}
@media (min-width: 750px) {
/* HEADER */
header {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.logo {
display: flex;
}
.logo-title {
/* border: 1px solid green; */
}
.nav-container {
display: flex;
justify-content: space-evenly;
align-items: center;
}
.nav-link {
padding: 0;
}
/* PROJECTS */
.flex-wrap {
display: flex;
gap: 1em;
justify-content: space-around;
flex-wrap: wrap;
}
/* CONTACT */
.flex-contact {
display: flex;
justify-content: space-around;
}
.flex-footer {
display: flex;
justify-content: space-between;
}
}
Then create one, it’s free.
I mainly want to know what the font is and where you are getting it from. It doesn’t look like the fantasy font is working for you so it is using something else. You can try using Impact instead.
Did you try using line-height on it? You can try using 0 for it as well.
1 Like
YoungZeeZee:
font-family: fantasy
Where did you find that font?
Check the Web safe fonts:CSS Web Safe Fonts .
1 Like
It looks like a fallback font for fantasy decorative fonts.
https://www.w3.org/Style/Examples/007/fonts.en.html
Pretty sure the font in the image is Papyrus
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
But I don’t see the same misalignment when I use that font with the code that was posted. Although line-height: 1 would align it slightly better.
Unless we can get a live example that reproduces what the image shows we can’t help.
1 Like
Hi ,
Thank you for your help.
Thank you for your kind help
Just to be clear, your editor has nothing to do with what font the browser decides to use when it can’t find the named font.
That is why we have fallback fonts and why you should always use a fallback. The exact font used is determined by the OS available fonts and the browser. In this case, you are using a fallback as the main font family so the browser just picks whichever fantasy font it finds in the font stack.
On a different system, it will be a different font. For me, it was the Impact font I’m pretty sure and for you it was the Papyrus font. Most likely you are on a Mac and I’m on Windows so we see two different fonts.
system
October 29, 2023, 4:55am
17
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.
will share the entire code.