I have two side by side divs but can't seem to figure how to make them responsive.
Looking for the right box to fall under the left box at 600px or lower, maintaining all of the other centering that I've done inside the divs.
Each side-by-side div has class .div-seller-resources-left and .div-seller-resources-right, respectively.
I'm using a media screen of 600px already for the height of each text box so I'll use 600 as the breakpoint for this too.
Have attached photos of what it does in the normal size browser, and what it looks like on a smaller screen. As you can tell, the smaller screen just crunches as best it can to fit all of the content on one page.
/* formats the seller-resources page */
.div-header-seller-resources{
font-size:30px;
line-height:32px;
margin-bottom:10px;
}
.div-detail-seller-resources{
font-size:20px;
line-height:22px;
margin-bottom:45px;
}
/*sets the height of the div so each text box is the same size no matter how much text*/
.seller-resources-height{
height: 125px;
}
/*main container of two side by side boxes*/
.div-main-container-seller-resources{
width:100%;
margin-top:30px;
text-align: center;
display: flex;
justify-content: center;
}
/*div under main container, containing both right and left seller resourcs */
.seller-resources-inner{
display: flex;
flex-direction:row;
}
/*margin here centeres all the content within the div*/
.div-seller-resources-left{
width: 300px;
display: flex;
text-align:center;
margin:0px auto;
}
/*margin here centeres all the content within the div*/
.div-seller-resources-right{
width: 350px;
display: flex;
text-align:center;
margin:0px auto;
}
/* sets the text box screens taller at smaller screens so they don't overlap */
#media screen and (max-width: 600px) {
.seller-resources-height{
height:200px;
}
}
#media screen and (max-width: 600px) {
div-seller-resources-left .div-seller-resources-left{
width:100%;
}
}
<div class="div-main-container-seller-resources">
<div class="seller-resources-inner">
<div class="div-seller-resources-left" style="display: inline-block;">
<div class="seller-resources-height">
<div class="div-header-seller-resources">How Yodega Works</div>
<div class="div-detail-seller-resources">Learn about how Yodega works for sellers</div>
</div>
<div class="clear"></div>
<div class="seller-resources-height">
<div class="div-header-seller-resources">Referrals</div>
<div class="div-detail-seller-resources">Refer another business to reduce your fees</div>
</div>
<div class="clear"></div>
<div class="seller-resources-height">
<div class="div-header-seller-resources">How to Sell with Yodega</div>
<div class="div-detail-seller-resources">Learn the best ways to promote your Yodega store</div>
</div>
<div class="clear"></div>
</div>
<div class="div-seller-resources-right" style="display: inline-block;">
<div class="seller-resources-height">
<div class="div-header-seller-resources">Setting Up Your Store</div>
<div class="div-detail-seller-resources">Detailed instructions on how to build your store</div>
</div>
<div class="clear"></div>
<div class="seller-resources-height">
<div class="div-header-seller-resources">Advanced Shipping & Product Options</div>
<div class="div-detail-seller-resources">Variable Shipping Costs, Add Product Details and More</div>
</div>
<div class="clear"></div>
<div class="seller-resources-height">
<div class="div-header-seller-resources">Order Management, Seller Dashboard & Payment</div>
<div class="div-detail-seller-resources">Detailed information on how to manage and fill orders and payments</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
I would suggest to use the flex-wrap property. In this case you can force the elements into a single column. (See MDN Docs)
Just apply flex-wrap: wrap; to the .seller-resources-inner class (See snippet below).
/* formats the seller-resources page */
.div-header-seller-resources {
font-size: 30px;
line-height: 32px;
margin-bottom: 10px;
}
.div-detail-seller-resources {
font-size: 20px;
line-height: 22px;
margin-bottom: 45px;
}
/*sets the height of the div so each text box is the same size no matter how much text*/
.seller-resources-height {
height: 125px;
}
/*main container of two side by side boxes*/
.div-main-container-seller-resources {
width: 100%;
margin-top: 30px;
text-align: center;
display: flex;
justify-content: center;
}
/*div under main container, containing both right and left seller resourcs */
.seller-resources-inner {
display: flex;
flex-direction: row;
}
/*margin here centeres all the content within the div*/
.div-seller-resources-left {
width: 300px;
display: flex;
text-align: center;
margin: 0px auto;
}
/*margin here centeres all the content within the div*/
.div-seller-resources-right {
width: 350px;
display: flex;
text-align: center;
margin: 0px auto;
}
/* sets the text box screens taller at smaller screens so they don't overlap */
#media screen and (max-width: 600px) {
.seller-resources-height {
height: 200px;
}
.seller-resources-inner {
flex-wrap: wrap;
}
}
#media screen and (max-width: 600px) {
div-seller-resources-left .div-seller-resources-left {
width: 100%;
}
}
<div class="div-main-container-seller-resources">
<div class="seller-resources-inner">
<div class="div-seller-resources-left" style="display: inline-block;">
<div class="seller-resources-height">
<div class="div-header-seller-resources">How Yodega Works</div>
<div class="div-detail-seller-resources">Learn about how Yodega works for sellers</div>
</div>
<div class="clear"></div>
<div class="seller-resources-height">
<div class="div-header-seller-resources">Referrals</div>
<div class="div-detail-seller-resources">Refer another business to reduce your fees</div>
</div>
<div class="clear"></div>
<div class="seller-resources-height">
<div class="div-header-seller-resources">How to Sell with Yodega</div>
<div class="div-detail-seller-resources">Learn the best ways to promote your Yodega store</div>
</div>
<div class="clear"></div>
</div>
<div class="div-seller-resources-right" style="display: inline-block;">
<div class="seller-resources-height">
<div class="div-header-seller-resources">Setting Up Your Store</div>
<div class="div-detail-seller-resources">Detailed instructions on how to build your store</div>
</div>
<div class="clear"></div>
<div class="seller-resources-height">
<div class="div-header-seller-resources">Advanced Shipping & Product Options</div>
<div class="div-detail-seller-resources">Variable Shipping Costs, Add Product Details and More</div>
</div>
<div class="clear"></div>
<div class="seller-resources-height">
<div class="div-header-seller-resources">Order Management, Seller Dashboard & Payment</div>
<div class="div-detail-seller-resources">Detailed information on how to manage and fill orders and payments</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
Related
I have 2 divs. In the div on the right has a text. This text has to to be allways in the middle of the screen. Also the text is never allowed to leave the box. I want it responsive. So it works on pc / tablet / phone, etc.
Here my jsfiddle:
https://jsfiddle.net/ourn15f8/106/
.screen-1 {
width: 500px;
display: flex;
}
.div-1 {
background-color: green;
width: 100px;
}
.div-2 {
background-color: red;
width: 400px;
text-align: center;
}
Total Width = Screen Width
<br><br>
Situation:
<div class="screen-1">
<div class="div-1">logo</div>
<div class="div-2">text</div>
</div>
Wanted:
<div class="screen-1">
<div class="div-1" style="position: absolute">logo</div>
<div class="div-2" style="width: 500px">text</div>
</div>
<div class="screen-1" style="width: 400px">
<div class="div-1" style="position: absolute">logo</div>
<div class="div-2" style="width: 300px">text</div>
</div>
<div class="screen-1" style="width: 300px">
<div class="div-1" style="position: absolute">logo</div>
<div class="div-2" style="width: 200px">text</div>
</div>
Text in the middle of screen
<br><br>
Also when screen to small, I want this:
<div class="screen-1" style="width: 150px">
<div class="div-1">logo</div>
<div class="div-2" style="width: 50px">text</div>
</div>
"text" is never allowed to leave the div
<br><br>
Info:<br>
I dont want to use position absolute. The divs have to by dynamic so it works on pc and phone.
You can use grid to make 3 boxes, each 1fr so they're evenly spaced then put your logo in the left one and the content in the middle one. You can then use flexbox to put the text div in to the middle of the centre div which is essentially the centre of the screen.
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
background-color: red;
}
.logo {
background-color: green;
width: 200px;
margin-left: 0;
margin-right: auto;
}
.textcontainer {
display: flex;
justify-content: center;
}
.container>div>div {
padding: 0.5rem 0.25rem;
}
<div class='container'>
<div class='logocontainer'>
<div class='logo'>
Logo
</div>
</div>
<div class='textcontainer'>
<div>
<!-- Put your text here -->
Text
</div>
</div>
<div></div>
<!-- this is a dummy container to push the text container to the middle of the screen -->
</div>
I'm aware of CSS Subgrid being able to solve a layout like this, but what I'm looking to achieve is a list of containers with content inside. The content inside the containers is aligned right in the containers, but all the content is aligned (left) to the longest content.
Is this possible with flex? Are there any strategies to achieve this?
I suppose the HTML structure would be something like:
<div class="container">
<div class="content" style="100px"></div>
</div>
<div class="container">
<div class="content" style="300px"></div>
</div>
<div class="container">
<div class="content" style="400px">All other content aligned to this longest content</div>
</div>
<div class="container">
<div class="content" style="200px"></div>
</div>
It is most definitely doable with flex.
What I've done is create 2 columns inside the .container element. Column 2 will be right aligned inside the container, and your .content will be left aligned inside .column2.
All you need to do to adjust the alignment of the content inside the containers, is to play around with the widths of .column1 and .column2 in the snippet below:
* {
font-family: sans-serif;
}
.container {
display: flex;
background: lightgray;
align-items: center;
border-radius: 5px;
margin-bottom: 10px;
padding: 7px;
}
.content {
display: flex;
align-items: center;
padding: 0 10px;
background: #666;
border-radius: 5px;
color: white;
height: 50px;
}
.column1 {
width: 30%;
}
.column2 {
width: 70%;
}
<div class="container">
<div class="column1">Container</div>
<div class="column2">
<div class="content" style="width: 100px"></div>
</div>
</div>
<div class="container">
<div class="column1">Container</div>
<div class="content" style="width: 250px"></div>
</div>
</div>
<div class="container">
<div class="column1">Container</div>
<div class="column2">
<div class="content">All other content aligned to this longest content</div>
</div>
</div>
<div class="container">
<div class="column1">Container</div>
<div class="column2">
<div class="content" style="width: 200px"></div>
</div>
</div>
Trying to create a 2 column, 3 row flexbox container for a food menu. The product elements (which should be 2 per row) do not wrap when shrunk. I'm looking for a way to create a wrapping layout using flexbox. Also, what would be the best way to use Media Queries for the product title to be displayed when the layout is shrunk for mobile-size?
I'm attaching my jsfiddle code:
https://jsfiddle.net/5ksd34nf/#&togetherjs=Ix1LEBTca6
(keep in mind without the images, the design changes so I'm attaching photos)
The HTML is:
`
<section class="menu-page" id="Menu">
<div class="TitleWrapper">
<h1 class="title">Menu</h1>
</div>
<div class="menu-list">
<div class="product">
<div class="imgwrapper">
<img src="images/burger.jpg" alt="Burger" class="food-image">
</div>
<div class="text">
<div class="product-content">
<h3 class="name">Burgers</h3>
<h3 class="price">10 €</h3>
</div>
<div class="ptags">
<p class="allergens">Allergens:</p>
<p class="info">Milk, Gluten</p>
</div>
</div>
</div>
How can I space out the Price from the Name using flexbox?
Basically, you can do something like this:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-item {
border: 1px solid gray;
width: 100%;
margin-bottom: 20px;
}
.flex-sub-item {
display: flex;
justify-content: space-between;
}
#media screen and (min-width: 400px) {
.flex-item {
width: calc((100% - 20px) / 2);
margin-right: 20px;
}
.flex-item:nth-child(2n) {
margin-right: 0;
}
}
<div class="flex-container">
<div class="flex-item">
<div class="flex-sub-item">
<div>Title</div>
<div>Price</div>
</div>
</div>
<div class="flex-item">
<div class="flex-sub-item">
<div>Title</div>
<div>Price</div>
</div>
</div>
</div>
I have a wrapper with two boxes in it. The boxes are each to other. In the boxes there is a title (optional) and a content. I have two cases. First case: One of the boxes has a title the other hasn't. Second case: Both boxes have a title. If you take a look on the example for the second case (both titles), the boxes and titles are aligned on the bottom of the wrapper, and the titles are also aligned. There is also an example for the first case (one box without title). Because of the missing title, the alignment isn't correct yet. Here is a screenshot of the problem:
So what I tried is, to figure out the missing space for the first case, which was 21px. After this I select in CSS the second box and add the missing space. For the second case with both title, I tried to add a modifier class on the box and remove the margin-top. So default there would be a space on the second box if no title (this title is optional) and if both titles are avalable, a class should remove it again. Thats the part of the code:
.box + .box {
margin-top: 21px;
}
.box--with-title {
margin-top: 0;
}
Now with my idea it doesn't work. The first case is solved, but my class is not removing the margin. So now the alignment for the second case is wrong. Any ideas how to solve that the class is removing the margin or is there a bether way to do this with pure CSS? Hope this is clear enough.
.wrapper {
display: flex;
justify-content: space-betweet;
width: 500px;
background-color: lightgray;
;
margin-top: 36px;
}
.box {
display: flex;
flex-direction: column;
width: 50%;
}
.box__content {
width: 120px;
height: 100px;
background-color: lightcoral;
}
.box+.box {
margin-top: 21px;
}
.box--with-title {
margin-top: 0;
}
<div class="wrapper">
<div class="box">
<h3>I have a title!</h3>
<div class="box__content"></div>
</div>
<div class="box">
<h3></h3>
<div class="box__content"></div>
</div>
</div>
<div class="wrapper">
<div class="box">
<h3>I have a title!</h3>
<div class="box__content"></div>
</div>
<div class="box box--with-title">
<h3>I have also a title!</h3>
<div class="box__content"></div>
</div>
</div>
Simply use align-items:flex-end on the container and no need to consider margin:
flex-end
The cross-end margin edge of the flex item is flushed with
the cross-end edge of the line. ref
.wrapper {
display: flex;
justify-content: space-between;
align-items:flex-end;
width: 500px;
background-color: lightgray;
;
margin-top: 36px;
}
.box {
display: flex;
flex-direction: column;
width: 50%;
}
.box__content {
width: 120px;
height: 100px;
background-color: lightcoral;
}
<div class="wrapper">
<div class="box">
<h3>I have a title!</h3>
<div class="box__content"></div>
</div>
<div class="box">
<div class="box__content"></div>
</div>
</div>
<div class="wrapper">
<div class="box">
<h3>I have a title!</h3>
<div class="box__content"></div>
</div>
<div class="box box--with-title">
<h3>I have also a title!</h3>
<div class="box__content"></div>
</div>
</div>
By the way your intial code was almost good, you are simply facing a specificity issue which make the rule of .box--with-title not being considered. You may do something like this instead:
.wrapper {
display: flex;
justify-content: space-betweet;
width: 500px;
background-color: lightgray;
;
margin-top: 36px;
}
.box {
display: flex;
flex-direction: column;
width: 50%;
}
.box__content {
width: 120px;
height: 100px;
background-color: lightcoral;
}
.box+.box {
margin-top: 21px;
}
.box.box--with-title {
margin-top: 0;
}
<div class="wrapper">
<div class="box">
<h3>I have a title!</h3>
<div class="box__content"></div>
</div>
<div class="box">
<h3></h3>
<div class="box__content"></div>
</div>
</div>
<div class="wrapper">
<div class="box">
<h3>I have a title!</h3>
<div class="box__content"></div>
</div>
<div class="box box--with-title">
<h3>I have also a title!</h3>
<div class="box__content"></div>
</div>
</div>
I have three divs in a row next to each other. They have the same class and same structure, but their content is different, particularly in length.
My problem is, that all three divs take the height of the one with the "longest" content instead of adjusting to their individual content.
Here's my HTML:
<main class="content">
<div class="column last-match">
<div class="image-wrapper">
<img src="default_thumbnail.jpg"/>
</div>
<div class="text-wrapper">
<a class="heading" href="#"><p class="heading">A Heading</p></a>
<p class="post-excerpt">Some text</p>
Read More
</div>
</div>
<div class="column last-match">
<div class="image-wrapper">
<img src="default_thumbnail.jpg"/>
</div>
<div class="text-wrapper">
<a class="heading" href="#"><p class="heading">A Heading</p></a>
<p class="post-excerpt">Some text that's longer</p>
Read More
</div>
</div>
<div class="column next-matches">
<div class="image-wrapper">
<img src="next_matches.jpg"/>
</div>
<div class="text-wrapper">
<p class="heading">List Heading</p>
<ul class="match-list">
<li class="match">some list item</li>
<li class="match">some list item</li>
</ul>
</div>
</div>
</main>
And the basic CSS:
.content {
display: flex;
flex-wrap: nowrap;
}
.column {
display: flex;
flex-direction: column;
margin: 60px 20px;
min-height: 100px;
width: 33%;
}
.image-wrapper {
width: 100%;
height: 260px;
overflow: hidden;
}
.image-wrapper img {
width: 100%;
height: auto;
}
.post-excerpt {
margin-bottom: 20px;
}
.button {
display: block;
float: left;
margin-bottom: 20px;
padding: 10px;
}
.match {
font-size: 1em;
padding-top: 15px;
}
Here's my code on JSFiddle: https://jsfiddle.net/4h0g73sp/5/
As you will see, the columns will take the height of the one with the most text in it. What I want is them to adjust to their content, so that they have different heights if necessary.
I don't know if it's noteworthy, that I'm working with Wordpress, so these columns are originally inside of some php. If that's important I'm happy to share the code with you, so let me know :)
The issue is because align-items on the flex container defaults to stretch so the flex items takes the height (rows) of the tallest item.
Simply set it to flex-start
.content {
display: flex;
align-items: flex-start;
}
https://jsfiddle.net/4h0g73sp/9/
I have also removed flex-wrap from .content because the default is no wrap so there is no need to declare it
Check https://css-tricks.com/snippets/css/a-guide-to-flexbox/ it's very useful and demonstrates flex fairly well