I'm trying to add a table to my Shopify store, and current have the table setup as the following:
<div class="table-responsive">
<table style="width:100%; table-layout:fixed; border-collapse:separate !important;background-color: #f7f7f7; border-spacing:30px 5px; color:#333333; font-size:16px; line-height:12px; font-weight:100;" class="bodywrapcenter">
<tr>
<td> <i class="fa-solid fa-droplet"></i> Waterproof</td>
<td> <i class="fa-solid fa-leaf"></i> Certified Vegan</td>
</tr>
<tr>
<td> <i class="fa-solid fa-seedling"></i> Natural Rubber</td>
<td> <i class="fa-solid fa-feather"></i> Light Weight</td>
</tr>
</table></div>
However, I'm trying to make the following table show in one rows in mobile. (1 x 4 instead of 2 x 2 on mobile).
I tried adding the the following code for CSS:
.table.bodywrapcenter>tr>td {
width: 100%;
float: left;
}
however, It's still not working.
Can someone please help me? I'm a newbie so detailed instruction would be greatly appreciated.
Thanks in advance!
Perhaps you can do it just with <div> tags instead using table elements. If you can do it this way you can play with display: flex attribute and #mediaqueries to change the view depending on the viewport. I let you an example attached.
.bodywrapcenter {
width: 100%;
display: flex;
flex-flow: row wrap;
background-color: #f7f7f7;
color: #333333;
font-size: 16px;
line-height: 12px;
font-weight: 100;
}
.bodywrapcenter-tr {
display: flex;
flex-flow: row wrap;
flex: 0 0 50%;
}
.bodywrapcenter-td {
display: block;
}
#media only screen and (min-width: 768px) {
.bodywrapcenter-tr {
flex-flow: row wrap;
justify-content: space-around;
}
}
<div class="table-responsive">
<div class="bodywrapcenter">
<div class="bodywrapcenter-tr">
<div class="bodywrapcenter-td">Waterproof</div>
<div class="bodywrapcenter-td">Certified Vegan</div>
</div>
<div class="bodywrapcenter-tr">
<div class="bodywrapcenter-td">Natural Rubber</div>
<div class="bodywrapcenter-td">Light Weight</div>
</div>
</div>
</div>
For the responsive design, you can use the below CSS and set your preferred style in different widths.
#media only screen and (max-width: 390px) { //your CSS code }
.table-responsive.bodywrapcenter{
display:flex,
flex-wrap:wrap
}
Related
I want to replace a table with flexbox elements.
Basically from this:
<table>
<tr>
<td>row_1.col_1</td>
<td>row_1.col_2</td>
</tr>
<tr>
<td>row_2.col_1.with_longer_content</td>
<td>row_2.col_2</td>
</tr>
</table>
To this:
<div>
<div>
<div>row_1.col_1</div>
<div>row_1.col_2</div>
</div>
<div>
<div>row_2.col_1.with_longer_content</div>
<div>row_2.col_2</div>
</div>
</div>
In the case of the table, the first row's first cell will expand in width so that the second cell row_1.col_2 will align properly with the cell beneath it row_2.col_2
-------------------------------------------------
| row_1.col_1 | row_1.col_2 |
| row_2.col_1.with_longer_content | row_2.col_2 |
-------------------------------------------------
How can I do the same with divs, using flexbox, so that the first column consumes the least amount of width, but the second column is still aligned?
Is this even possible?
The reason why I want to do this is because I want each row to be a Quasar q-card, but the elements in there should align with the cards above and below, yet still consume the least amount of space and not be width-controlled through the "12-column"-grid-system.
Basically like this, where I need the badges and inputs to be aligned as if it were a table (I cannot use a q-table, and -- due to the use of UMD -- also not a q-markup-table):
<q-card>
<q-card v-for='element in elements'>
<q-badge>{{element.badge}}</q-badge>
<q-input v-model='element.text'></q-input>
</div>
</div>
Instead of flex, it would probably be better to use display:table
div {
display: table;
}
div>div {
display: table-row;
}
div>div>div {
display: table-cell;
}
<div>
<div>
<div>row_1.col_1</div>
<div>row_1.col_2</div>
</div>
<div>
<div>row_2.col_1.with_longer_content</div>
<div>row_2.col_2</div>
</div>
</div>
Using display: flexbox you can do this by organizing the data by column instead of by row. Using display: table you can maintain the structure of the table. Examples:
.flex-table {
display: flex;
}
.column {
padding: 4px;
}
.table {
display: table;
}
.table-row {
display: table-row;
}
.table-cell {
display: table-cell;
padding: 0 4px;
}
<h3>table</h3>
<table>
<tr>
<td>row_1.col_1</td>
<td>row_1.col_2</td>
</tr>
<tr>
<td>row_2.col_1.with_longer_content</td>
<td>row_2.col_2</td>
</tr>
</table>
<h3>flexbox table</h3>
<div class="flex-table">
<div class="column">
<div>row_1.col_1</div>
<div>row_2.col_1.with_longer_content</div>
</div>
<div class="column">
<div>row_1.col_2</div>
<div>row_2.col_2</div>
</div>
</div>
<h3>display table</h3>
<div class="table">
<div class="table-row">
<div class="table-cell">row_1.col_1</div>
<div class="table-cell">row_1.col_2</div>
</div>
<div class="table-row">
<div class="table-cell">row_2.col_1.with_longer_content</div>
<div class="table-cell">row_2.col_2</div>
</div>
</div>
<style>
.row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
.col {
-ms-flex-preferred-size: 0;
flex-basis: 0;
-ms-flex-positive: 1;
flex-grow: 1;
max-width: 100%;
position: relative;
width: 100%;
padding-right: 15px;
padding-left: 15px;
}
.text-wrap {
white-space: normal !important;
}
</style>
<div>
<div class="row">
<div class="col text-wrap">row_1.col_1</div>
<div class="col text-wrap">row_1.col_2</div>
</div>
<div class="row">
<div class="col text-wrap">row_2.col_1.with_longer_content</div>
<div class="col text-wrap">row_2.col_2</div>
</div>
</div>
Try writing like this & if you don't want to use the above styles use the bootstrap css link instead.
I am currently learning basics of web development and I wanted to create a simple webpage with a navigation bar, two main div elements and a footer. Ideally I would make it responsive to the window's size and when the user resizes it one of the three divs should go below the remaining two. Analogically, after further rescaling they would end up in a vertical line.
HTML code snippet:
<div class="bottom-container">
<div class="clock first-two" id="clock1" data-clock>
<p class="border">Add 1</p>
</div>
<div class="clock first-two" id="clock2" data-clock>
<p class="border">Add 2</p>
</div>
<div class="clock" id="clock3" data-clock>
<p class="border">Add 3</p>
</div>
</div>
CSS:
.bottom-container {
display: flex;
flex-direction: row;
justify-content: space-evenly;
width: 100%;
}
.clock {
margin: 2% 0;
padding: 200px 150px;
height: 100%;
align-self: center;
}
#media screen and (max-width: 1150px) {
.first-two {
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
}
#media screen and (max-width: 770px) {
}
When I wrapped clock1 and clock2 in a separate div so that after first resizing 1 and 2 would stay in the same line and 3rd would go below them. Please see the screenshots for reference(I disabled 3rd div in the 2nd picture to demonstrate my desired effect).
First Image
Second Image
Thank you.
Add flex-wrap: wrap to bottom-conatiner -
.bottom-container {
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
width: 100%;
}
The flex-wrap property specifies whether the flexible items should wrap or not.
As a side note, I removed flex-direction: row because it's a default.
Are you looking for something like this?
* {
box-sizing: border-box;
}
.bottom-container {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
width: 100%;
}
.clock {
padding: 200px 0;
flex: 1 0 50%;
border: 1px solid black;
}
#media(min-width: 800px) {
.clock {
flex: auto;
}
}
<div class="bottom-container">
<div class="clock first-two" id="clock1" data-clock>
<p class="border">Add 1</p>
</div>
<div class="clock first-two" id="clock2" data-clock>
<p class="border">Add 2</p>
</div>
<div class="clock" id="clock3" data-clock>
<p class="border">Add 3</p>
</div>
</div>
I've been working on a website, and all was going well until I had someone try to test it on their iPhone. All the content seems to be squished onto the screen on iPhone. This happened in Safari, Chrome, and Duck Duck Go. I am unable to recreate the problem in any of the iPhone simulators I've tried on the internet, but have seen the problem on both iPhones I've tested it on.
Here is what it looks like on the iPhone:iPhone image
Here is what it looks like on my android: Android image
The layout uses flexbox extensively, which my research leads me to believe is the problem. I have tried adding this css to the bottom of my css file to prevent flexboxes from shrinking, but it has not solved the problem:
* {
flex-shrink: 0;
}
Let me know if you need more source code, but since the problem is throughout the entire page I would have to post all of it.
Edit: Here is the pastebin of the css https://pastebin.com/c0VjkGDc
Edit 2: Here is an example of the HTML from one of the cards that seems to be squished on iPhone (ignore the php):
<div class='container'>
<div class='results-container'>
<div class='result-card'>
<div class='card-date'>
<div class='month'>{$date_month}</div>
<div class='day'>{$date_day}</div>
<div class='year'>{$date_year}</div>
</div>
<div class='card-info'>
<div class='card-title'>{$aud_position}</div>
<div class='card-subtitle'>{$aud_name}</div>
<div class='card-location'><i class="fas fa-map-marker-alt"></i> {$aud_location}</div>
<div class='card-pay'><span class='pay-span'>{$aud_pay}</span></div>
<div class='card-icons'>
<i class='icon-red fas fa-clock'></i> App deadline passed
</div>
</div>
<div class='card-actions'>
<div class='card-fave'><i class="fas fa-heart"></i></div>
</div>
</div>
</div>
</div>
And here is relevant CSS for that:
.container {
display: flex;
}
.results-container {
width: 100vw;
display: flex;
flex-direction: column;
}
.result-card {
flex: 1;
display: flex;
margin-top: 5px;
background-color: white;
padding: 15px;
}
.card-date {
flex: 0 0 5em;
display: flex;
flex-direction: column;
border-right: 1px solid #ddd;
align-items: center;
justify-content: center;
border-radius: 5px;
}
.day {
font-size: 2em;
}
.card-info {
padding-left: 15px;
flex: 1;
display: flex;
flex-direction: column;
line-height: 1.5em;
}
.card-title {
font-weight: bold;
font-size: 1.1em;
}
.card-pay {
margin: 10px 0;
}
.pay-span {
background-color: #f0f0f0;
border-radius: 5px;
padding: 10px;
border: 1px solid #ddd;
}
* {
flex-shrink: 0;
}
As mentioned in the comment of the question above, the original HTML and CSS contain quite a lot of errors. To validate and fix the errors, the following online resources can be used:
W3 HTML Validator: https://validator.w3.org/nu/
W3 CSS Validator: https://jigsaw.w3.org/css-validator/
On the other hand, if you apply the Bootstrap responsive framework in your website, it can save you quite a lot of efforts to handle different screen sizes.
I want to have multiple justified columns (fixed number of columns) for each list item, e.g.
- John 41 Singer
- Ringo 45 Drummer
can this be done with html/css? Perhaps an "li" class in CSS? It needs to be list items.
It's already been stated, but ideally this is a table of data and the right html for this should just be in a table. If you're against using a table in your html then the following solution should be fine. Update the container width for a wider layout.
Pen: https://codepen.io/joshuakelly/pen/dwBzdR
HTML:
<div class="wrapper">
<div class="row">
<div>John</div>
<div>41</div>
<div>Singer</div>
</div>
<div class="row">
<div>Ringo</div>
<div>45</div>
<div>Drummer</div>
</div>
</div>
<ul class="wrapper list">
<li class="row">
<div>John</div>
<div>41</div>
<div>Singer</div>
</li>
<li class="row">
<div>Ringo</div>
<div>45</div>
<div>Drummer</div>
</li>
</ul>
And the CSS
.wrapper {
display: flex;
flex-direction: column;
margin-bottom: 1em;
width: 300px
}
.wrapper.list {
list-style-type: none;
margin: 0;
padding: 0;
}
.row {
align-items: center;
display: flex;
justify-content: space-between;
}
.row div {
width: 33.33%
}
Just use a table...
<table>
<th>
<td>Name</td>
<td>Age</td>
<td>whateverelse</td>
</th>
<tr>
<td>John</td>
<td>45</td>
<td>i gues</td>
</tr>
</table>
Then use css to set fixed width for tabble and columns..
table {
border: 1px solid black;
table-layout: fixed;
width: 200px;
}
th, td {
border: 1px solid black;
width: 100px;
}
You could also, if your really in need it, just wrap the table inside the list like <ul><li><table>....</table></li></ul> That way you could style it anyway like you want using css...
List-version formatted as table and hacked to look also like a list (modified version of HermesTrismegistus ;)
ul.table-style {
display: table;
border: 1px solid black;
}
ul.table-style li:before {
display: list-item;
content: "";
}
ul.table-style li {
display: table-row;
}
ul.table-style span {
display: table-cell;
border: 1px solid black;
width: 100px;
}
<ul class="table-style">
<li>
<span>Name</span>
<span>Age</span>
<span>whateverelse</span>
</li>
<li>
<span>John</span>
<span>45</span>
<span>i gues</span>
</li>
</ul>
Looking to have one large item on the left and a lot of small items on the right. If the browser window is big enough, I'd like the small items to "float" in a columnar manner such that they don't exceed the height of the large item. However, when the browser shrinks, I'd like the small items to wrap down below the large one in a single row.
Here's a codepen to demonstrate: https://codepen.io/anon/pen/WXQdEN
div.container {
display: flex;
flex-wrap: wrap;
}
div.right-variable {
max-height: 320px;
align-items: center;
}
div.test-700 {
width: 700px;
height: 320px;
background: green;
color: #ffffff;
font-size: 40px;
}
div.test-100 {
width: 100px;
height: 100px;
background: red;
outline: 1px solid black;
margin: 2px;
float: left;
}
<table>
<tr>
<td>
<div class="test-700">Example Table</td>
</td>
<td>
<div class="test-100"></div>
<div class="test-100"></div>
<div class="test-100"></div>
<div class="test-100"></div>
<div class="test-100"></div>
<div class="test-100"></div>
</td>
</tr>
</table>
<div class="container">
<div class="left-fixed">
<div class="test-700">Non-Working Flex</div>
</div>
<div class="right-variable">
<div class="test-100"></div>
<div class="test-100"></div>
<div class="test-100"></div>
<div class="test-100"></div>
<div class="test-100"></div>
<div class="test-100"></div>
</div>
</div>
The table shows the desired behavior of the red boxes at large resolutions. As the browser shrinks, the boxes float around to fill the space.
But when the browser gets too small to contain them, I want the flex behavior where the red boxes wrap down under the green one. I understand that this doesn't work because I can't float the items within the flex, but I don't understand how to achieve a similar behavior without float. I'd like to achieve this using flex and CSS only. Is that possible?
Thank you for any assistance.
The main issue here is related to sequence for wrapping and since the browser don't know which to wrap before the other, they start with the outer element.
Also, there is no property that one can set, to define the order, but there is media query, where we can set a breaking point, and in this case, use it to tell when the container is allowed to wrap.
Remove flex-wrap: wrap from the container and add it back at a desired maximum width using a media query.
Then also make the div.right-variable a flex container and have the red elements centered.
Stack snippet
div.container {
display: flex;
}
div.right-variable {
margin: auto 0; /* center vert. */
max-height: 320px;
display: flex;
flex-wrap: wrap;
}
div.test-700 {
width: 700px;
height: 320px;
background: green;
color: #ffffff;
font-size: 40px;
}
div.test-100 {
margin: auto 0; /* center vert. */
width: 100px;
height: 100px;
background: red;
outline: 1px solid black;
margin: 2px;
}
#media (max-width: 816px) {
div.container {
flex-wrap: wrap;
}
}
<div class="container">
<div class="left-fixed">
<div class="test-700">Working Flex</div>
</div>
<div class="right-variable">
<div class="test-100"></div>
<div class="test-100"></div>
<div class="test-100"></div>
<div class="test-100"></div>
<div class="test-100"></div>
<div class="test-100"></div>
</div>
</div>