So I have been tasked to design a website as my project. I have created my project but when I resize my browser all the text and photos starts overlapping. I have tried everything but it still happens.
#import url('https://fonts.googleapis.com/css2?family=Lato:wght#300&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Lato', sans-serif;
width: 100vw;
height: 100vh;
letter-spacing: 1.8px;
overflow: hidden;
}
.container {
display: flex;
flex-direction: row;
width: 100%;
height: 85%;
}
.controller {
background: #357EC7;
width: 100%;
height: 15%;
}
.container .main-nav {
width: 5%;
height: 100%;
background: lightgrey;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.container .main-nav a {
margin: 30px;
}
.container .main-nav i {
font-size: 1.2vw;
color: black;
}
.container .main-nav i:hover {
color: #357EC7;
transform: scale(1.1);
}
.container .content {
width: 95%;
height: 100%;
display: flex;
flex-direction: column;
}
.container .content #album {
width: 100%;
height: 45%;
background: rgb(95, 95, 95);
color: whitesmoke;
display: flex;
}
.container .content #album #album-image {
width: 25%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 5px;
}
.container .content #album #album-image img {
width: 65%;
height: 80%;
border: 2px solid black;
border-radius: 5px;
}
.container .content #album #album-text-icon {
width: 75%;
height: 100%;
display: flex;
flex-direction: column;
}
.container .content #album #album-text-icon #al-head {
height: 30%;
padding-top: 35px;
font-size: 1.3vw;
}
.container .content #album #album-text-icon #al-text {
height: 45%;
line-height: 1.5rem;
}
.container .content #album #album-text-icon #al-icon {
padding-top: 10px;
display: flex;
gap: 1.5rem;
}
.container .content #album #album-text-icon #al-icon a {
color: white;
text-decoration: none;
}
.container .content #album #album-text-icon #al-icon a:hover {
color: hsl(210, 80%, 70%);
transform: scale(1.1);
}
.container .content #music {
width: 100%;
height: 55%;
background: whitesmoke;
display: flex;
flex-direction: column;
}
.container .content #music .song-info {
flex: 1;
display: flex;
padding: 15px;
align-items: center;
justify-content: space-evenly;
}
.container .content #music .song-info:nth-of-type(even) {
background: lightgrey;
}
.container .content #music .song-info p:nth-of-type(1) {
flex: 1;
}
.container .content #music .song-info p {
flex: 6;
text-align: justify;
}
.container .content #music .song-info div {
display: flex;
flex: 6;
justify-content: center;
align-items: center;
}
.container .content #music .song-info div a {
border: 2px black solid;
padding: 8px;
border-radius: 3px;
color: black;
text-decoration: none;
}
.container .content #music .song-info div a:hover {
background: #357EC7;
color: whitesmoke;
}
.controller {
display: flex;
}
.controller #control-image {
width: 10%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.controller #control-image img {
width: 60%;
height: 80%;
border: 2px solid black;
border-radius: 5px;
}
.controller #control-text {
width: 30%;
height: 100%;
display: flex;
padding: 20px 0 20px 0;
flex-direction: column;
justify-content: space-around;
color: whitesmoke;
font-weight: bold;
}
.controller #control-icon {
width: 60%;
height: 100%;
display: flex;
justify-content: flex-end;
align-items: center;
padding-right: 4rem;
gap: 4rem;
font-size: 1.5vw;
}
.controller #control-icon i {
color: whitesmoke;
}
.controller #control-icon i:hover {
transform: scale(1.1);
}
<!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="icon" type="image/x-icon" href="https://i.postimg.cc/W1DVg7pV/favicon.png">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<title>Music</title>
</head>
<body>
<div class="container">
<nav class="main-nav">
<i class="fa-solid fa-bars"></i>
<i class="fa-solid fa-house"></i>
<i class="fa-solid fa-magnifying-glass"></i>
<i class="fas fa-volume-up"></i>
<i class="fa-solid fa-user"></i>
<i class="fa-brands fa-soundcloud"></i>
<i class="fa-brands fa-spotify"></i>
<i class="fa-solid fa-gear"></i>
</nav>
<main class="content">
<section id="album">
<div id="album-image">
<img src="https://i.postimg.cc/bwKhT2dt/music-cover.jpg">
</div>
<div id="album-text-icon">
<div id="al-head">
<h1>Empires On Fire</h1>
</div>
<div id="al-text">
<p>BANNERS</p>
<p>2017 . Album . 5songs</p>
</div>
<div id="al-icon">
<i class="fa-solid fa-play"></i> Play all
<i class="fa-solid fa-plus"></i> Add to
<i class="fa-solid fa-ellipsis"></i> More
</div>
</div>
</section>
<section id="music">
<div class="song-info">
<p>1.</p>
<p>Someone To You</p>
<p>BANNERS</p>
<p>3:39</p>
<div>
Cloud Sync
</div>
</div>
<div class="song-info">
<p>2.</p>
<p>Empires On Fire</p>
<p>BANNERS</p>
<p>3:39</p>
<div>
Cloud Sync
</div>
</div>
<div class="song-info">
<p>3.</p>
<p>Firefly</p>
<p>BANNERS</p>
<p>3:29</p>
<div>
Cloud Sync
</div>
</div>
<div class="song-info">
<p>4.</p>
<p>Into The Storm</p>
<p>BANNERS</p>
<p>3:40</p>
<div>
Cloud Sync
</div>
</div>
<div class="song-info">
<p>5.</p>
<p>Holy Ground</p>
<p>BANNERS</p>
<p>4:18</p>
<div>
Cloud Sync
</div>
</div>
</section>
</main>
</div>
<div class="controller">
<div id="control-image">
<img src="https://i.postimg.cc/bwKhT2dt/music-cover.jpg">
</div>
<div id="control-text">
<p>Someone To You</p>
<p>BANNERS</p>
</div>
<div id="control-icon">
<i class="fa-solid fa-backward-step"></i>
<i class="fa-solid fa-pause"></i>
<i class="fa-solid fa-forward-step"></i>
<i class="fa-solid fa-rotate-right"></i>
<i class="fa-solid fa-shuffle"></i>
</div>
</div>
</body>
</html>
```
I have tried changing the padding and height but my page is still not responsive. If any one can please help me making this page responsive this will be very helpful.
You have two solutions for your current scenario. The first one would be to employ bootstrap. This can be done by adding to your head tag the following links:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous"> <!-- Bootstrap Links -->
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.min.js" integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD" crossorigin="anonymous"></script>
Following this, you can use throughout your divs and HTML tags classes the grid classes included in the bootstrap documents. Here is a link where the grid system is described:
https://getbootstrap.com/docs/4.1/layout/grid/
Your screen is virtually divided into 12 units, and depending on the screen sizes being lg, md, or sm you can assign certain tags to occupy a certain amount of units based on your preferences. For instance, if you assign a div the class col-lg-4, it will occupy 4 units (4/12 = 1/3 of the screen) on large screens, and for medium and small screens you can change this by assigning col-md-6 or col-sm-12. These are just examples, you will decide how your project looks on the different screen sizes and devices. Virtually, using these bootstrap classes will provide your project with the desired responsiveness.
The other solution is to employ flexbox and CSS media queries and manually code all the necessary lines of CSS to make your project responsive. Here is a link that goes over the CSS media queries:
https://www.w3schools.com/css/css3_mediaqueries.asp
I will also include a basic template for the media queries that you can use, although if you want your website to be fully responsive you will require more queries
/* Mobile Styles */
#media only screen and (max-width: 400px) {}
/* Tablet Styles */
#media only screen and (min-width: 401px) and (max-width: 960px) {}
/* Desktop Styles */
#media only screen and (min-width: 961px) {}
Once you implement these, you will have to play around with the code until it looks how you desire it to look. Here is a link going over flexbox as well:
https://www.internetingishard.com/html-and-css/flexbox/
Hope this helps!
Related
I have been trying all day to get my website to be responsive. Here is the link to it.
https://mywebsite.techgurll.repl.co
It does not look good on small screens. The image of myself I have on there keeps overflowing the container when the screens size gets smaller. Here is part of my CSS code
.img {
display: flex;
flex-direction: row;
height: 50vh;
margin-top: 20vh
}
If you would like to see the other code you can press inspect after you click my website link. I do not want to post it all here because it is a lot of code.
actually there were many problems in your css as well as in HTML so I wrote an improved version of your css and html and also made it responsive by using flexbox, media queries and units like vw and vh.
copy paste the following code.
index.html:
<!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="style.css" />
<title>Landing Page</title>
</head>
<body>
<div>
<ul>
<li><h3>megan's website</h3></li>
<li> About</li>
<li> Contact</li>
<li> Info</li>
</ul>
</div>
<div id="header">
<div class="header-content">
<h1>Hi Everyone!<br />My name is Megan. Nice to meet you!</h1>
<p>
<strong
>I am an aspiring Software Developer. I am also a student and I
study Computer Science.<br />
I will be graduating in December of 2022 with my Bachelor's
degree.<br />I hope this website impresses the right employer.<br />
I am creating this website in the hopes to be noticed and land my
dream job.<br />
I am very driven and motivated to learn.This is my passion.<br />
I do not want this job because of money.<br />
I want this job because I want to work in something I enjoy doing
everyday.<br />
That to me is happiness.<br />
I feel it is important to practice every day in order to be the best
you can be.</strong
>
</p>
<button class="button">Sign Up</button>
</div>
<div class="div-img">
<img src="x4yT5As.jpg" class="img" alt="Picture of Megan" />
</div>
</div>
<div id="title"><h2>Projects I have worked on</h2></div>
<hr />
<div class="second-container">
<div class="info">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/Python-logo-notext.svg/1200px-Python-logo-notext.svg.png"
alt="Python Logo"
height="100"
/>
<div class="text">
Compounding Interest using Loops<br /><a
href="https://github.com/megankeyes/Compounding-Interest-with-Loops"
style="text-decoration: none"
>Python Project</a
>
</div>
</div>
<div class="info">
<img
src="https://www.simplilearn.com/ice9/webinar_thum_image/CPP_Tutorial.jpg"
alt="C++ Image"
height="100"
/>
<div class="text">
Shopping List Program<br /><a
href="https://github.com/megankeyes/Shopping-List"
style="text-decoration: none"
>C++ Project</a
>
</div>
</div>
<div class="info">
<img
src="https://miro.medium.com/max/840/1*RJMxLdTHqVBSijKmOO5MAg.jpeg"
alt="Python Image"
height="100"
/>
<div class="text">
BMI Calculator<br /><a
href="https://github.com/megankeyes/BMI-Calculator"
style="text-decoration: none"
>Python Project</a
>
</div>
</div>
<div class="info">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/ISO_C%2B%2B_Logo.svg/1200px-ISO_C%2B%2B_Logo.svg.png"
alt="C++ Logo"
height="100"
/>
<div class="text">
Dice Game<br /><a
href="https://github.com/megankeyes/Dice-Game"
style="text-decoration: none"
>C++ Project</a
>
</div>
</div>
</div>
<hr />
<div class="third-container">
<div class="quote">
<p>
<i>Your Future is Created by what you do Today<br />NOT Tomorrow</i>
</p>
<br />
<strong>-Robert Kyosaki</strong>
</div>
</div>
<div class="fourth-container">
<div class="box">
<div class="text-call">
<strong>Check out my GitHub for all of my projects!</strong>
<p></p>
<p>
Head on over to my GitHub by clicking that button right over there!
</p>
<button class="github-btn">
<a
class="call-to-action-button"
href="https://github.com/megankeyes"
>Megan's GitHub</a
>
</button>
</div>
</div>
</div>
<div class="footer">Copyright # The Odin Project 2021</div>
</body>
</html>
and style.css:
* {
margin: 0px;
box-sizing: border-box;
}
#header {
display: flex;
align-items: center;
justify-content: space-around;
background-color: darkslategray;
width: 100%;
max-width: 100vw;
}
.img {
width: 100%;
max-width: 280px;
height: auto;
border-radius: 50%;
}
.header-content {
color: white;
padding: 10px;
font-size: 1.5vw;
font-family: Arial, Helvetica, sans-serif;
}
p {
margin-top: 30px;
}
button {
background-color: rgb(107, 192, 226);
outline: none;
border-radius: 10px;
padding: 5px;
border: none;
cursor: pointer;
margin: 10px 0px;
width: 20vw;
}
button:hover {
background-color: cornsilk;
}
h3 {
color: white;
}
ul {
display: flex;
justify-content: flex-end;
list-style: none;
font-weight: bold;
background-color: darkslategray;
color: white;
}
ul li {
padding: 10px 12px;
}
li a {
color: white;
text-decoration: none;
}
a:hover {
color: rgb(107, 192, 226);
}
#title {
text-align: center;
margin: 10px;
}
.second-container {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
align-items: center;
width: 100%;
max-width: 100vw;
height: 95vh;
}
.info {
text-align: center;
}
.third-container {
background-color: rgb(219, 219, 219);
width: 100%;
max-width: 100vw;
height: 70vh;
font-size: xx-large;
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
}
.fourth-container {
width: 100%;
max-width: 100vw;
height: 70vh;
display: flex;
justify-content: center;
align-items: center;
}
.box {
width: 100%;
max-width: 70vw;
height: 100%;
max-height: 60vh;
background-color: #3882f6;
border-radius: 10px;
padding: 60px;
color: white;
display: flex;
justify-content: center;
align-items: center;
}
.github-btn {
margin-top: 20px;
color: rgb(107, 192, 226);
}
.github-btn a {
text-decoration: none;
color: white;
}
.github-btn a:hover {
color: rgb(107, 192, 226);
}
.footer {
display: flex;
justify-content: center;
align-items: center;
background-color: darkslategray;
color: white;
height: 10vh;
}
#media only screen and (max-width: 950px) {
.img {
width: 100%;
max-width: 200px;
height: auto;
}
}
#media only screen and (max-width: 750px) {
.img {
width: 100%;
max-width: 170px;
height: auto;
padding-right: 10px;
}
.header-content {
font-size: 1.6vw;
}
}
#media only screen and (max-width: 600px) {
.img {
width: 100%;
max-width: 150px;
height: auto;
padding-right: 20px;
}
.header-content {
font-size: 1.8vw;
}
}
#media only screen and (max-width: 460px) {
.img {
width: 100%;
max-width: 200px;
height: auto;
padding-right: 20px;
}
.header-content {
font-size: 2.2vw;
}
}
#media only screen and (max-width: 400px) {
.img {
width: 100%;
max-width: 300px;
height: auto;
}
.header-content {
font-size: 2.5vw;
}
}
#media only screen and (max-width: 320px) {
.img {
width: 100%;
max-width: 100vw;
height: auto;
}
.header-content {
font-size: 3vw;
}
}
just read and try to understand what Improvements I made and also look how I made it resposive. I hope after reading this you'll get how to add responsiveness. and adjust it according to your taste like if you want to add more css like border etc..
enjoy :)
Technically your image is already responsive, because you are using vh units. However, vh stands for viewport height, which means that your image is responsive to how tall your viewport is.
If you want it to respond to width, you can use vw units. (Same concept as vh, just using width instead of height)
Another easy method for creating responsiveness is using CSS media queries.
#media (max-width: 600px){
body {
background-color: blue;
}
}
This will make the background color of the body change to blue when the viewport is 600px or less.
You can change any CSS properties inside of there (image size, etc...), but make sure that the media query comes after the normal css styling in your css file.
You can also look into CSS Grid Layout, but there is a bit more of a learning curve down that path.
Hopefully this helps to get you in the right direction.
margin-top on the button itself may be the answer but it feels wrong to me. If it is hopefully an answer will confirm. What is the best solution to lower the button a smidgen?
The codepen for extra context: https://codepen.io/AdanRod133/full/WNZEYJX
body {
font-family: "Poppins", sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
background-color: coral;
display: grid;
grid-template-columns: 100px 300px 115px;
grid-row-gap: 1em;
justify-content: space-around;
align-items: center;
width: 50%;
height: 100px;
padding: 10px;
}
img {
width: 100%;
height: 100%;
background-color: #2D8C9E;
}
.btn-learn {
justify-self: center;
align-self: center;
height: 40px;
border: none;
border-radius: 10px;
width: 125px;
}
.body-title {
font-size: 1.15em;
line-height: 1.5em;
font-weight: bold;
justify-self: center;
}
.text-body {
font-size: 16px;
grid-column: 3 / 5;
}
<div class="container">
<img src="" alt="">
<div class="content">
<h3 class="body-title">
Startup
</h3>
<p class="text-body">Create Websites Online using the Startup Boostrap 5 builder</p>
</div>
<button class="btn btn-learn">Learn More <i class="fas fa-arrow-right"></i></button>
</div>
I have wrapped your button in a flex container and used its property align-items: center
There were also some styling changes I have made
you have made three column in grid with 100px 300px and 100px
but assigned the button with width: 125px that will make the styling error
<div class="container">
<img src="" alt="">
<div class="content">
<h3 class="body-title">
Startup
</h3>
<p class="text-body">Create Websites Online using the Startup Boostrap 5 builder</p>
</div>
<div class="button-container">
<button class="btn btn-learn">Learn More <i class="fas fa-arrow-right"></i></button>
</div>
</div>
body{
font-family: "Poppins", sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container{
background-color: coral;
display: grid;
grid-template-columns: 100px 300px 125px;
grid-row-gap: 1em;
justify-content: space-between;
align-items: center;
width: 40%;
height: 90px;
padding: 5px 20px;
}
img{
width: 100%;
height: 100%;
background-color: #2D8C9E;
}
.btn-learn{
/* justify-self: center; */
/* align-self: center; */
height: 40px;
border: none;
border-radius: 10px;
width: 100%;
/* margin-top: 16px; */
}
.body-title{
font-size: 1.15em;
line-height: 1.5em;
font-weight: bold;
justify-self: center;
}
.text-body{
font-size: 16px;
grid-column: 3 / 5;
}
.button-container
{
height: 100%;
margin: 0;
padding: 0;
display: flex;
align-items:center
}
You should restructure your div in a better way. For example, I think you are looking for content box like this:
I would suggest you to use Bootstrap if you are new to front-end web development.
Here is an example of how your Bootstrap-5 code looks.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<title>Hello, world!</title>
<style>
body {
font-family: "Poppins", sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
img {
width: 100%;
height: 100%;
background-color: #2d8c9e;
}
.btn-learn {
justify-self: center;
align-self: center;
height: 40px;
border: none;
border-radius: 10px;
width: 125px;
}
.body-title {
font-size: 1.15em;
line-height: 1.5em;
font-weight: bold;
justify-self: center;
}
.text-body {
font-size: 16px;
grid-column: 3 / 5;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-2">
<img src="" alt="" />
</div>
<div class="col-8">
<h3 class="body-title">Startup</h3>
<p class="text-body">Create Websites Online using the Startup Boostrap 5 builder</p>
</div>
<div class="col-2 d-flex flex-column justify-content-center">
<button class="btn btn-learn">Learn More <i class="fas fa-arrow-right"></i></button>
</div>
</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"
></script>
</body>
</html>
Here is the css file .
body {
font-family: "Poppins", sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
background-color: coral;
display: flex;
flex-wrap:no-wrap;
justify-content: space-between;
align-items: center;
width: 80%;
height: 100px;
padding: 10px;
}
img {
width: 100px;
height: 100px;
background-color: #2D8C9E;
}
.content {
padding:0% 2%;
}
.body-title {
font-size: 1.15em;
line-height: 1.5em;
font-weight: bold;
justify-self: center;
}
.text-body {
font-size: 16px;
grid-column: 3 / 5;
}
.btn-learn {
height: 40px;
border: none;
border-radius: 10px;
width: 125px;
}
And html file like this
<div class="container">
<img src="" alt="">
<div class="content">
<h3 class="body-title">
Startup
</h3>
<p class="text-body">
Create Websites Online using the Startup Boostrap 5 builder
</p>
</div>
<button class="btn btn-learn">
Learn More
<i class="fas fa-arrow-right"></i>
</button>
</div>
Here is the result: https://codepen.io/AdanRod133/full/WNZEYJX
.btn-learn{
position: relative;
height: 40px;
border: none;
border-radius: 5px;
background-color: #00A57F;
color: #D8D7DF;
height: 2.5em;
padding: 10px 25px;
outline: none;
cursor: pointer;
display: inline-block;
justify-self: end;
transition: all .2s ease-in-out;
}
I got rid of the width and set the button to inline-block. Then added some padding.
I wanted to make something css-grid only in order to get more practice in.
Working with the padding as well as adding grid gap allowed the items to
sit where I wanted them to.
This question already has answers here:
Align 3 unequal blocks left, center and right
(4 answers)
Closed 1 year ago.
There is 6 items in navbar:
first 3 items should be aligned as flex-start - on beginning of navbar.
Then Logo should be in center of navbar
And on the end -> flex-end should come 2 icons
Here is screenshot of navbar current condition:
Problem: is position of Logo - am using margin-left: '27%'. And on different screen size logo is not aligned well.
I would like to align some how that logo trough flex, is there a way to do that with flex?
Check the code:
HTML/jsx:
<div className="container">
<header className="header">
<nav className="user-nav">
<div className="user-nav-item">
<Link href="/">
<a className="user-nav-item-link">Overview</a>
</Link>
</div>
<div className="user-nav-item">
<Link href="/search">
<a className="user-nav-item-link">Search</a>
</Link>
</div>
<div className="user-nav-item">
<Link href="/feed">
<a className="user-nav-item-link">Feed</a>
</Link>
</div>
<h3 className="logo">Logo</h3>
</nav>
<div className="user-nav-icon">
<div className="user-nav-icon-box">
<img src={bellIcon} alt="notify icon" />
</div>
<div className="user-nav-icon-box">
<img src={settingsIcon} alt="settings icon" />
</div>
</div>
</header>
</div>
CSS:
.container {
max-width: 100vw;
display: flex;
flex-direction: column;
.header {
display: flex;
align-items: center;
height: 5rem;
color: #fff;
background-color: black;
.user-nav {
width: 100%;
display: flex;
align-items: center;
&-item {
width: 5.5rem;
padding: 1.5rem;
cursor: pointer;
}
&-item-link {
text-decoration: none;
color: white;
}
.logo {
margin-left: 27%;
}
&-icon {
display: flex;
align-items: center;
background-color: white;
color: red;
margin-right: 3rem;
& > * {
padding: 0 0.8rem;
cursor: pointer;
}
&-icon-notification {
color: red;
}
}
}
}
}
Using Flex Box. It will be harder to achieve that, I have an alternative. Please test this code on codepen:
* {
box-sizing: border-box;
}
.parent{
width: 100%;
min-height: 80px;
background-color: yellow;
display: relative;
}
.nav-menu,
.icons{
display: inline-block;
}
.icons{
float: right;
margin-left: 75px; /*This will help your icons to never go below the logo element*/
}
.nav-menu{
margin-right: 75px; /*This will help your nav-menu items to never go below the logo element*/
}
.logo{
width: 150px;
height: 40px;
position: absolute;
left: 50%;
background-color: green;
transform: translateX(-50%);
}
<div class="parent">
<div class="nav-menu"> Your Menu</div>
<div class="logo"></div>
<div class="icons">Your Icons</div>
</div>
You can simply get the logo out you nav so that all three, logo, nav and icons become flex items and justify header's content with space-between. Below is the simplified code.
P.S. - Share the rendered code as your implementation in future and not JSX/SASS
.container {
max-width: 100vw;
display: flex;
flex-direction: column;
}
.container .header {
display: flex;
align-items: center;
justify-content: space-between;
height: 5rem;
color: #fff;
background-color: black;
}
.container .header .user-nav {
display: flex;
align-items: center;
}
.container .header .user-nav-item {
padding: 1.5rem;
cursor: pointer;
}
.container .header .user-nav-item-link {
text-decoration: none;
color: white;
}
.container .header .user-nav-icon {
display: flex;
align-items: center;
background-color: white;
color: red;
margin-right: 3rem;
}
.container .header .user-nav-icon > * {
padding: 0 0.8rem;
cursor: pointer;
}
.container .header .user-nav-icon-icon-notification {
color: red;
}
<div class="container">
<header class="header">
<nav class="user-nav">
<div class="user-nav-item">
<a class="user-nav-item-link">Overview</a>
</div>
<div class="user-nav-item">
<a class="user-nav-item-link">Search</a>
</div>
<div class="user-nav-item">
<a class="user-nav-item-link">Feed</a>
</div>
</nav>
<h3 class="logo">Logo</h3>
<div class="user-nav-icon">
<div class="user-nav-icon-box">
Bell
</div>
<div class="user-nav-icon-box">
Settings
</div>
</div>
</header>
</div>
Here is an answer using display: flex; Flexbox is best & elegant to align items to mid of the page without cheesy computations by Margin, Transform,...
<html>
<head>
<style>
*, .container {
width: 100%;
top: 0;
left: 0;
padding: 0;
margin: 0;
color: ivory;
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
font-size: 13px;
}
.header {
display: flex;
align-items: center;
padding: 10px;
background-color: gray;
}
.user-nav {
display: flex;
align-items: center;
justify-content: center;
width: 30%;
}
.user-nav-item {
display: flex;
align-items: center;
justify-content: center;
}
.logo {
display: flex;
align-items: center;
justify-content: center;
width: 40%;
}
.user-nav-icon {
display: flex;
align-items: center;
justify-content: center;
width: 30%;
}
</style>
</head>
<body>
<div class="container">
<header class="header">
<nav class="user-nav">
<div class="user-nav-item">
<Link href="/">
<a class="user-nav-item-link">Overview</a>
</Link>
</div>
<div class="user-nav-item">
<Link href="/search">
<a class="user-nav-item-link">Search</a>
</Link>
</div>
<div class="user-nav-item">
<Link href="/feed">
<a class="user-nav-item-link">Feed</a>
</Link>
</div>
</nav>
<h3 class="logo">Logoooooooooooooooooooooo</h3>
<div class="user-nav-icon">
<div class="user-nav-icon-box">
<img src={bellIcon} alt="notify icon" />
</div>
<div class="user-nav-icon-box">
<img src={settingsIcon} alt="settings icon" />
</div>
</div>
</header>
</div>
</body>
</html>
I'm trying to create a scrolling element without a fixed height parent. I want #SECTION1 of my code to be scrollable to show the rest of the images. I can't seem to find a way to do this. I've attempted to set #SECTION1 to a fixed height but it forces my images to be squashed. Any help would be appreciated. Thank you.
Here is my code:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
text-decoration: none;
}
::-webkit-scrollbar {
width: 15px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
html,
body {
margin: 0;
padding: 0;
height: 100vh;
overflow: hidden;
}
/*----------SECTION 1----------*/
header {
height: 80px;
background-color: black;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
#header-wrapper {
display: flex;
width: 55%;
justify-content: space-between;
align-items: center;
}
#logo {
width: 70px;
}
nav a {
color: white;
padding: 20px;
font-family: 'Roboto';
font-size: 0.8em;
font-weight: bold;
}
#media only screen and (max-width: 750px) {
nav {
display: none;
}
}
#mobile-menu {
color: white;
font-size: 1.3em;
}
#media only screen and (min-width: 750px) {
#mobile-menu {
display: none;
}
}
#body-wrapper {
display: flex;
height: 100%;
}
aside {
width: 300px;
height: 889px;
background-color: #0c0c0c;
display: flex;
align-items: center;
padding-top: 50px;
flex-direction: column;
}
#aside-wrap {
width: 70%;
}
#user-info {
display: flex;
margin: 10px;
margin-left: 0;
margin-bottom: 50px;
justify-content: center;
align-items: center;
font-family: 'Roboto';
font-weight: 400;
}
#user {
font-size: 40px;
color: white;
margin-right: 20px;
}
aside h3 {
color: white;
font-size: 1.2em;
}
#hello {
color: white;
font-size: 20px;
}
#box-1 {
color: #808080;
margin-bottom: 60px;
}
#box-1 p {
margin: 20px;
margin-left: 0;
font-family: 'Roboto';
font-size: 0.9em;
}
#box-2 {
color: #808080;
}
#box-2 p {
margin: 20px;
margin-left: 0;
font-family: 'Roboto';
font-size: 0.9em;
}
#section1 {
background-color: #191919;
/*background: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)),
url("listen_background.jpg");*/
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 100%;
overflow: auto;
}
#section1-wrapper {
width: 80%;
display: flex;
font-family: 'Roboto';
padding-top: 50px;
padding-bottom: 50px;
align-items: center;
flex-direction: column;
}
#section1 h1 {
color: white;
font-size: 3em;
margin-bottom: 50px;
text-align: center;
}
.image-box {
max-width: 280px;
margin: 20px;
}
img {
max-width: 100%;
}
#image-row-1,
#image-row-2,
#image-row-3,
#image-row-4 {
width: 100%;
margin-bottom: 50px;
display: flex;
justify-content: space-between;
}
#media only screen and (max-width: 1080px) {
#image-row-1,
#image-row-2,
#image-row-3,
#image-row-4 {
flex-direction: column;
align-items: center;
}
}
/*----------------SECTION 2--------------*/
#pusher {
height: 889px;
width: 300px;
}
#player {
height: 80px;
width: 100%;
position: fixed;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: black;
}
#media only screen and (max-width: 750px) {
#player {
height: auto;
}
}
#player-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
width: 80%;
}
#media only screen and (max-width: 750px) {
#player-wrapper {
flex-direction: column;
}
}
.button-controls {
color: white;
margin: 20px;
}
#player-bar {
width: 100%;
height: 3px;
background-color: white;
}
#player-filler {
width: 50%;
height: 100%;
background-color: #2A4B5A;
}
#timeline {
width: 50%;
display: flex;
justify-content: center;
align-items: center;
}
#media only screen and (max-width: 750px) {
#timeline {
width: 100%;
}
}
#timeline p {
color: white;
margin: 20px;
}
#share,
#phone {
color: white;
margin: 20px;
}
#media only screen and (max-width: 750px) {
#share,
#phone {
display: none;
}
}
<head>
<meta charset="utf-8">
<title>Flo Music</title>
<link rel="stylesheet" type="text/css" href="listen.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
</head>
<body>
<div id="test">
<div id="body-wrapper">
<aside>
<div id="aside-wrap">
<div id="user-info">
<i class="far fa-user-circle" id="user"></i>
<h3>Emmanuel</h3>
</div>
<div id="box-1">
<p>Your Library</p>
<p>Recently Played</p>
<p>Songs</p>
<p>Playlist</p>
</div>
<div id="box-2">
<p>Your Library</p>
<p>Recently Played</p>
<p>Songs</p>
<p>Playlist</p>
</div>
<p>HOME</p>
</div>
</aside>
<section id="section1">
<div id="section1-wrapper">
<h1>New Releases</h1>
<div id="image-row-1">
<div class="image-box"><img src="album1.jpg"></div>
<div class="image-box"><img src="album2.jpg"></div>
<div class="image-box"><img src="album3.jpg"></div>
<div class="image-box"><img src="album4.jpg"></div>
</div>
<div id="image-row-2">
<div class="image-box"><img src="album5.jpg"></div>
<div class="image-box"><img src="album6.jpg"></div>
<div class="image-box"><img src="album7.jpg"></div>
<div class="image-box"><img src="album8.png"></div>
</div>
<div id="image-row-3">
<div class="image-box"><img src="album9.jpg"></div>
<div class="image-box"><img src="album10.jpg"></div>
<div class="image-box"><img src="album11.jpg"></div>
<div class="image-box"><img src="album12.jpg"></div>
</div>
<div id="image-row-4">
<div class="image-box"><img src="album13.jpg"></div>
<div class="image-box"><img src="album14.jpg"></div>
<div class="image-box"><img src="album15.jpg"></div>
<div class="image-box"><img src="album16.jpg"></div>
</div>
</div>
</section>
</div>
<div id="player">
<div id="player-wrapper">
<div id="controls">
<i class="fas fa-backward button-controls"></i>
<i class="fas fa-play button-controls"></i>
<i class="fas fa-forward button-controls"></i>
</div>
<div id="timeline">
<p>0:00</p>
<div id="player-bar">
<div id="player-filler"></div>
</div>
<p>0:00</p>
</div>
<div id="icon-right">
<i class="fas fa-share-square" id="share"></i>
<i class="fas fa-mobile" id="phone"></i>
</div>
Flex items are set to flex-shrink: 1 by default. This means they can shrink to prevent an overflow of the container. In your case, you may need to disable this feature (flex-shrink: 0).
Also, consider using height: 100vh, instead of height: 100% on your flex container. Percentage heights are tricky and often require the parent to have a defined height.
See this post for details: Working with the CSS height property and percentage values
Lastly, remove justify-content: center from your flex container. It makes content inaccessible via scroll in some cases.
See this post for details: Can't scroll to top of flex item that is overflowing container
Make these adjustments to your code:
#body-wrapper {
display: flex;
/* height: 100%; */
height: calc(100vh - 80px); /* subtract footer height */
}
#section1 {
background-color: #191919;
display: flex;
align-items: center;
/* justify-content: center; */ /* remove to avoid scrolling problems */
flex-direction: column;
width: 100%;
overflow: auto;
}
#section1-wrapper {
width: 80%;
display: flex;
font-family: 'Roboto';
padding-top: 50px;
padding-bottom: 50px;
align-items: center;
flex-direction: column;
flex-shrink: 0; /* add to disable flex default shrinking feature */
}
jsFiddle demo
You should change your overflow property in the #section1
#section1-wrapper {
overflow: scroll;
}
I am trying to vertically position the "Distance" and "Duration" text in the center of their respective divs using flexbox, I can't seem to get it to work. I will also apply this to the "Calories" and "Share" text aswell.
I am also want to use flexbox to evenly space my 4x links vertaically in the middle column.
Codepen demo
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Runna - Track your run!</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,900' rel='stylesheet' type='text/css'>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/js.js"></script>
</head>
<body>
<div id="main-wrapper">
<div id="head-bar">
<img class="logo" src="imgs/logo-blue.png">
</div>
<div id="map-container">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d11564.804405086046!2d172.59430635!3d-43.56069255!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2snz!4v1418977732755" width="100%" height="100%" frameborder="0" style="border:0"></iframe>
</div>
<div id="control-container">
<div class="left-col">
<div class="distance-wrapper">
<div class="distance-title bold-title">DISTANCE:</div>
<div class="distance-figure">1.7KM</div>
</div>
<div class="duration-wrapper">
<div class="duration-title bold-title">DURATION</div>
<div class="duration-figure">10.42MINS</div>
</div>
</div> <!-- End of left col -->
<div class="middle-col">
<ul>
<li class="arrow"><i class="fa fa-chevron-down"></i></li>
<li>START</li>
<li>STOP</li>
<li>PAUSE</li>
</ul>
</div>
<div class="right-col">
<div class="calorie-wrapper">
<div class="calories bold-title">CALORIES</div>
<div class="calories-result">100 cal's</div>
</div>
<div class="share-wrapper">
<div class="share bold-title">SHARE</div>
<div class="share-icons">FB or Twitter</div>
</div>
</div> <!-- End of right col -->
</div>
</div>
</body>
</html>
CSS:
html {
box-sizing: border-box;
height: 100%;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
height: 100%;
font-family: 'Lato', sans-serif;
}
#main-wrapper {
height: 100vh;
}
#media all and (max-width: 40em) {
#head-bar {
background: black;
width: 100%;
height: 5vh;
}
.logo {
display: block;
margin: 0 auto;
height: 85%;
}
#map-container {
background: yellow;
height: 65vh;
width: 100%;
}
}
/***Control columns***/
#control-container {
width: 100%;
height: 30vh;
color: white;
font-family: 'Lato', sans-serif;
text-align: center;
background: #1b1b1b;
position: relative;
}
.left-col {
display: flex;
flex-direction: column;
width: 33.3%;
height: 100%;
/*height: 60px;*/
float: left;
}
.middle-col {
background: #151515;
width: 33.3%;
height: 100%;
float: left;
/*box-shadow: 0 0 8px 2px #000;*/
}
.right-col {
width: 33.3%;
float: left;
}
.distance-wrapper, .duration-wrapper {
flex: 1;
/*background: #ddd;*/
border-bottom: 1px solid yellow;
justify-content: center;
}
.calorie-wrapper, .share-wrapper {
display: block;
width: 100%;
}
.bold-title {
font-weight: 900;
font-family: 'Lato', sans-serif;
}
/***Middle Navigation***/
.middle-col {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.middle-col ul {
margin: 0;
padding: 0;
display: table;
width: 100%;
}
.middle-col li {
list-style-type: none;
}
.middle-col a {
color: white;
text-decoration: none;
display: block;
padding: 20px;
}
.middle-col a:hover {
background: green;
display: block;
}
#control-container:after {
content: "";
display: block;
height: 0;
clear: both;
}
I created this example with a smaller amount of HTML and, hopefully, greater semantic meaning.
Let's make this:
The HTML
The <section> element for the flex container
The <nav> element is a good container for the actions.
The description list element — <dl> — is a good wrapper for the stats. They have two children:
The Description Term element — <dt> — is used for the stat headings
The Description element — <dd> — is used for the stat value
<section class="control-container">
<dl class="distance">
<dt>Distance</dt>
<dd>1.7KM</dd>
</dl>
<dl class="duration">
<dt>Duration</dt>
<dd>10.42 Mins</dd>
</dl>
<dl class="calories">
<dt>Calories</dt>
<dd>100</dd>
</dl>
<nav class="actions">
Down
Start
Stop
Pause
</nav>
<div class="share">
<h2>Share</h2>
Facebook
Twitter
</div>
</section>
The Flex
The flex <section> container has display: flex and flex-flow: column wrap so its children will layout in columns and wrap when pushed outside.
The flex items are also given display: flex, flex-flow: column wrap and justify-content: center; so that the text is vertically centered. The nav is given flex-direction: row so that its links can be evenly centered vertically with align-items: center
The 4 sections which take up half of the height are given flex: 1 1 50%; they will each get half of a column height
The navigation is given flex: 1 1 100% so it will take up an entire column on its own
.control-container {
display: flex;
flex-flow: column wrap;
}
.control-container > * {
display: flex;
flex-flow: column wrap;
justify-content: center;
flex: 1 1 50%;
width: 33.33%;
text-align: center;
}
.control-container > nav {
flex-direction: row;
align-items: center;
flex: 1 1 100%;
}
.control-container > nav a {
flex: 1 1 100%;
}
Complete Example
* {
margin: 0;
padding: 0;
font: 100% arial;
}
.control-container {
display: flex;
flex-flow: column wrap;
height: 40vh;
min-height: 250px;
min-width: 300px;
margin: 0 auto;
}
.control-container > * { /* target all direct children */
display: flex;
flex-flow: column wrap;
justify-content: center;
flex: 1 1 50%;
width: 33.33%;
text-align: center;
background: #333;
color: #FFF;
}
.control-container > nav {
flex-direction: row; /* allows vertical centering with align-items: center; */
align-items: center;
flex: 1 1 100%; /* take up entire column */
background: #000;
}
.control-container > nav a {
flex: 1 1 100%; /* 100% pushes each link so they wrap */
}
/*Change the order of the flex items so the stats can be kept together in the HTML*/
.distance,
.duration,
.actions {
order: 1;
}
.calories {
order: 3;
}
.share {
order: 4;
}
.wrapper {
max-width: 1200px;
margin: 0 auto;
}
.control-container dt,
.control-container h2 {
font-weight: bold;
}
.share h2 {
margin-top: calc(1em + 15px); /*push "share" down so it aligns with "duration" 1em accounts for the extra line of text */
}
.control-container a {
color: #FFF;
text-decoration: none;
}
dt,
dd,
.share * {
padding: 5px;
}
iframe {
width: 100%;
height: calc(60vh - 104px);
/* viewport height minus flex container height and header height ( + there is a stray 4px somewhere)*/
min-height: 300px;
}
header {
height: 100px;
text-align: center;
background: #000;
}
<div class="wrapper">
<header>
<img src="http://www.placehold.it/100" />
</header>
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d11564.804405086046!2d172.59430635!3d-43.56069255!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2snz!4v1418977732755" frameborder="0" style="border:0"></iframe>
<section class="control-container">
<dl class="distance">
<dt>Distance</dt>
<dd>1.7KM</dd>
</dl>
<dl class="duration">
<dt>Duration</dt>
<dd>10.42 Mins</dd>
</dl>
<dl class="calories">
<dt>Calories</dt>
<dd>100</dd>
</dl>
<nav class="actions">
Down
Start
Stop
Pause
</nav>
<div class="share">
<h2>Share</h2>
Facebook
Twitter
</div>
</section>
</div>
So i ended up working it out, I didnt realise you can add the display: flex and flex-direction: column; etc properties again if you have already added them to the main container. Anyway I added the following code to my wrappers and it works:
.distance-wrapper, .duration-wrapper {
flex: 1;
border-bottom: 1px solid yellow;
display: flex; // Important
flex-direction: column; // Important
align-items: center;// Important
justify-content: center; // Important
}