I have a footer on the desktop screen, what looks like this:
but on tablets (width <= 960px) I need to create something like this using media queries:
The problem is, that i dont understand how to place divs correctly without using empty div
here is my code for desktop
jsx:
<footer>
<div className="footer-content">
<div className="col">1</div>
<div className="col">2</div>
<div className="col">3</div>
<div className="col">4</div>
<div className="col">5</div>
</div>
<div className="another-stuff">
another stuff
</div>
</footer>
and css:
.footer-content {
display: flex;
justify-content: space-between;
margin-bottom: 7%;
}
.col {
display: flex;
flex-direction: column;
}
Tried to use
.footer-content{
display: flex;
flex-wrap: wrap;
}
.footer-content .col {
flex: 1 0 33%;
}
but divs 4 and 5 was moved in the middle of the page.
use css flex property which is "nowrap".
Related
I'm using grid to achieve this design (desktop is 1st image, mobile is 2nd image):
Problem is, the two left div text isn't divided evenly so the text is skewed to the top, rather than dynamically in the center. Tried using flex, but it doesn't work because of the mobile design.
You have multiple opportunities to achieve this. I think using grid system is quite good idea. But if you like simple solution you can use media queries.
.flex {
display: flex;
justify-content: center;
gap: 10%;
}
.txt {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.mobile {
display: none;
}
.desktop {
display: flex;
}
#media (max-width: 60rem) {
.mobile {
display: block;
}
.desktop {
display: none;
}
}
<main class="flex">
<div class="txt desktop">
<h1 class="main-title">Main title</h1>
<h2 class="subtitle">Subtitle</h2>
</div>
<div>
<h1 class="main-title mobile">Main title</h1>
<img src="https://via.placeholder.com/200x300"
class="hero-image">
<h2 class="subtitle mobile">Subtitle</h2>
</div>
</main>
My goal is to have three responsive columns using flexbox. Currently, when resized, the columns can go left to right or up to down. I'm trying to make the three column layout go into a two column layout with the third column centered below the first two. However, the first and second columns don't go next to each other.
I google this and looked at other examples and tried to implement them, but I'm not sure why it still isn't working.
How can I fix this? Thanks in advance.
Link to my codepen: https://codepen.io/sbarclay7/pen/ZEQZvaj
html {
height: 100%;
}
body {
color: #FFFFFF;
text-align: center;
}
* { box-sizing: border-box; }
.wrapper {
padding-top:2.1rem;
display: flex;
padding-bottom:2.2rem;
max-width:40%;
justify-content: center;
margin:auto;
}
.category {
display: flex;
flex-direction: column;
width: 16rem;
flex: 1;
background-color:#203a8a;
border-radius: 0.7rem;
border: 1.5px solid rgb(5, 30, 37);
}
.flex {
display: flex;
flex-wrap: wrap;
}
#media (max-width: 1000px) {
.wrapper {
flex-direction: column;
flex-flow: column wrap;
}
.category {
width: 49%;
}
}
#media (max-width: 700px) {
.wrapper {
flex-direction: column;
}
.category {
width: 100%;
}
}
<div class="wrapper flex">
<div class="category" style="flex-basis: 4rem;" >
<h3>Header 1</h3>
<p>a</p>
</div>
<div class="category"style="flex-basis: 4rem;" >
<h3>Header 2</h3>
<p>a</p>
</div>
<div class="category"style="flex-basis: 4rem;">
<h3>Header 3</h3>
<p>a</p>
</div>
</div>
I noticed you modified the flexibility of the flex property by setting a flex: column property using media queries. This is currently affecting the resized display you are getting.
Remove the flex property added in the media queries and it should work just fine.
I'm trying to create "cards" for my team. However, the look weird because the dimensions are different.
My set up looks like this:
<div class="card-wrapper">
<div class="card">Card1</div>
<div class="card">Card2</div>
</div>
My css looks like this now:
.card-wrapper
{
display: flex;
align-items: center;
align-content: center;
flex-direction: row;
}
.card
{
width: 30rem;
background: #000;
align-items: center;
justify-content: center;
}
I can't seem to find a way to make the height the same for all cards. I saw here on stackoverflow that I should:
.card-wrapper {
display:flex;
}
.card {
flex:1;
}
But that does not seem to work. Any suggestions?
Here is a picture of what it currently looks like:
CARDS NOW
i think is because you use
align-items: center
just remove it should have same height for these two card
https://stackblitz.com/edit/typescript-sevm5b
Setting a flex-basis would be helpful. Moreover you don't need the align-items and align-content for this.
* { box-sizing: border-box; }
.container {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
height:20vh
}
.card {
box-shadow: 0 0 4px rgba(0,0,0,0.4);
flex: 0 1 33.33%;
padding: 15px; /* gutter width */
}
<div class="container">
<div class="card"><br></div>
<div class="card"><br></div>
<div class="card"><br><br><br><br><br></div>
</div>
I'm trying to move a picture from the left to the right, and my H3 element from the right to the left.
I recently just finished learning about flexbox via teamtreehouse.com, but doing it on my own I seem to have become stuck!
Anything I seem to write to do with flex just doesn't seem to work, so I'm presuming I've done something majorly wrong!
#about {
margin-top: 50px;
margin-left: 30px;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
<div id="about">
<section>
<img src="img/meprofile.jpg" alt="Photograph of" class="profile-photo">
<h2 class="aboutme">About</h2>
<p>Hi,.</p>
<p>If you'd like to follow me on Twitter, my username is #leehoward05.</p>
</section>
</div>
Your intended flex parent is too high up in the DOM tree. The flex parent must be one level above the children. Try this:
#about > section {
margin-top: 50px;
margin-left: 30px;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
.aboutme {
order: 0;
}
.profile-photo {
order: 3;
}
https://jsfiddle.net/8kcf5snm/
Hopefully this isn't an unsolved task, but I'm trying to vertically justify an unknown (ish) number of divs inside of a container.
Each div should be equal distances from each other, and, additionally, the same distance from the edges. (Assuming the last part can be accomplished using ghost elements before and after)
The divs will each fill the width of the container, and the container is a set height, but the number of elements inside the container is unknown.
I'm assuming it can be done using Flexbox to some degree, but have been unsuccessful in my attempts thus far.
Yep, flexbox is the simplest way to do it.
On the container element:
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
}
On the child elements:
.container div {
flex: 1;
width: 100%
}
For the spacing between the elements, just add padding to the container and bottom margins to the children.
The style would look like this:
.container {
/* Same as above, and */
padding: 20px;
}
.container div {
/* Same as above, and */
margin-bottom: 20px;
}
.container div:last-of-type{
margin-bottom: 0;
/* So that spacing is even at bottom and top of container */
}
(I was typing this when you posted your answer, so I put it up anyway)
Fiddle
I use justify-content:space-evenly.
HTML:
div.container {
display: flex;
}
div.one_item_container {
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
<div class="container">
<div class="one_item_container">
<img height="30" src="hello.jpeg" style="background-color:lightblue;" />
</div>
<div class="one_item_container">
<img height="50" src="hello2.jpeg" style="background-color:lightblue;" />
</div>
<div class="one_item_container">
<img height="40" src="hello2.jpeg" style="background-color:lightblue;" />
</div>
</div>
As usual, no matter how long I search, I find the answer only immediately after I ask the question. :D
For those curious, or for my own future reference: Flexbox's justify DOES work, you just need a few more options:
HTML:
<div id="outer-container">
<div class="inner-element"></div>
<div class="inner-element"></div>
<div class="inner-element"></div>
<div class="inner-element"></div>
<div class="inner-element"></div>
<div class="inner-element"></div>
<div class="inner-element"></div>
</div>
CSS:
#outer-container {
height: 250px;
width: 200px;
background: red;
display: flex;
justify-content: space-around;
flex-direction: column;
}
.inner-element {
width: 200px;
height: 10px;
background: blue;
}
https://css-tricks.com/almanac/properties/j/justify-content/
https://jsfiddle.net/WW3bh/