• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
1

Need to change an HTML Table into a Responsive format (possibly using Flex).

Enthusiast ,
Aug 11, 2021 Aug 11, 2021

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 &amp; 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 &amp; 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>

 

Views

2.7K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 2 Correct answers

Community Expert , Aug 11, 2021 Aug 11, 2021

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
...

Votes

Translate

Translate
LEGEND , Aug 20, 2021 Aug 20, 2021

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.

 

 

Votes

Translate

Translate
LEGEND ,
Aug 11, 2021 Aug 11, 2021

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 &amp; 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>

 

 

 

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 11, 2021 Aug 11, 2021

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 &amp; 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>

 

 

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 11, 2021 Aug 11, 2021

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?

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 11, 2021 Aug 11, 2021

Copy link to clipboard

Copied

quote

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 11, 2021 Aug 11, 2021

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.   

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 11, 2021 Aug 11, 2021

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

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 11, 2021 Aug 11, 2021

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>

 

Paul-M - Community Expert

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 11, 2021 Aug 11, 2021

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 &amp; 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

BenPleysier_0-1628727281644.png

 

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Enthusiast ,
Aug 11, 2021 Aug 11, 2021

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!

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 12, 2021 Aug 12, 2021

Copy link to clipboard

Copied

quote

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.

 

 

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Enthusiast ,
Aug 12, 2021 Aug 12, 2021

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 PhoneCell PhoneComputerComputeriPadiPadComputer using smaller windowComputer using smaller window

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 12, 2021 Aug 12, 2021

Copy link to clipboard

Copied

quote

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!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 12, 2021 Aug 12, 2021

Copy link to clipboard

Copied

quote

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 12, 2021 Aug 12, 2021

Copy link to clipboard

Copied

 

1. add a class of `cards` to the row as in

<div class="cards row row-cols-1 row-cols-sm-2 row-cols-lg-3 row-cols-xl-4 gy-4">
2. add some CSS to the document
.cards p:first-child {
    font-weight: bold;
    height: 3em;
}

 

This will result in

BenPleysier_0-1628770099389.png

 

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 12, 2021 Aug 12, 2021

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 &amp; 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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 12, 2021 Aug 12, 2021

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 

BenPleysier_0-1628775045102.png

This allows me to use `cards` as a CSS selector.

 

I use Chrome and I zoomed 4 times to get this result

BenPleysier_1-1628775251686.png

 

What I am trying to say is that I cannot replicate what you are talking about.

 

 

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 12, 2021 Aug 12, 2021

Copy link to clipboard

Copied

quote

I'll explain as Developers always need to do when interacting with designers.

 

In one of my previous replies I stated 

BenPleysier_0-1628775045102.png

This allows me to use `cards` as a CSS selector.

 

I use Chrome and I zoomed 4 times to get this result

BenPleysier_1-1628775251686.png

 

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.

 

ben_screen_shot.jpg

 

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 12, 2021 Aug 12, 2021

Copy link to clipboard

Copied

quote
quote

Below in Firefox Mac, text zoomed 4 times. It doesn't happen in Chrome......text is fine.

 

ben_screen_shot.jpg

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 ?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 12, 2021 Aug 12, 2021

Copy link to clipboard

Copied

quote
quote
quote

Below in Firefox Mac, text zoomed 4 times. It doesn't happen in Chrome......text is fine.

 

ben_screen_shot.jpg

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 11, 2021 Aug 11, 2021

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 ?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 12, 2021 Aug 12, 2021

Copy link to clipboard

Copied

quote

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 12, 2021 Aug 12, 2021

Copy link to clipboard

Copied

quote

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?

 

BenPleysier_0-1628771788170.png

or

 

BenPleysier_1-1628771830586.png

 

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.

 

 

 

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 12, 2021 Aug 12, 2021

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.

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 12, 2021 Aug 12, 2021

Copy link to clipboard

Copied

I'm a fast learner as this certifies:

BenPleysier_0-1628774461116.png

But how can I not be with such a great mentor following my every move.

 

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines