Copy link to clipboard
Copied
I currently have a massive document occupying a succession of 13 HTML Tables.
Each Table is divided into 4 columns with 5 Rows containing text in each Column.
I need to re-code all of this information into a Responsive Layout so that each Sales Rep (plus their address etc) is contained in a single Flex item or card; and the Items will Wrap when viewed on small devices.
Would anyone be able to point me in the right direction and tell me how best to pack this massive table into a Responsive layout?
Flex-wrap seemed to be a possible method but I haven’t discovered a way to make the Flex-items into Parents holding Children consisting of formatted Text boxes.
I would be incredibly grateful if anyone would have time to look at the attached HTML codes and perhaps provide me with a Snippet of coding using Flex which I could use.
I have left the following Table (empty of text but in position) so that you can get some idea of how this monstrous 13-Table document currently unfolds.
I have also converted the HTML Table into DIVs (which should make it easier to use in Flex Items?) and I am attaching that version as well.
This is the original HTML Table:
<!doctype html5>
<html lang="en">
<head>
<meta charset="UTF-8"/>
</head>
<body>
<br><br><br>
<td align="center" valign="top" width="20" height="100"></td>
<td width="875" height="100" align="center" valign="top">
<div align="center">
<a id="reps_top_page_anchor" name="reps_top_page_anchor"></a></div>
</td>
<br>
<tr align="center" height="51">
<td class="subhead_2" align="center" valign="top" width="875" height="51">
</td>
</tr>
<tr height="51">
<td class="subhead_2" align="left" valign="top" width="875" height="51">
<table width="875" border="2" cellspacing="3" cellpadding="3" align="left" height="156">
<tr>
<td align="center" valign="top" width="205">
<p><span class="Reps_table_Bold"><span>Alabama</span></span></p>
</td>
<td align="center" valign="top" width="205">
<p><span class="Reps_table_Bold"><span>Arizona</span></span></p>
</td>
<td align="center" valign="top">
<p><span class="Reps_table_Bold"><span>Arkansas</span></span></p>
</td>
<td align="center" valign="top" width="205">
<p><span class="Reps_table_Bold"><span>California - North</span></span></p>
</td></tr>
<tr>
<td align="center" width="205">
<p>Southeast Engineered & Custom Components</p>
</td>
<td class="Reps_table" align="center" width="205">
<p><span>Alan LaFontaine</span></p>
</td>
<td class="Reps_table" align="center">
<p>J.L. Gordon and Son, Inc.</p>
</td>
<td class="Reps_table" align="center" width="205">
<p>Aregger Associates</p>
</td></tr>
<tr>
<td align="center" width="205">
<p>Phone: 770-331-4608</p>
</td>
<td class="Reps_table" align="center" width="205">
<p>Phone: 480-966-6074</p>
</td>
<td class="Reps_table" align="center">
<p>Phone: 903-465-6080</p>
</td>
<td align="center" width="205">
<p>Phone: 415-927-2425</p>
</td></tr>
<tr>
<td align="center" width="205">
<p>Fax: </p>
</td>
<td class="Reps_table" align="center" width="205">
<p>Fax: 480-966-4522</p>
</td>
<td class="Reps_table" align="center">
<p>Fax: 903-465-6089</p>
</td>
<td align="center" width="205">
<p>Fax: 415-924-3817</p>
</td>
</tr>
<tr>
<td align="center" valign="middle" width="205">
<p align="center"><a href="http://www.seccinc.net" target="blank"><span class="Reps_sites"><span>www.seccinc.net</span></span></a></p>
</td>
<td class="Reps_table" width="205">
<p align="center">----</p>
</td>
<td>
<p align="center"><a href="http://www.jlgordonandson.com" target="_blank"><span class="Reps_sites">www.jlgordonandson.com</span></a></p>
</td>
<td width="205">
<p align="center">----</p>
</td>
</tr>
</table>
</td></tr>
<tr height="51">
<td class="subhead_2" align="left" valign="top" width="875" height="51">
<table width="875" border="2" cellspacing="3" cellpadding="3" align="left" height="156">
<tr>
<td align="center" valign="top" width="205">
</td></tr>
</table></td></tr>
</body></html>
And this is the same Table converted to DIVs:
<!doctype html5>
<html>
<head>
<meta charset="UTF-8">
<title> Sales Representativest</title>
<link href="../style/DIV-Table.css" rel="stylesheet" type="text/css">
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.--><script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/source-sans-pro:n2,n6,n4:default.js" type="text/javascript"></script>
</head>
<body>
<div align="center"><a id="reps_top_page_anchor" name="reps_top_page_anchor"></a></div>
<div class="divTable">
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell">
<p><span class="Reps_table_Bold">Alabama</span></p>
</div>
<div class="divTableCell">
<p><span class="Reps_table_Bold">Arizona</span></p>
</div>
<div class="divTableCell">
<p><span class="Reps_table_Bold">Arkansas</span></p>
</div>
<div class="divTableCell">
<p><span class="Reps_table_Bold">California - North</span></p>
</div>
</div>
<div class="divTableRow">
<div class="divTableCell">
<p>Southeast Engineered & Custom Components</p>
</div>
<div class="divTableCell">
<p>Alan LaFontaine</p>
</div>
<div class="divTableCell">
<p>J.L. Gordon and Son, Inc.</p>
</div>
<div class="divTableCell">
<p>Aregger Associates</p>
</div>
</div>
<div class="divTableRow">
<div class="divTableCell">
<p>Phone: 770-331-4608</p>
</div>
<div class="divTableCell">
<p>Phone: 480-966-6074</p>
</div>
<div class="divTableCell">
<p>Phone: 903-465-6080</p>
</div>
<div class="divTableCell">
<p>Phone: 415-927-2425</p>
</div>
</div>
<div class="divTableRow">
<div class="divTableCell">
<p>Fax:</p>
</div>
<div class="divTableCell">
<p>Fax: 480-966-4522</p>
</div>
<div class="divTableCell">
<p>Fax: 903-465-6089</p>
</div>
<div class="divTableCell">
<p>Fax: 415-924-3817</p>
</div>
</div>
<div class="divTableRow">
<div class="divTableCell">
<p align="center"><a href="http://www.seccinc.net" target="blank"><span class="Reps_sites">www.seccinc.net</span></a></p>
</div>
<div class="divTableCell">
<p align="center">----</p>
</div>
<div class="divTableCell">
<p align="center"><a href="http://www.jlgordonandson.com" target="_blank"><span class="Reps_sites">www.jlgordonandson.com</span></a></p>
</div>
<div class="divTableCell">
<p align="center">----</p>
</div>
</div>
</div>
</div>
I think that Bootstrap 5 would solve the problem very easily
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<!-- New Wappler Page -->
<link rel="stylesheet" href="css/style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3y
...
I don't think the OP is talking about automated upload/resize and cropping required areas of the images. They are pointing out IF the images are NOT sized exactly the same then the information will not be aligned as the variation in the height of the images will determine the alignment of the other 'cells'.
I could be wrong but that's the way I read it.
Copy link to clipboard
Copied
Try the code below, fully responsive.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Company Listings</title>
<style>
* {
box-sizing: border-box;
}
.companyInfoWrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: auto;
grid-gap: 15px;
width: 80%;
margin: 0 auto;
}
@media screen and (max-width: 1100px) {
.companyInfoWrapper {
width: 90%;
grid-template-columns: repeat(3, 1fr);
}
}
@media screen and (max-width: 768px) {
.companyInfoWrapper {
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (max-width: 480px) {
.companyInfoWrapper {
grid-template-columns: 1fr;
}
}
.companyInfo {
display: grid;
grid-template-columns: 1fr;
grid-auto-rows: auto;
border: 1px solid #ccc;
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
border-radius: 5px;
}
.companyInfo p {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
margin: 0;
padding: 5px 0;
border-bottom: 1px solid #ccc;
min-height: 50px;
}
.companyInfo h3:nth-child(1) {
display: flex;
align-items: center;
justify-content: center;
grid-column: 1/2;
grid-row: 1/2;
text-align: center;
margin: 0;
padding: 5px 0;
border-bottom: 1px solid #ccc;
min-height: 50px;
}
.companyInfo p:nth-child(2) {
grid-column: 1/2;
grid-row: 2/3;
}
.companyInfo p:nth-child(3) {
grid-column: 1/2;
grid-row: 3/4;
}
.companyInfo p:nth-child(4) {
grid-column: 1/2;
grid-row: 4/5;
}
.companyInfo p:nth-child(5) {
grid-column: 1/2;
grid-row: 5/6;
}
.companyInfo p:last-child {
border-bottom: none;
}
</style>
</head>
<body>
<section class="companyInfoWrapper">
<div class="companyInfo">
<h3>Alabama</h3>
<p>Southeast Engineering & Custom Components</p>
<p>Phone: 7X0-3X1-460X</p>
<p>Fax: ----</p>
<p>www.sxcxin.xxx</p>
</div>
<div class="companyInfo">
<h3>Arizona</h3>
<p>Alan LaFontaine</p>
<p>Phone: 4X0-96X-6X74</p>
<p>Fax: 4X0-96X-4X22</p>
<p>----</p>
</div>
<div class="companyInfo">
<h3>Arkansas</h3>
<p>J.L. Gordon and Son, Inc.</p>
<p>Phone: 9X3-4X5-60X0</p>
<p>Fax: 9X3-4X5-60X9</p>
<p>www.jxgoxdonxndsox.com</p>
</div>
<div class="companyInfo">
<h3>California - North</h3>
<p>Aregger Associates</p>
<p>Phone: 4X5-9X7-242X</p>
<p>Fax: 4X5-9X4-381X</p>
<p>----</p>
</div>
</section>
</body>
</html>
Copy link to clipboard
Copied
You can do it using less css/specifically less css grid but it's not as stable if the text is zoomed.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Company Listings</title>
<style>
* {
box-sizing: border-box;
}
.companyInfoWrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: auto;
grid-gap: 15px;
width: 80%;
margin: 0 auto;
}
@media screen and (max-width: 1100px) {
.companyInfoWrapper {
width: 90%;
grid-template-columns: repeat(3, 1fr);
}
}
@media screen and (max-width: 768px) {
.companyInfoWrapper {
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (max-width: 480px) {
.companyInfoWrapper {
grid-template-columns: 1fr;
}
}
.companyInfo {
display: flex;
flex-direction: column;
border: 1px solid #ccc;
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
border-radius: 5px;
}
.companyInfo h3 {
display: flex;
align-items: center;
justify-content: center;
margin: 0;
padding: 5px 10px;
border-bottom: 1px solid #ccc;
min-height: 50px;
}
.companyInfo p {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
margin: 0;
padding: 5px 10px;
border-bottom: 1px solid #ccc;
min-height: 50px;
}
</style>
</head>
<body>
<section class="companyInfoWrapper">
<div class="companyInfo">
<h3>Alabama</h3>
<p>Southeast Engineering & Custom Components</p>
<p>Phone: 7X0-3X1-46X8</p>
<p>Fax: ----</p>
<p>www.sxccxn.xxx</p>
</div>
<div class="companyInfo">
<h3>Arizona</h3>
<p>Alan LaFontaine</p>
<p>Phone: 4X0-9X6-6X74</p>
<p>Fax: 4X0-9X6-4X22</p>
<p>----</p>
</div>
<div class="companyInfo">
<h3>Arkansas</h3>
<p>J.L. Gordon and Son, Inc.</p>
<p>Phone: 9X3-4X5-60X0</p>
<p>Fax: 9X3-4X5-60X9</p>
<p>www.jlxordxnaxdxon.cxm</p>
</div>
<div class="companyInfo">
<h3>California - North</h3>
<p>Aregger Associates</p>
<p>Phone: 41X-9X7-24X5</p>
<p>Fax: 41X-9X4-38X7</p>
<p>----</p>
</div>
</section>
</body>
</html>
Copy link to clipboard
Copied
I often do this with PHP code and MySQL data. I use Definition Lists for structure. See example.
https://jsfiddle.net/SxGNV/39/
Hopefully, your content is stored in a database? Or maybe an Excel sheet that you could export to CSV and import into MySQL?
Copy link to clipboard
Copied
I often do this with PHP code and MySQL data. I use Definition Lists for structure. See example.
https://jsfiddle.net/SxGNV/39/
Hopefully, your content is stored in a database? Or maybe an Excel sheet that you could export to CSV and import into MySQL?
By @Nancy OShea
That doesnt really work that well when you have varying lines of text ie a company name might take up 2 lines instead of 1 then the structure starts breaking down quite badly.
The solution is to mimmick a table where the table cells expand vertically to accomodate varying number of lines of text without 'crashing' the structure.
Copy link to clipboard
Copied
That's just one example of what <dl> lists can do. They are very flexible and customizable with CSS code.
Copy link to clipboard
Copied
I agree, <dl> lists are the most underrated elements in HTML.
The only problem is that most voiceovers do not convey what they are. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl#accessibility_concerns
Copy link to clipboard
Copied
This is an example of how to tweak existing table markup and make it behave responsively:
<html>
<head>
<style>
table {
border: 1px solid #ccc;
border-collapse: collapse;
margin: 0;
padding: 0;
width: 100%;
table-layout: fixed;
}
table caption {
font-size: 1.5em;
margin: .5em 0 .75em;
}
table tr {
background-color: #f8f8f8;
border: 1px solid #ddd;
padding: .35em;
}
table th, table td {
padding: .625em;
text-align: center;
}
table th {
font-size: .85em;
letter-spacing: .1em;
text-transform: uppercase;
}
@media screen and (max-width: 600px) {
table {
border: 0;
}
table caption {
font-size: 1.3em;
}
table thead {
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
table tr {
border-bottom: 3px solid #ddd;
display: block;
margin-bottom: .625em;
}
table td {
border-bottom: 1px solid #ddd;
display: block;
font-size: .8em;
text-align: right;
}
table td::before {
content: attr(data-label);
float: left;
font-weight: bold;
text-transform: uppercase;
}
table td:last-child {
border-bottom: 0;
}
}
</style>
</head>
<body>
<table>
<caption>
Accounts Summary
</caption>
<thead>
<tr>
<th scope="col">Account</th>
<th scope="col">Due Date</th>
<th scope="col">Amount</th>
<th scope="col">PERIOD</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Account">JOE BLOGGS</td>
<td data-label="Due Date">04/10/2018</td>
<td data-label="Amount">1,090</td>
<td data-label="Period">03/08/2018 - 03/09/2018</td>
</tr>
<tr>
<td scope="row" data-label="Account">JOHN SMITH</td>
<td data-label="Due Date">03/10/2018</td>
<td data-label="Amount">2,653</td>
<td data-label="Period">02/08/2018 - 02/09/2018</td>
</tr>
<tr>
<td scope="row" data-label="Account">SARAH JONES</td>
<td data-label="Due Date">03/10/2018</td>
<td data-label="Amount">1,171</td>
<td data-label="Period">02/08/2018 - 02/09/2018</td>
</tr>
<tr>
<td scope="row" data-label="Acount">JIM MCDOWELL</td>
<td data-label="Due Date">02/10/2018</td>
<td data-label="Amount">899</td>
<td data-label="Period">01/08/2018 - 01/09/2018</td>
</tr>
</tbody>
</table>
</body>
</html>
Copy link to clipboard
Copied
I think that Bootstrap 5 would solve the problem very easily
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<!-- New Wappler Page -->
<link rel="stylesheet" href="css/style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
</head>
<body>
<main>
<div class="container">
<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 row-cols-xl-4 gy-4">
<div class="col">
<div class="card shadow h-100">
<div class="card-header text-light bg-primary">
Alabama
</div>
<div class="card-body">
<p class="card-text">Southeast Engineering & Custom Components</p>
<p class="card-text">Phone: 7X0-3X1-460X</p>
<p class="card-text">Fax: ----</p>
<p class="card-text">www.sxcxin.xxx</p>
</div>
</div>
</div>
<div class="col">
<div class="card shadow h-100">
<div class="card-header text-light bg-primary">
Arizona
</div>
<div class="card-body">
<p class="card-text">Alan LaFontaine</p>
<p class="card-text">Phone: 4X0-96X-6X74</p>
<p class="card-text">Fax: 4X0-96X-4X22</p>
<p class="card-text">----</p>
</div>
</div>
</div>
<div class="col">
<div class="card shadow h-100">
<div class="card-header text-light bg-primary">
Arkansas
</div>
<div class="card-body">
<p class="card-text">J.L. Gordon and Son, Inc.</p>
<p class="card-text">Phone: 9X3-4X5-60X0</p>
<p class="card-text">Fax: 9X3-4X5-60X9</p>
<p class="card-text">www.jxgoxdonxndsox.com</p>
</div>
</div>
</div>
<div class="col">
<div class="card shadow h-100">
<div class="card-header text-light bg-primary">
California - North
</div>
<div class="card-body">
<p class="card-text">Aregger Associates</p>
<p class="card-text">Phone: 4X5-9X7-242X</p>
<p class="card-text">Fax: 4X5-9X4-381X</p>
<p class="card-text">----</p>
</div>
</div>
</div>
</div>
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
The result
Copy link to clipboard
Copied
Thank you all so much for your most helpful responses. I will work on these tomorrow and will let you know what worked the best.
I have been trying to do it with Flex Cards and while the results look wonderful in Dreamweaver the cards unfortunately seems to fall apart in some of the web browsers.
To answer Nancy:
Unfortunately I don't have the info in a database so it means copying and pasting the text from the Table on their old website!
Copy link to clipboard
Copied
Thank you all so much for your most helpful responses. I will work on these tomorrow and will let you know what worked the best.
By @AnnShelbourne
Look at the posted solutions carefully, some are better than others in terms of the alignment of the information, if thats important to you, others will break if you introduce varying lines of content. There's more to this than meets the eye.
Copy link to clipboard
Copied
Thanks to all of you, I think that I have found a solution and it was just one very important line of code by Osgood which triggered the answer;
Use a value for "Minimum-height" !!
Having absorbed that little tidbit, I went back to my Flex Cards files and bingo, suddenly the cards all line-up; space appropriately; and no longer change shape in either Firefox or Safari and the whole construction is now fully Responsive.
These screenshots show the page in emulation for different devices.
I have struggled with this for seveal days and I know that i would never solved the problem without the help and knoledge which you so generously shared with me.
Cell Phone
Computer
iPad
Computer using smaller window
Copy link to clipboard
Copied
Thanks to all of you, I think that I have found a solution
By @AnnShelbourne
Thanks for letting us know. Glad you have it all sorted out now, happy days!
Copy link to clipboard
Copied
I think that Bootstrap 5 would solve the problem very easily
By @BenPleysier
Problem is nothing lines up ie, phone, fax, web address. It works yes but I personally look for the small 'detail' which can make the presentation of information look cleaner, maybe you can tweak it to line up. I guess others just don't notice or don't care, whatever, its difficult to make the point.....been trying for 40+ years.
Copy link to clipboard
Copied
1. add a class of `cards` to the row as in
.cards p:first-child {
font-weight: bold;
height: 3em;
}
This will result in
Copy link to clipboard
Copied
.cards-body p:first-child {
}
you might mean?
There isnt a .cards
<div class="card-body">
<p class="card-text">Southeast Engineering & Custom Components</p>
<p class="card-text">Phone: 7X0-3X1-460X</p>
<p class="card-text">Fax: ----</p>
<p class="card-text">www.sxcxin.xxx</p>
</div>
Also this doesnt unfortunately work if you zoom the text in the browser say 4 times. It becomes a bit like like 'position absolute' where the text overlaps the text below it!!!..........hummm
Copy link to clipboard
Copied
I'll explain as Developers always need to do when interacting with designers.
In one of my previous replies I stated
This allows me to use `cards` as a CSS selector.
I use Chrome and I zoomed 4 times to get this result
What I am trying to say is that I cannot replicate what you are talking about.
Copy link to clipboard
Copied
I'll explain as Developers always need to do when interacting with designers.
In one of my previous replies I stated
This allows me to use `cards` as a CSS selector.
I use Chrome and I zoomed 4 times to get this result
What I am trying to say is that I cannot replicate what you are talking about.
By @BenPleysier
Sorry didnt read the post as thoroughly as I should but you don't need to add another class, you could just apply it to the 'card-body' css which already exists.
Below in Firefox Mac, text zoomed 4 times. It doesn't happen in Chrome......text is fine.
EDITED: Use min-height instead of height then Firefox plays ball and the text is ok. I was under the impression that setting a height in em would readjust the height according to how much space was needed but obviously it breaks down at some point when the content exceeds the set height. Chrome just keeps growing, hence the text appears ok, still inconsitencies cross browser.
Copy link to clipboard
Copied
Below in Firefox Mac, text zoomed 4 times. It doesn't happen in Chrome......text is fine.
By @osgood_
it seemed to me that for many versions Firefox had removed the option for text magnification only... it should remain accessible only from the about:config using the browser.zoom.full property (which is true by default)
could you please check which settings you are on, and which version of FF ?
Copy link to clipboard
Copied
Below in Firefox Mac, text zoomed 4 times. It doesn't happen in Chrome......text is fine.
By @osgood_
could you please check which settings you are on, and which version of FF ?
By @B i r n o u
You may well be correct, this is an old version, Firefox 78. I don't think I can get any further versions as newer ones are not compatible with this OS. Shortly to be sorting that out!
Seems like Mac OS 10.9, 10.10 & 10.11 can only run Firefox up to v78, beyond that you would need an OS update. Was only released in June last year!
Cant update as it would potentially wipe out quite a few other bits of software I still use, so plan is to keep old stuff running on this machine and migrate to a newer one in September.
Copy link to clipboard
Copied
Bonjour @AnnShelbourne ,
The set of answers formulated by Os, Nancy, Paul, Ben... are all interesting. But the question I ask myself is, is your code already existing, can you easily modify it or do you have to rely on it to elaborate your cards?
First remark, the code using TABLE is badly formed, starting by using a rather space doctype !!!! and the code in DIV very similar to a nested table... and using the same space doctype.
so , do you need an approach that is based on any of your HTML codes ?
Copy link to clipboard
Copied
Bonjour @AnnShelbourne ,
The set of answers formulated by Os, Nancy, Paul, Ben... are all interesting. But the question I ask myself is, is your code already existing, can you easily modify it or do you have to rely on it to elaborate your cards?
By @B i r n o u
Well I used my approach of grid because you can get the information to 'mimmick' a table by allocating each piece of information a certain row space, which keeps all the information aligned by default (and at least for about 3 text zooms as well), making it cleaner and better presented. Its more complicated but worth it in my opinion. You may well be able to achieve the same effect just using flex and flex: 1, or maybe some other solution. I would not accept either Nancys or Bens solution as at the moment the alignment of information is not as good as it should be or could be, in my opinion, maybe they can tweak that. Pauls solution I havent really looked at in depth as I try to avoid tables but if it works and the alignment of the information is persistant then its a good solution.
Obviously the issue for me, coming from a design background, is I look carefully at the presentation whilst others may accept less as a result of not coming from that kind of background, which is understandable. I see it all the time, whatever will be will be, everyone has different standards of acceptance.
Copy link to clipboard
Copied
Obviously the issue for me, coming from a design background, is I look carefully at the presentation whilst others may accept less as a result of not coming from that kind of background, which is understandable. I see it all the time, whatever will be will be, everyone has different standards of acceptance.
By @osgood_
As a `Designer`, which do you prefer?
or
As a `Developer`, I can create the latter in less than 10 minutes and I'll be enjoying my cognac and cigar while you are wading through and testing the CSS.
Copy link to clipboard
Copied
A pop of color obviously adds to the overall presentation and now you have considered the alignment of the information its looking a lot cleaner and acceptable in my opinion. My point here was merely to bring to the attention the alignment of the information, which l'm sure you agree looks less irratic in your revised layout. The eye candy ie whether you add a color header, make the company name bold or if you align the text left or centered is of course an important consideration, one which l never initially addressed as l was focused on the mechanics at that stage.
l'm pleased my little nudge in the right direction was taken in the spirit it was intended, to help with the finer details and to push for better results, well done mate, good job.
Copy link to clipboard
Copied
I'm a fast learner as this certifies:
But how can I not be with such a great mentor following my every move.