I am trying to get two containers to sit side by side when media query is applied and cannot seem to achieve that goal. This is a simple header with three columns and a footer. The goal is to have both Nav and Aside on the same row side by side. Whilst I can get the two row reduced in size I cannot get it to wrap.
Many thanks in advance
body {
font: 24px Helvetica;
background: #999999;
}
#main {
min-height: 100vh;
margin: 0px;
padding: 0px;
display: flex;
flex-flow: row;
}
#main > article {
margin: 4px;
padding: 5px;
border: 1px solid #cccc33;
border-radius: 7pt;
background: #dddd88;
flex: 3 1 60%;
order: 2;
}
#main > nav {
margin: 4px;
padding: 5px;
border: 1px solid #8888bb;
border-radius: 7pt;
background: #ccccff;
flex: 1 6 20%;
order: 1;
}
#main > aside {
margin: 4px;
padding: 5px;
border: 1px solid #8888bb;
border-radius: 7pt;
background: #ccccff;
flex: 1 6 20%;
order: 3;
}
header,
footer {
display: block;
margin: 4px;
padding: 5px;
min-height: 100px;
border: 1px solid #eebb55;
border-radius: 7pt;
background: #ffeebb;
}
/* Too narrow to support three columns */
#media all and (max-width: 640px) {
#main,
#page {
flex-direction: column;
}
#main > aside,
#main > nav {
width: 47%;
order: 1;
}
#main > nav,
#main > aside,
header,
footer {
min-height: 50px;
max-height: 50px;
}
}
<body>
<header>header</header>
<div id='main'>
<article>article</article>
<nav>nav</nav>
<aside>aside</aside>
</div>
<footer>footer</footer>
</body>
flex-direction: column; was not nessisary once I added flex-flow: row wrap; and min-height: auto;
You'll notice I also gave the <article> tag a min-height just so the page still looked ok.
body {
font: 24px Helvetica;
background: #999999;
}
#main {
min-height: 100vh;
margin: 0px;
padding: 0px;
display: flex;
flex-flow: row;
}
#main > article {
margin: 4px;
padding: 5px;
border: 1px solid #cccc33;
border-radius: 7pt;
background: #dddd88;
flex: 3 1 60%;
order: 2;
}
#main > nav {
margin: 4px;
padding: 5px;
border: 1px solid #8888bb;
border-radius: 7pt;
background: #ccccff;
flex: 1 6 20%;
order: 1;
}
#main > aside {
margin: 4px;
padding: 5px;
border: 1px solid #8888bb;
border-radius: 7pt;
background: #ccccff;
flex: 1 6 20%;
order: 3;
}
header,
footer {
display: block;
margin: 4px;
padding: 5px;
min-height: 100px;
border: 1px solid #eebb55;
border-radius: 7pt;
background: #ffeebb;
}
/* Too narrow to support three columns */
#media all and (max-width: 640px) {
#main {
flex-flow: row wrap;
min-height: auto;
}
#main > aside,
#main > nav {
order: 1;
width: 47%;
}
#main > nav,
#main > aside,
header,
footer {
min-height: 50px;
}
#main > article {
min-height: 300px;
}
}
<body>
<header>header</header>
<div id='main'>
<article>article</article>
<nav>nav</nav>
<aside>aside</aside>
</div>
<footer>footer</footer>
</body>
Hopefully, it's what you're looking for.
Related
so I'm trying to create my blog using the react framework, but I'm facing an issue here.
I really have been trying to tweaks settings on the css, html or even try to switch to grid instead of flexbox but I can't figure out how to make the "fixed" navbar detected by the flexbox.
Currently, the navbar works fine I guess, but the content that is supposed to be on the right, is not taking the place it should, it's taking the entire screen instead of the rigth section next to the navbar.
Some help would be highly appreciated !
body {
overflow: hidden;
height: 100vh;
top: 0;
left: 0;
margin: 0;
}
/*left box -Navbar*/
.nav-tab-text{
font-size: 1.6em;
display: block;
padding: 00px 0px 50px 0px;
text-align: center;
list-style-type: none;
display: flex;
}
.nav-tab a {
display: block;
text-align: center;
padding: 15px 18px;
text-decoration: none;
font-size: 18px;
color: aliceblue;
}
.nav-tab {
background-color: blue;
height: 100vh;
width: 18%;
border: 3px solid red;
position: fixed;
}
/*Right box - Home content*/
.home-content-container {
width: 100%;
height: 100vh;
border: 5px solid green;
}
.home-content-title {
text-align: center;
font-size: 1.7em;
text-decoration: underline;
text-decoration-thickness: 3px;
}
.home-content-featured{
border: 3px solid purple;
width: 50%;
height: 50%;
align-self: center;
margin-top: 3%;
}
.test{
display: flex;
}
function Navbar() {
return (
<div className="flex-container">
{/*left box - Navbar*/}
<nav className="nav-tab">
Home
Articles
Archives
About
</nav>
{/*Right box - Home content*/}
<div className="home-content-container">
<div className="home-content-title">
<h3>Name</h3>
</div>
<div className="home-content-featured">
<p>1</p>
</div>
</div>
<div className="test">
<p>2</p>
</div>
</div>
);
}
export default Navbar;
import Navbar from "./components/Navbar";
function App() {
return (
<div>
<Navbar />
</div>
);
}
export default App;
body {
overflow: hidden;
top: 0;
left: 0;
margin: 0;
}
/*left box -Navbar*/
.flex-container{
display: flex;
flex-flow: row;
}
.nav-tab a {
display: block;
text-align: center;
padding: 15px 18px;
text-decoration: none;
font-size: 18px;
color: aliceblue;
}
.nav-tab {
background-color: blue;
height: 100vh;
width: 18%;
border: 3px solid red;
}
/*Right box - Home content*/
.home-content-container {
width: 100%;
height: 100vh;
border: 5px solid green;
display: flex;
flex-direction: column-reverse;
}
.home-content-title {
text-align: center;
font-size: 1.7em;
text-decoration: underline;
text-decoration-thickness: 3px;
}
.home-content-featured{
border: 3px solid purple;
width: 50%;
height: 50%;
margin-top: 3%;
align-self: center;
}
This question already has answers here:
A grid layout with responsive squares
(5 answers)
Closed 5 years ago.
In process of learning flexbox, and confused about having perfect CSS circles that are responsive. How do I do that? As it stands, my current code has circle1, circle2, and circle3 at 100 width, and height. I don't want to hard-code their height but rather make it responsive. Is there a way to have a perfect circle in %? So it scales each time the browser is resized?
Or are media queries the only option to fix this?
Thank you for your help.
* {
box-sizing: border-box;
}
html, body {
height: 100%;
font-family: sans-serif;
font-weight: 100;
}
body {
display: flex;
margin: 0;
flex-direction: column;
}
main {
display: flex;
flex: 1 0 100%;
/*for content and sidebar */
flex-direction: row;
}
/* main */
#content {
flex: 1 0 80%;
/* for header/logo and description */
display: flex;
flex-direction: column;
}
#description img {
display: block;
}
#header {
flex: 1 0 5%;
padding: 10px;
/* for test */
display: flex;
justify-content: center;
}
#test {
display: flex;
flex-direction: row;
}
#header h1 {
text-align: center;
font-size: 5em;
padding: 0;
margin: 0;
font-family: 'Satisfy', cursive;
}
h1 {
font-family: 'Satisfy', cursive;
}
#description {
flex: 1 0 10%;
padding: 30px;
display: flex;
}
#description p {
padding-left: 20px;
font-size: 20px;
}
#description img {
width: 250px;
height: 250px;
border-radius: 50%;
border: 6px solid #db6525;
border: 6px solid #00B2AC;
}
#name {
font-size: 35px;
color: #db6525;
font-family: 'Satisfy', cursive;
}
#test img {
display: inline;
vertical-align: text-top;
width: 100px;
height: 100px;
/* for the following image and description */
display: flex;
flex-direction: row;
align-content: center;
align-items: center;
}
#sidebar {
flex: 1 0 20%;
/* background-color: green; */
text-align: center;
line-height: 90%;
/* for sidebar contents */
display: flex;
flex-direction: column;
}
#js {
flex: 1 0 33.33333%;
/* background-color: red; */
background-color: #db6525;
border: 20px solid #00B2AC;
padding: 10px;
}
#js h1 {
font-size: 50px;
}
#forms {
flex: 1 0 33.33333%;
/* background-color: gray; */
background-color: #db6525;
border: 20px solid #00B2AC;
padding: 10px;
}
#forms h1 {
font-size: 50px;
}
#sites {
flex: 1 0 33.33333%;
/* background-color: Chartreuse; */
background-color: #db6525;
border: 20px solid #00B2AC;
padding: 10px;
}
#sites h1 {
font-size: 50px;
}
.circles {
flex: 0 0 5%;
/* for circles within */
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
.circle1 {
flex: 0 1 33.33333%;
display: flex;
justify-content: center;
}
.circle1 h1{
font-size: 12px;
color: #fff !important;
background-color: #db6525;
border: 4px solid #00B2AC;
border-radius:50%;
height: 100px;
width: 100px;
text-align: center;
vertical-align: middle;
}
.circle2 {
flex: 0 1 33.33333%;
display: flex;
justify-content: center;
}
.circle2 h1 {
font-size: 12px;
color: #fff !important;
background-color: #db6525;
border: 4px solid #00B2AC;
border-radius:50%;
height: 100px;
width: 100px;
text-align: center;
vertical-align: middle;
}
.circle3 {
flex: 0 1 33.33333%;
display: flex;
justify-content: center;
}
.circle3 h1 {
font-size: 12px;
color: #fff !important;
background-color: #db6525;
border: 4px solid #00B2AC;
border-radius:50%;
height: 100px;
width: 100px;
text-align: center;
vertical-align: middle;
}
<main>
<section id="content">
<article id="header">
<section id="test">
<h1>My Website</h1>
</section>
</article>
<article id="description">
<img src='images/profilePic.png' />
<p></p>
</article>
<article class="circles">
<div class="circle1">
<h1>Twitter</h1>
</div>
<div class="circle2">
<h1>Blog</h1>
</div>
<div class="circle3">
<h1>Contact</h1>
</div>
</article>
</section>
<section id="sidebar">
<article id="js">
<h1>Javascript</h1>
<p>Mini JS Projects</p>
<p class="subtitle">Work in progress
</article>
<article id="forms">
<h1>Free Forms</h1>
<p>Feel free to download the forms</p>
</article>
<article id="sites">
<h1>Portfolio</h1>
<p>Combination of previous work and additional sites</p>
</article>
</section>
</main>
The question now is How to have a perfect responsive css square? Because when you have a square, you will easily have a circle with border-radius: 50%. Now you can found so many solution for it in SO. Here is a nice solution with flexbox item.
.flex-container {
padding: 0;
margin: 0;
display: flex;
}
.flex-item {
background: tomato;
margin: 5px;
color: white;
flex: 1 0 auto;
border-radius: 50%;
}
.flex-item:before {
content:'';
float:left;
padding-top:100%;
}
<div class="flex-container">
<div class="flex-item ">
</div>
<div class="flex-item ">
</div>
<div class="flex-item ">
</div>
</div>
Updated answer
I reworked the flex containers to a minimal working example. The flex-items should all be set to
flex: 1 1 auto /* flex-grow flex-shrink flex-basis */
This allows the circle h1 flex-items to grow and shrink as necessary. It might be necessary to use js to obtain the height of a circle from its expanded width when you apply the example to your code.
Hope this helps.
html,
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.circles {
/* for circles within */
display: flex;
justify-content: center;
height: 100%;
width: 100%;
}
.circle1,
.circle2,
.circle3 {
display: flex;
flex: 1 1 auto;
width: 33vw;
height: 33vw;
}
.circle1 h1,
.circle2 h1,
.circle3 h1 {
flex: 1 1 auto;
width: 100%;
height: 100%;
font-size: 12px;
color: #fff !important;
background-color: #db6525;
border: 4px solid #00B2AC;
border-radius: 50%;
text-align: center;
vertical-align: middle;
}
<article class="circles">
<div class="circle1">
<h1>Twitter</h1>
</div>
<div class="circle2">
<h1>Blog</h1>
</div>
<div class="circle3">
<h1>Content</h1>
</div>
</article>
I would like to know if there is a way to do these borders only using CSS in a way that they follow this shape:
I am trying to use CSS pseudo-elements ::after and ::before but I can't feel a kind of gap between divs. Any suggestion?
You can use pseudoelements to created rounded fragments and "clipped" borders.
.flex {
display: flex;
flex-direction: column;
align-items: flex-end;
}
.flex > * {
height: 50px;
position: relative;
display: flex;
align-items: center;
}
.flex > *:before {
content: "";
position: absolute;
display: inline-block;
top: 10px;
bottom: 0px;
left: -90px;
width: 90px;
border-right: 2px solid red;
border-bottom: 2px solid red;
border-bottom-right-radius: 10px;
}
.flex > *:after {
content: "";
position: absolute;
display: inline-block;
top: -2px;
height: 10px;
left: 0px;
width: 10px;
border-left: 2px solid red;
border-top: 2px solid red;
border-top-left-radius: 10px;
}
.flex > .one {
width: 100px;
}
.flex > .two {
width: 200px;
}
.flex > .three {
width: 300px;
}
.flex > .four {
width: 400px;
}
.degrees {
/* circle styles */
width: 30px;
height: 30px;
border-radius: 50%;
border: 1px solid red;
/* styles for centering */
display: flex;
align-items: center;
justify-content: center;
margin-left: 15px;
}
<div class="flex">
<div class="one">
<div class="degrees">1°</div>
</div>
<div class="two">
<div class="degrees">2°</div>
</div>
<div class="three">
<div class="degrees">3°</div>
</div>
<div class="four">
<div class="degrees">4°</div>
</div>
</div>
These are styles. Therefore in tag style="-moz-border-radius:5px;"
input[type=email] {
-moz-border-radius: 5px;
border-radius: 5px;
border: solid 1.4px black;
padding: 5px;
padding: 7px 7px 7px 7px;
max-width: 300px;
width: 80%;
}
I just want the 2nd div to display a bottom border. I either get both divs displaying a bottom border or none at all.
.container {
width: 75%; overflow: hidden;
border: 0;
}
.container div:nth-child(1) {
width: auto; float: left; height: 25px;
padding: 5px 20px;
background-color: white;
}
.container div:nth-child(2) {
margin-left: auto; height: 25px;
padding: 5px 20px;
background-color: ghostwhite;
border-bottom: 1pt solid black;
}
<div class="container">
<div>Div Left</div><div>Div Right</div>
</div>
Use display:inline-block, instead of float as float allows the second div to occupy space behind the first.
.container {
width: 75%;
overflow: hidden;
border: 0;
}
.container div:nth-child(1) {
width: auto;
height: 25px;
padding: 5px 20px;
background-color: white;
display: inline-block;
}
.container div:nth-child(2) {
margin-left: auto;
height: 25px;
padding: 5px 20px;
background-color: ghostwhite;
border-bottom: 1pt solid black;
display: inline-block;
}
<div class="container">
<div>Div Left</div>
<div>Div Right</div>
</div>
Im copying this Gensis Theme for CSS practice: http://my.studiopress.com/themes/daily-dish/#demo-full
I am now having an issue, since one of the black boxes exceeds its parent-Box.
The attribute causing this is the following code
.heading{
padding-left: 2em;
however I want this padding. How do I make the black background stop at the end of the parent box(id='right_1') and maintain the left padding?
*You have to scroll to the right when you run the snippet to see the issue
*{
margin: 0 auto;
}
body{
margin: 0 auto;
background-image: url('background.png');
}
.heading{
padding-left: 2em;
border: 1px solid green;
font-size: 1em;
display: flex;
width: 100%;
align-items: center;
color: white;
background-color: black;
height: 40px;
}
header{
padding: 70px;
display: flex;
flex-direction: column;
align-items: center;
}
#wrapper{
border: 1px solid lightgrey;
padding-left: 40px;
padding-right: 40px;
margin: auto;
width: 960px;
height: 2000px;
background: white;
}
main{
display: flex;
border: 1px solid red;
}
.blackbox{
}
#left {
width: 100%;
display: flex;
height: 1000px;
border: 1px solid black;
}
#left_1{
display: flex;
width: 100%;
}
#right {
margin-left: 5%;
width: 30%;
display: flex;
border: 1px solid black;
}
#right_1{
width: 100%;
}
<main>
<section id='left'>
<section id='left_1'>
<h2 class='heading'>Featured Dish</h2>
</section>
</section>
<aside id='right'>
<aside id='right_1'>
<h2 class='heading'>About the Author</h2>
</aside>
</aside>
</main>
</div>
You can add box-sizing:border-box to the .heading element.
This way the width and height properties include the padding.
CSS would be:
.heading {
padding-left: 2em;
border: 1px solid green;
font-size: 1em;
display: flex;
width: 100%;
align-items: center;
color: white;
background-color: black;
height: 40px;
box-sizing: border-box; // Add box-sizing: border-box
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
Hope this helps :)
You can solve this issue making box-sizing: border-box;
Try below CSS
*{
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
JSFIDDLE DEMO
Read more about box-sizing