2 Correct answers
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.
45
Replies
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.
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
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.
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.
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!
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.
1. add a class of `cards` to the row as in
.cards p:first-child {
font-weight: bold;
height: 3em;
}
This will result in
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.
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.
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 ?
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.
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.
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.
I'm a fast learner as this certifies:
But how can I not be with such a great mentor following my every move.
AdChoices