I have this setup https://codepen.io/saraLance/pen/LYGevXW and I have a couple of problems.
the header covers more than the parent width.
Scroll works weird, it seems to stop after the button play, and then I have to scroll again.
I have tried to fix the scroll problem making the header fixed position: fixed; width: 100% but the header covers more than the parent div.
I also have no idea why screen height it's not the same that it's parent screens.
Ideally sit-container should be after header and header should be fixed.
div {
width: auto;
}
.screens {
background: green;
height: 100vh;
display: flex;
overflow-x: hidden;
overflow-y: auto;
}
.screen {
background: red;
}
.header {
border: solid 1px black;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-evenly;
padding: 12px;
background: white;
}
.sit-container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
padding-top: 1rem;
overflow: auto;
}
.strip {
width: 100vw;
}
.view {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
min-height: 300px;
min-width: 300px;
animation-delay: 0.2s;
overflow-y: scroll;
flex-direction: column;
}
.view-1 {
height: 300px;
width: 300px;
flex: 0 0 auto;
margin: 0 auto;
margin-top: 1rem;
border: solid 1px black;
}
.button-section {
display: flex;
flex-direction: column;
text-align: center;
margin-top: 1rem;
width: 100%;
}
.play-button {
height: 1.25rem;
display: flex;
justify-content: center;
align-items: center;
color: black;
border: 1px solid black;
text-decoration: none;
padding: 1rem 1.25rem;
line-height: 1rem;
border-radius: 0.375rem;
font-size: 1rem;
font-style: normal;
font-weight: normal;
text-align: center;
text-transform: uppercase;
margin: 1rem;
}
.quit-button {
color: black;
text-decoration: none;
font-size: 1.2rem;
margin-top: 1.5rem;
margin-bottom: 1.5rem;
border: 1px solid black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=">
<title></title>
</head>
<body>
<div class="screens">
<div class="screen">
<div class="header">
<div class="div-1">Div-1</div>
<div class="div-1">Div-2</div>
</div>
<div class="sit-container">
<div class="strip">
<div class="view">
<div class="view-1">View-1</div>
<div class="view-1">View-2</div>
<div class="view-1">View-3</div>
<div class="view-1">View-4</div>
</div>
</div>
<div class="button-section">
<a class="play-button">Play</a>
<a class="quit-button">Quit</a>
</div>
</div>
</div>
</div>
</body>
</html>
screens class should be width: auto and overflow-x:hidden should be on button-section
See output in full screen
div {
width: auto;
}
#media (min-width: 768px) {
width:35%;
margin:auto;
}
.screens {
background: green;
height:"auto";
display: flex;
}
.screen {
background: red;
}
.header {
border: solid 1px black;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-evenly;
padding: 12px;
background: white;
}
.sit-container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
padding-top: 1rem;
overflow: auto;
}
.strip {
width: 100vw;
#media (min-width: 768px) {
width: 35vw;
}
}
.view {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
min-height: 300px;
min-width: 300px;
animation-delay: 0.2s;
overflow-y: scroll;
flex-direction: column;
}
.view-1{
height: 300px;
width: 300px;
flex: 0 0 auto;
margin: 0 auto;
margin-top: 1rem;
border: solid 1px black;
}
.button-section{
display: flex;
flex-direction: column;
text-align: center;
margin-top: 1rem;
width: 100%;
overflow-x:hidden;
}
.play-button {
height: 1.25rem;
display: flex;
justify-content: center;
align-items: center;
color: black;
border: 1px solid black;
text-decoration: none;
padding: 1rem 1.25rem;
line-height: 1rem;
border-radius: 0.375rem;
font-size: 1rem;
font-style: normal;
font-weight: normal;
text-align: center;
text-transform: uppercase;
margin: 1rem;
}
.quit-button {
color: black;
text-decoration: none;
font-size: 1.2rem;
margin-top: 1.5rem;
margin-bottom: 1.5rem;
border: 1px solid black;
}
<div class="screens">
<div class="screen">
<div class="header">
<div class="div-1">Div-1</div>
<div class="div-1">Div-2</div>
</div>
<div class="sit-container">
<div class="strip">
<div class="view">
<div class="view-1">View-1</div>
<div class="view-1">View-2</div>
<div class="view-1">View-3</div>
<div class="view-1">View-4</div>
</div>
</div>
<div class="button-section">
<a class="play-button">Play</a>
<a class="quit-button">Quit</a>
</div>
</div>
</div>
</div>
Related
I'm currently following TOP (The Odin Project) curriculum and working on my landing page project, so I'm trying to make it as responsive as possible.
How can I put the header's image below the sign up button once I minimize the page?
I've tried to use flex-wrap: wrap; but it'll not work because it wraps when the page is maximized.
.about {
display: flex;
justify-content: flex-start;
padding-bottom: 5%;
flex-wrap: wrap;
}
My code
html, body {
margin: 0;
padding: 0;
font-family: Verdana, Geneva, Tahoma, sans-serif;
box-sizing: border-box;
}
/* blue container, first container */
.dark-blue {
background-color: #1f2937;
display: flex;
flex: 1 1 0;
padding-left: 10%;
padding-right: 10%;
}
.header {
display: flex;
justify-content: space-around;
align-items: center;
padding-bottom: 5%;
}
.logo {
color: #F9FAF8;
font-size: 24px;
font-weight: bolder;
display: flex;
flex: 1 1 auto;
}
.links {
font-size: 18px;
display: flex;
flex-shrink: 1;
gap: 1rem;
flex-wrap: wrap;
}
.link-text {
font-size: 18px;
color: #e5e7eb;
}
a {
text-decoration: none;
}
ul {
list-style-type: none;
}
.about {
display: flex;
justify-content: flex-start;
padding-bottom: 5%;
}
.main-text {
color: #F9FAF8;
font-size: 48px;
font-weight: bolder;
width: 95%;
display: flex;
flex: 1 1 auto;
padding-bottom: 1rem;
}
.secondary-text {
padding-bottom: .5rem;
font-size: 18px;
max-width: 80%;
color: #e5e7eb;
display: flex;
flex: 1 1 auto;
justify-content: start;
padding-bottom: 1rem;
}
.about-text {
padding-bottom: 5%;
display: flex;
flex-direction: column;
}
.button-one {
background-color: #1DB954;
color: #F9FAF8;
font-weight: bold;
border-radius: 10px;
width: 92px;
height: 20px;
padding: 8px;
text-align: center;
}
.button-one:hover {
color: #F9FAF8;
font-weight: bold;
background-color: #126e32;
border-radius: 10px;
box-shadow: 0 5px 8px 0 rgba(224, 224, 224, 0.020), 0 7px 10px 0 rgba(238, 238, 238, 0.025);
width: 92px;
height: 20px;
padding: 8px;
text-align: center;
}
.button-text {
color: #F9FAF8;
}
.button-text:hover {
color: #F9FAF8;
}
.header-image {
width: 45%;
height: 18%;
border-radius: 2px;
display: flex;
flex-shrink: 0;
}
/* second container, information */
.information-header-text {
font-size: 36px;
color: #1f2937;
font-weight: bolder;
text-align: center;
display: flex;
justify-content: center;
padding-top: 5rem;
padding-bottom: 2rem;
flex: 1 1 auto;
}
.image img {
width: 17rem;
height: 17rem;
border: none;
border-radius: 2px;
display: flex;
}
.image img:hover {
width: 17rem;
height: 17rem;
border: none;
border-radius: 2px;
box-shadow: 0 5px 12px 0px rgba(8, 8, 8, 0.199);
}
.subtext {
color: #1f2937;
width: 17rem;
text-align: center;
padding-top: .5rem;
padding-bottom: 1rem;
}
.image-subtext {
display: flex;
justify-content: center;
align-content: center;
gap: 1%;
flex-wrap: wrap;
padding-bottom: 8rem;
}
/* third container, quote container */
.quote {
background-color: #e5e7eb;
display: flex;
flex-wrap: wrap;
flex: 1 1 auto;
padding-left: 25%;
padding-right: 20%;
padding-bottom: 10%;
padding-top: 10%;
}
.quote-text {
font-size: 36px;
color: #1f2937;
font-style: italic;
font-weight: 100;
width: 100%;
padding-bottom: 0;
}
.author {
font-size: 24px;
color: #1f2937;
font-weight: 900;
width: 90%;
display: flex;
flex-shrink: 1;
padding-left: 70%;
}
/* fourth container, box action */
.action {
background-color:#F9FAF8;
height: 30rem;
display: flex;
justify-content: center;
align-items: center;
flex: 1 1 auto;
}
.box-action {
background-color: #1DB954;
border-radius: 2px;
box-shadow: 0 5px 8px 0px rgba(8, 8, 8, 0.145);
display: flex;
justify-content: space-between;
align-items: center;
flex: 0 1 auto;
flex-wrap: wrap;
width: 50%;
padding: 5%;
padding-left: 10%;
padding-right: 10%;
gap: 2rem;
}
.action-title {
font-size: 32px;
color: #F9FAF8;
font-weight: bolder;
display: flex;
flex-shrink: 1;
}
.action-subtext {
color: #e5e7eb;
font-size: 18px;
font-weight: lighter;
display: flex;
flex-shrink: 1;
}
.button-two {
background-color: #1DB954;
color: #F9FAF8;
font-weight: bold;
border-radius: 10px;
border: 2px solid #F9FAF8;
width: 90px;
height: 20px;
padding: 5px;
text-align: center;
}
.button-two:hover {
color: #1DB954;
font-weight: bold;
background-color: #F9FAF8;
border-radius: 10px;
width: 90px;
height: 20px;
padding: 5px;
text-align: center;
}
.button-text-two {
color: #F9FAF8;
}
.button-text-two:hover {
color: #1DB954;
}
/* Footer */
footer {
color: #e5e7eb;
font-weight: lighter;
height: 5rem;
display: flex;
justify-content: center;
align-items: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Black and White</title>
<link rel="icon" href="images/blackandwhite.png">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header dark-blue">
<div class="logo">black and white</div>
<ul class="links">
<li><a class="link-text" href="#">home</a></li>
<li><a class="link-text" href="#photos">photos</a></li>
<li><a class="link-text" href="#sign-up">sign up</a></li>
</div>
</div>
<div class="about dark-blue">
<div class="about-text">
<div class="main-text">Get beautiful black and white pictures</div>
<div class="secondary-text">The world is not black and white, there are lots of shades of grey.
There are good things and bad things in every era, and
it's kind of very blindfolded to say one era was wonderful,
as it was wonderful, but there were a lot of bad things as well.</div>
<div class="button-one">
<a class="button-text" href="#">Sign up</a>
</div>
</div>
<img class="header-image" src="./images/header-image.jpeg">
</div>
<section id ="photos"></section>
<div class="information">
<div class="information-header-text">Check some black and white photos</div>
<div class="image-subtext">
<div class="one">
<a href="https://images.unsplash.com/reserve/yZfr4jmxQyuaE132MWZm_stagnes.jpg?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1026&q=80">
<div class="image"><img src="./images/rocks.jpeg" alt="Monochrome coastal rocks"></div>
</a>
<div class="subtext">Monochrome coastal rocks</div>
</div>
<div class="two">
<a href="https://images.unsplash.com/photo-1574402897005-74dbf3f19be6?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80">
<div class="image"><img src="./images/stairway.jpeg" alt="Stairway from metro station"></div>
</a>
<div class="subtext">Stairway from metro station</div>
</div>
<div class="three">
<a href="https://images.unsplash.com/photo-1603157259666-71adcb873119?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80">
<div class="image"><img src="./images/cat.jpeg" alt="Cat eyes"></div>
</a>
<div class="subtext">Cat eyes</div>
</div>
<div class="four">
<a href="https://images.unsplash.com/photo-1452727333656-23ae1299777a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=580&q=80">
<div class="image"><img src="./images/truck.jpeg" alt="Monochrome vintage truck"> </div>
</a>
<div class="subtext">Monochrome vintage truck</div>
</div>
</div>
<div class="quote">
<div class="quote-text">
Although humans see reality in colour, for me,
black and white has always been connected to the image's deeper truth,
to its most hidden meaning.
</div>
<div class="author">
- Peter Lindbergh
</div>
</div>
</div>
<section id ="sign-up"></section>
<div class="action">
<div class="box-action">
<div class="action-text">
<div class="action-title">More photos?</div>
<div class="action-subtext">Sign up for more beautiful black and white pictures!
</div>
</div>
<div class="button-two">
<a class="button-text-two" href="#">Sign up</a>
</div>
</div>
</div>
<footer class="dark-blue">
Copyright © The Odin Project 2023
</footer>
</body>
</html>
html, body {
margin: 0;
padding: 0;
font-family: Verdana, Geneva, Tahoma, sans-serif;
box-sizing: border-box;
}
/* blue container, first container */
.dark-blue {
background-color: #1f2937;
display: flex;
flex: 1 1 0;
padding-left: 10%;
padding-right: 10%;
}
.header {
display: flex;
justify-content: space-around;
align-items: center;
padding-bottom: 5%;
}
.logo {
color: #F9FAF8;
font-size: 24px;
font-weight: bolder;
display: flex;
flex: 1 1 auto;
}
.links {
font-size: 18px;
display: flex;
flex-shrink: 1;
gap: 1rem;
flex-wrap: wrap;
}
.link-text {
font-size: 18px;
color: #e5e7eb;
}
a {
text-decoration: none;
}
ul {
list-style-type: none;
}
.about {
display: flex;
justify-content: flex-start;
padding-bottom: 5%;
}
.main-text {
color: #F9FAF8;
font-size: 48px;
font-weight: bolder;
width: 95%;
display: flex;
flex: 1 1 auto;
padding-bottom: 1rem;
}
.secondary-text {
padding-bottom: .5rem;
font-size: 18px;
max-width: 80%;
color: #e5e7eb;
display: flex;
flex: 1 1 auto;
justify-content: start;
padding-bottom: 1rem;
}
.about-text {
padding-bottom: 5%;
display: flex;
flex-direction: column;
}
.button-one {
background-color: #1DB954;
color: #F9FAF8;
font-weight: bold;
border-radius: 10px;
width: 92px;
height: 20px;
padding: 8px;
text-align: center;
}
.button-one:hover {
color: #F9FAF8;
font-weight: bold;
background-color: #126e32;
border-radius: 10px;
box-shadow: 0 5px 8px 0 rgba(224, 224, 224, 0.020), 0 7px 10px 0 rgba(238, 238, 238, 0.025);
width: 92px;
height: 20px;
padding: 8px;
text-align: center;
}
.button-text {
color: #F9FAF8;
}
.button-text:hover {
color: #F9FAF8;
}
.header-image {
width: 45%;
height: 18%;
border-radius: 2px;
display: flex;
flex-shrink: 0;
}
/* second container, information */
.information-header-text {
font-size: 36px;
color: #1f2937;
font-weight: bolder;
text-align: center;
display: flex;
justify-content: center;
padding-top: 5rem;
padding-bottom: 2rem;
flex: 1 1 auto;
}
.image img {
width: 17rem;
height: 17rem;
border: none;
border-radius: 2px;
display: flex;
}
.image img:hover {
width: 17rem;
height: 17rem;
border: none;
border-radius: 2px;
box-shadow: 0 5px 12px 0px rgba(8, 8, 8, 0.199);
}
.subtext {
color: #1f2937;
width: 17rem;
text-align: center;
padding-top: .5rem;
padding-bottom: 1rem;
}
.image-subtext {
display: flex;
justify-content: center;
align-content: center;
gap: 1%;
flex-wrap: wrap;
padding-bottom: 8rem;
}
.about {
display: flex;
justify-content: flex-start;
padding-bottom: 5%;
flex-wrap: wrap;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Black and White</title>
<link rel="icon" href="images/blackandwhite.png">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header dark-blue">
<div class="logo">black and white</div>
<ul class="links">
<li><a class="link-text" href="#">home</a></li>
<li><a class="link-text" href="#photos">photos</a></li>
<li><a class="link-text" href="#sign-up">sign up</a></li>
</div>
</div>
<div class="about dark-blue">
<div class="about-text">
<div class="main-text">Get beautiful black and white pictures</div>
<div class="secondary-text">The world is not black and white, there are lots of shades of grey.
There are good things and bad things in every era, and
it's kind of very blindfolded to say one era was wonderful,
as it was wonderful, but there were a lot of bad things as well.</div>
<div class="button-one">
<a class="button-text" href="#">Sign up</a>
</div>
</div>
<img class="header-image" src="./images/header-image.jpeg">
</div>
</body>
</html>
You could add a media query that switches the flex direction between row and column when the viewport crosses a particular width threshold.
Might look something like this:
.about {
display: flex;
flex-direction: row;
}
#media (max-width: 600px) {
.about {
flex-direction: column;
}
}
<div class="about">
<div class="about-text">
<div class="main-text">Get beautiful black and white pictures</div>
<div class="secondary-text">The world is not black and white, there are lots of shades of grey. There are good things and bad things in every era, and it's kind of very blindfolded to say one era was wonderful, as it was wonderful, but there were a lot of bad things as well.</div>
<div class="button-one">
<a class="button-text" href="#">Sign up</a>
</div>
</div>
<img src="//placekitten.com/300/300">
</div>
This is difficult to demonstrate on StackOverflow due to the snippet framing, but if you full-screen the snippet above and adjust your window size you'll see it snap to column orientation when your window is narrower than 600px.
You could also do this with a container query if you need to base it on a parent element width instead of the entire viewport.
If you mean that you want the image to move when you're reducing the size of the page (rather than minimizing it, i.e. hiding it completely), you could add some media queries to your CSS.
Try adding
#media screen and (max-width: 1200px) {
.about{
flex-direction: column;
}
(setting the px breakpoints for the size you want) and see if it works!
Currently the text headings which are inside a flexbox (the three divs) are not aligning with the main headings on the rest of the page.
See Image Here
The issue appears to only take place with the character length of the text headings inside the flexbox of three divs are not the same.
See Image of Alignment when character length is the same
I've unsuccessfully tried css alignments, but they do not appear to have an effect. My desired outcome for the three divs is something like this:
See successful reference alignment example
The code is here:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
max-width: 100vw;
list-style: none;
scroll-behavior: smooth;
}
body {
height: 100%;
margin: 0;
background-color: white;
font-family: Poppins;
min-height: 100vh;
}
a {
color: black;
}
/* ----------------------------------------------------------Landing Page -------------------------------------*/
.full-height-grow {
height: 100%;
display: flex;
flex-direction: column;
}
section {
display: flex;
height: 100vh;
width: auto;
max-width: 80vw;
min-width: 75vw;
justify-content: center;
align-items: center;
margin: 0 auto;
}
.about-container {
padding-top: 100px;
height: 100vh;
width: 90vw;
max-width: 90vw;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.about-img {
border-radius: 50%;
height: calc(80px + 40%);
width: auto;
}
.about-h1 {
font-family: 'Poppins', sans-serif;
color: rgb(255, 42, 95);
margin-top: 30px;
margin-right: -30px;
margin-left: -30px;
font-size:calc(12px + 0.8vw) ;
}
.about-h2 {
font-family: 'Poppins', sans-serif;
color: rgb(17, 17, 17);
margin-right: -30px;
margin-left: -30px;
font-size:calc(15px + 2vw) ;
font-weight: 500;
opacity: 0.9;
}
.about-desc {
font-family: Lora;
font-size:calc(10px + 1.2vw);
line-height: 1.8;
color: #888888;
text-align: center;
margin-left: 25vw;
margin-right: 25vw;
overflow:hidden;
z-index: 2;
width: auto;
}
.about-tasks-container {
align-self: center;
background-color: blanchedalmond;
max-width: 80vw;
width: 80vw;
display: flex;
justify-content: space-evenly;
text-align: center;
flex-direction: row;
flex-grow: 1;
}
.about-task-heading {
font-size: 80px;
}
.about-tasks-resources {
}
.about-tasks-learning {
}
<section class="about-section">
<div class="about-container" id="about">
<h2 class="about-h1"> ABOUT</h2>
<h3 class="about-h2">More About Me</h3>
<div class="about-tasks-container">
<div class="about-tasks-tutorials">
<h1 class="about-task-heading">Example</h1>
</div>
<div class="about-tasks-resources" >
<h1 class="about-task-heading">Exampler</h1>
</div>
<div class="about-tasks-learning">
<h1 class="about-task-heading">Examplers</h1>
</div>
</div>
</div>
</div>
</section>
(JSFiddle : https://jsfiddle.net/2cL5h4m6/9/)
Try this code
Idk if this is what you wanted but you can try it and you can see if it was the thing you looked for
* {
margin: 0;
padding: 0;
box-sizing: border-box;
max-width: 100vw;
list-style: none;
scroll-behavior: smooth;
}
body {
height: 100%;
margin: 0;
background-color: white;
font-family: Poppins;
min-height: 100vh;
}
a {
color: black;
}
/* ----------------------------------------------------------Landing Page -------------------------------------*/
.full-height-grow {
height: 100%;
display: flex;
flex-direction: column;
}
section {
display: flex;
height: 100vh;
width: auto;
max-width: 80vw;
min-width: 75vw;
justify-content: center;
align-items: center;
margin: 0 auto;
}
.about-container {
padding-top: 100px;
height: 100vh;
width: 90vw;
max-width: 90vw;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.about-img {
border-radius: 50%;
height: calc(80px + 40%);
width: auto;
}
.about-h1 {
font-family: 'Poppins', sans-serif;
color: rgb(255, 42, 95);
margin-top: 30px;
margin-right: -30px;
margin-left: -30px;
font-size:calc(12px + 0.8vw) ;
}
.about-h2 {
font-family: 'Poppins', sans-serif;
color: rgb(17, 17, 17);
margin-right: -30px;
margin-left: -30px;
font-size:calc(15px + 2vw) ;
font-weight: 500;
opacity: 0.9;
}
.about-desc {
font-family: Lora;
font-size:calc(10px + 1.2vw);
line-height: 1.8;
color: #888888;
text-align: center;
margin-left: 25vw;
margin-right: 25vw;
overflow:hidden;
z-index: 2;
width: auto;
}
.about-tasks-container {
align-self: center;
background-color: blanchedalmond;
max-width: 100vw;
width: 100vw;
display: flex;
justify-content: space-evenly;
text-align: center;
flex-direction: row;
flex-grow: 0;
}
.about-task-heading {
font-size: 30px;
}
.about-tasks-resources {
}
.about-tasks-learning {
}```
I have this div with some buttons in it:
I want to make it responsive, so at a certain screen size it has to look like this:
but at certain points, it looks like this:
or like this:
and I don't want that.
Most of the time I want it to look like in the first picture, and when the width of the viewport is less than 500px, it should look like in the second picture.
Here's the code:
#settings-content {
width: 100%;
min-height: 11rem;
border: 1px solid black;
border-radius: 25px;
margin-left: 1.5rem;
text-align: center;
box-sizing: content-box;
}
.settings-title {
display: inline-block;
border: 1px solid black;
border-radius: 1.5rem;
height: 2.5rem;
line-height: 2.1rem;
width: 95%;
text-align: center;
margin: 1rem 0 2rem 0;
}
.settings-buttons, .languages-content {
border: 1px solid black;
width: 95%;
text-align: center;
margin: 0 auto;
border-radius: 1.5rem;
margin-bottom: 1rem;
}
.settings-list {
display: flex;
flex-wrap: wrap;
margin: 1rem 0;
padding-left: 0;
column-gap: 20px;
justify-content: center;
}
.settings-item {
border: 1px solid #000;
flex: 1;
max-width: 150px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.settings-item::before {
content: "";
display: inline-block;
padding-top: 100%;
}
.languages-list {
height: 9rem;
display: flex;
justify-content: center;
align-content: center;
flex-wrap: wrap;
margin: 0;
}
.languages-item {
margin: 0 1rem;
}
#media (max-width: 500px)
{
.settings-item {
max-width: 100px;
flex: 1 50%;
}
}
<div id="settings-content">
<div class="settings-buttons">
<ul class="settings-list">
<li class="settings-item">Music</li>
<li class="settings-item">Sound</li>
<li class="settings-item">Info</li>
<li class="settings-item">Tutorials</li>
</ul>
</div>
</div>
How can I achieve the result that I want? I'm a beginner in Flexbox, I'd like an in-depth explanation of what is happening, please. :)
And why is my actual code not working? It works, but for some resolutions I get the 3rd and 4th layout and I don't want that.
Thanks :)
Remove flex: 1;, set item width in percents, then double it on small screens.
Alternative: You can put an extra element into your HTML with class that has flex-basis: 100%. Here is an article about wrapping in element with flex.
Modified code:
#settings-content {
width: 100%;
min-height: 11rem;
border: 1px solid black;
border-radius: 25px;
margin-left: 1.5rem;
text-align: center;
box-sizing: content-box;
}
.settings-title {
display: inline-block;
border: 1px solid black;
border-radius: 1.5rem;
height: 2.5rem;
line-height: 2.1rem;
width: 95%;
text-align: center;
margin: 1rem 0 2rem 0;
}
.settings-buttons, .languages-content {
border: 1px solid black;
width: 95%;
text-align: center;
margin: 0 auto;
border-radius: 1.5rem;
margin-bottom: 1rem;
}
.settings-list {
display: flex;
flex-wrap: wrap;
margin: 1rem 0;
padding-left: 0;
column-gap: 20px;
justify-content: center;
}
.settings-item {
border: 1px solid #000;
width: 20%;
max-width: 150px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.settings-item::before {
content: "";
display: inline-block;
padding-top: 100%;
}
.languages-list {
height: 9rem;
display: flex;
justify-content: center;
align-content: center;
flex-wrap: wrap;
margin: 0;
}
.languages-item {
margin: 0 1rem;
}
#media (max-width: 500px)
{
.settings-item {
width: 40%;
}
}
<div id="settings-content">
<div class="settings-buttons">
<ul class="settings-list">
<li class="settings-item">Music</li>
<li class="settings-item">Sound</li>
<li class="settings-item">Info</li>
<li class="settings-item">Tutorials</li>
</ul>
</div>
</div>
I'm having trouble aligning two elements in a flex box:
What I want to happen is to have the "help" div to the very right then just left of that the "XX" div. I'm new to flex containers usually floating one elements right after the other would give the desired affect. Does anyone know how I can achieve this?
<html>
<head>
<style>
body {
margin:0;
padding:0;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
#menuStrip {
position:relative;
border-style: solid;
border-width: 1px;
height:36px;
padding:0;
margin:0;
background-color:black;
}
#menuContainer {
position:relative;
background-color:grey;
border-style: solid;
border-width: 1px;
padding:0;
width:96%;
height:98%;
margin: 0 auto;
display: flex;
}
#hh {
position:relative;
display:flex;
align-self: center;
font-size:14px;
width:80px;
border-style: solid;
border-width: 1px;
height:50%;
margin-left:auto;
}
#pp {
position:relative;
display:flex;
height:70%;
width:36px;
align-self: center;
justify-content: center;
margin-left: auto;
background-color:white;
border-style: solid;
border-width: 1px;
padding:0;
}
</style>
</head>
<body>
<div id="menuStrip">
<div id="menuContainer">
<div id="hh">Help</div>
<div id="pp"> XX</div>
</div>
</body>
</html>
JUSTIFY CONTENT
You are looking for the property value flex-end used in justify-content. Also remove the margin-left: auto; as it is not needed.
body {
margin: 0;
padding: 0;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
#menuStrip {
position: relative;
border-style: solid;
border-width: 1px;
height: 36px;
padding: 0;
margin: 0;
background-color: black;
}
#menuContainer {
position: relative;
background-color: grey;
border-style: solid;
border-width: 1px;
padding: 0;
width: 96%;
height: 98%;
margin: 0 auto;
display: flex;
justify-content: flex-end;
}
#hh {
position: relative;
display: flex;
align-self: center;
font-size: 14px;
width: 80px;
border-style: solid;
border-width: 1px;
height: 50%;
}
#pp {
position: relative;
display: flex;
height: 70%;
width: 36px;
align-self: center;
justify-content: center;
background-color: white;
border-style: solid;
border-width: 1px;
padding: 0;
}
<div id="menuStrip">
<div id="menuContainer">
<div id="hh">Help</div>
<div id="pp">XX</div>
</div>
ORDER
To change the ordering like you ask in the comments, you will use the property order. It's pretty straight forward. The order default value of flex-items is 0. You can either use negative or positive values, such as -1, -2, 1, 2 etc.
You can either set this property in your first or second item, with different values depending which you prefer to change, they will both get the same result.
Declaring it in your first item using a positive value:
body {
margin: 0;
padding: 0;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
#menuStrip {
position: relative;
border-style: solid;
border-width: 1px;
height: 36px;
padding: 0;
margin: 0;
background-color: black;
}
#menuContainer {
position: relative;
background-color: grey;
border-style: solid;
border-width: 1px;
padding: 0;
width: 96%;
height: 98%;
margin: 0 auto;
display: flex;
justify-content: flex-end;
}
#hh {
position: relative;
display: flex;
align-self: center;
font-size: 14px;
width: 80px;
border-style: solid;
border-width: 1px;
height: 50%;
order: 1;
}
#pp {
position: relative;
display: flex;
height: 70%;
width: 36px;
align-self: center;
justify-content: center;
background-color: white;
border-style: solid;
border-width: 1px;
padding: 0;
}
<div id="menuStrip">
<div id="menuContainer">
<div id="hh">Help</div>
<div id="pp">XX</div>
</div>
Declaring it in the second one using a negative value:
body {
margin: 0;
padding: 0;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
#menuStrip {
position: relative;
border-style: solid;
border-width: 1px;
height: 36px;
padding: 0;
margin: 0;
background-color: black;
}
#menuContainer {
position: relative;
background-color: grey;
border-style: solid;
border-width: 1px;
padding: 0;
width: 96%;
height: 98%;
margin: 0 auto;
display: flex;
justify-content: flex-end;
}
#hh {
position: relative;
display: flex;
align-self: center;
font-size: 14px;
width: 80px;
border-style: solid;
border-width: 1px;
height: 50%;
}
#pp {
position: relative;
display: flex;
height: 70%;
width: 36px;
align-self: center;
justify-content: center;
background-color: white;
border-style: solid;
border-width: 1px;
padding: 0;
order: -1;
}
<div id="menuStrip">
<div id="menuContainer">
<div id="hh">Help</div>
<div id="pp">XX</div>
</div>
Simple order change interaction:
Note: Clicking the anchor element will change every odd flex item's order to -1.
body {
margin: 0;
}
a {
font-size: 2em;
position: absolute;
top: 30%;
left: 50%;
transform: translate(-50%, -30%);
background-color: white;
}
.flex-container {
counter-reset: flex-items;
height: 100vh;
background-color: peachpuff;
display: flex;
justify-content: space-around;
/* Default Value */
}
.flex-item {
counter-increment: flex-items;
background-color: gold;
}
.flex-item:nth-child(even) {
background-color: dodgerblue;
}
.flex-item::after {
content: counter(flex-items);
display: flex;
justify-content: center;
align-items: center;
height: 100%;
font-size: 3em;
}
.flex-container:target .flex-item:nth-child(odd) {
order: -1;
}
Change Order
<section id="flex-container" class="flex-container">
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
</section>
FURTHER EXPLANATION:
justify-content property accepts 5 different values:
flex-start, which is the default.
flex-end
center
space-between
space-around
flex-start
body{
margin: 0;
}
.flex-container {
counter-reset: flex-items;
height: 100vh;
background-color: peachpuff;
display: flex;
justify-content: flex-start; /* Default Value */
}
.flex-item {
counter-increment: flex-items;
flex: 0 0 30%;
background-color: gold;
}
.flex-item:nth-child(even) {
background-color: dodgerblue;
}
.flex-item::after {
content: counter(flex-items);
display: flex;
justify-content: center;
align-items: center;
height: 100%;
font-size: 3em;
}
<section class="flex-container">
<div class="flex-item"></div>
<div class="flex-item"></div>
</section>
flex-end
body{
margin: 0;
}
.flex-container {
counter-reset: flex-items;
height: 100vh;
background-color: peachpuff;
display: flex;
justify-content: flex-end;
}
.flex-item {
counter-increment: flex-items;
flex: 0 0 30%;
background-color: gold;
}
.flex-item:nth-child(even) {
background-color: dodgerblue;
}
.flex-item::after {
content: counter(flex-items);
display: flex;
justify-content: center;
align-items: center;
height: 100%;
font-size: 3em;
}
<section class="flex-container">
<div class="flex-item"></div>
<div class="flex-item"></div>
</section>
center
body{
margin: 0;
}
.flex-container {
counter-reset: flex-items;
height: 100vh;
background-color: peachpuff;
display: flex;
justify-content: center;
}
.flex-item {
counter-increment: flex-items;
flex: 0 0 30%;
background-color: gold;
}
.flex-item:nth-child(even) {
background-color: dodgerblue;
}
.flex-item::after {
content: counter(flex-items);
display: flex;
justify-content: center;
align-items: center;
height: 100%;
font-size: 3em;
}
<section class="flex-container">
<div class="flex-item"></div>
<div class="flex-item"></div>
</section>
space-between
body{
margin: 0;
}
.flex-container {
counter-reset: flex-items;
height: 100vh;
background-color: peachpuff;
display: flex;
justify-content: space-between;
}
.flex-item {
counter-increment: flex-items;
flex: 0 0 30%;
background-color: gold;
}
.flex-item:nth-child(even) {
background-color: dodgerblue;
}
.flex-item::after {
content: counter(flex-items);
display: flex;
justify-content: center;
align-items: center;
height: 100%;
font-size: 3em;
}
<section class="flex-container">
<div class="flex-item"></div>
<div class="flex-item"></div>
</section>
space-around
body{
margin: 0;
}
.flex-container {
counter-reset: flex-items;
height: 100vh;
background-color: peachpuff;
display: flex;
justify-content: space-around;
}
.flex-item {
counter-increment: flex-items;
flex: 0 0 30%;
background-color: gold;
}
.flex-item:nth-child(even) {
background-color: dodgerblue;
}
.flex-item::after {
content: counter(flex-items);
display: flex;
justify-content: center;
align-items: center;
height: 100%;
font-size: 3em;
}
<section class="flex-container">
<div class="flex-item"></div>
<div class="flex-item"></div>
</section>
SUMMARY:
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.flex-container {
counter-reset: flex-items;
background-color: peachpuff;
display: flex;
height: calc(20vh - .5em);
justify-content: flex-start;
margin-bottom: .5em;
position: relative;
}
.flex-container:nth-child(2) {
justify-content: flex-end;
}
.flex-container:nth-child(3) {
justify-content: center;
}
.flex-container:nth-child(4) {
justify-content: space-around;
}
.flex-container:nth-child(5) {
justify-content: space-between;
}
.flex-container::after {
position: absolute;
display: flex;
content: attr(data-justify-content);
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
font-size: 3em;
}
.flex-item {
counter-increment: flex-items;
flex: 0 0 20%;
background-color: gold;
}
.flex-item:nth-child(even) {
background-color: dodgerblue;
}
.flex-item::after {
content: counter(flex-items);
display: flex;
justify-content: center;
align-items: center;
height: 100%;
font-size: 3em;
color: rgba(0, 0, 0, .3);
}
<section class="flex-container" data-justify-content="flex-start">
<div class="flex-item"></div>
<div class="flex-item"></div>
</section>
<section class="flex-container" data-justify-content="flex-end">
<div class="flex-item"></div>
<div class="flex-item"></div>
</section>
<section class="flex-container" data-justify-content="center">
<div class="flex-item"></div>
<div class="flex-item"></div>
</section>
<section class="flex-container" data-justify-content="space-around">
<div class="flex-item"></div>
<div class="flex-item"></div>
</section>
<section class="flex-container" data-justify-content="space-between">
<div class="flex-item"></div>
<div class="flex-item"></div>
</section>
MORE INFO:
You can find more info in these resources:
Codrops
CSS Tricks
Flexbox Cheatsheet
Stack Overflow Michael_B's Flexbox Post
Playground:
Flexbox Froggy
Just wondering if anyone can help me to get 1st half and 2nd half on this codepen to display on the same line? I have tried display:inline; however this did not fix the issue.
http://codepen.io/EuanR/pen/BNEBvE
HTML:
<HTML>
<HEAD>
<title>Homepage</title>
</HEAD>
<HEADER>
<H1 id="landingpagelg">Header</H1>
<H2 id="landingpagesm">Sub Header</H2>
</HEADER>
<BODY>
<div class="footerwrapper">
<div class="BFS">
<P>1st half</P>
</div>
<div class="BLFS">
<P>2nd half</P>
</div>
</div>
</script>
</html>
CSS:
a {
text-decoration: none;
}
body {
background-color: #161616;
}
header {
height: 100%;
background-image: url(http://i.imgur.com/11nVLmd.jpg);
background-size: cover;
background-position: center;
margin-bottom: 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
text-align: center
}
#landingpagelg {
font-family: Caviar Dreams;
font-size: 42px;
color: #FFF;
letter-spacing: 1px
}
#landingpagesm {
font-family: Caviar Dreams;
font-size: 21px;
color: #FFF
}
#CMSub {
min-width: 75px;
}
a {
color: #000;
}
a.hover {
color: 0000EE;
}
::selection {
background: #FFB870;
/*#CCCCCC*/
}
::-moz-selection {
background: #FFB870;
}
img::selection {
background: transparent
}
img::-moz-selection {
background: transparent
}
input {
width: 150px;
border: 1px solid;
border-radius: 6px;
height: 25px;
padding: 4px;
}
textarea {
border: 1px solid;
max-width: 500px;
max-height: 250px;
border-radius: 5px;
width: 250px;
height: 125px;
}
#github {
padding-right: 5px;
}
.footerwrapper {
width: 100%;
}
.BFS {
height: 150px;
width: 50%;
background-color: #161616;
}
.BLFS {
height: 150px;
width: 50%;
background-color: #99CCFF;
}
.footerwrapper {
width: 100%;
display:flex;
}
Display Flex solves the issue
.footerwrapper {
width: 100%;
border: 1px solid black;
overflow: hidden;
}
.BFS {
height: 150px;
background-color: #161616;
width: 50%;
float:left; /* add this */
}
.BLFS {
height: 150px;
width: 50%;
background-color: #99CCFF;
float:left; /* add this */
}
Hope this helps
If you don't want to edit your CSS, then simply add the following lines
.footerwrapper {
font-size: 0; /*Removes white space in inline-block elements*/
}
.BFS {
box-sizing: border-box;
display: inline-block;
}
.BLFS {
box-sizing: border-box;
display: inline-block;
}
Make sure you set the font-size in every element that is a child of .footerwrapper
Use
.BFS {float:left;}
.BLFS {float:right;}
Alternatively put the BLFS element first in your HTML and float it to the right. Then the .BFS{float:left;} is unnecessary since it will fill on the left anyway.