New Hom Page Layout card sizes
-
Yeah, hard one ... a placeholder image for no image would be the go-to. The staggered/mason layout is not that pretty. Heading, yeah, that is a tough one. I used flex, that allows for scaling the layout easily for media breakpoints. It is also easy to place sections... Heading Image, Description, & Tag are fixed [scalable] sizes ... the Title & Descriptions are top-aligned and ellipsed are a certain number of lines. for the heading, maybe bottom aligned... Want me to mock something? As for the card edge, drop shadow is more modern. If not that, don't use border as it affects layout calculations, use outine instead.
Graeme
"I fear not the man who has practiced ten thousand kicks one time, but I fear the man that has practiced one kick ten thousand times!" - Bruce Lee
I'm more than happy to take suggestions so would love to see your ideas.
cheers Chris Maunder
-
I'm more than happy to take suggestions so would love to see your ideas.
cheers Chris Maunder
I'll try and knock something together later today...
Graeme
"I fear not the man who has practiced ten thousand kicks one time, but I fear the man that has practiced one kick ten thousand times!" - Bruce Lee
-
I'm more than happy to take suggestions so would love to see your ideas.
cheers Chris Maunder
I took the liberty to change the layout so that changes to the html & css are minimal. Elements keep their order in the html code. Also, I have used a placeholder image where the author supplies none (sorry Fred for replacing your image :cool:). Have a look at this:
I had to remove (comment out) the div wrapper around the image and text and rename a div class from texttodescription- see below:[](/Articles/5338801/Build-NFT-Collection-Web3-Application-with-Hardha) Use React and hardhat typescript to build a NFT contract web3 application from scratchThen used the following scss:
.homepage {
.timeline {
.message-list {
padding-bottom: 10px;
font-size: 16px !important;
}.container-col2 { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; padding: 0 !important; gap: 1rem; >div { width: calc(50% - 0.5rem); padding: 16px 20px 0px !important; box-shadow: rgb(0 0 0 / 8%) 2px 4px 8px 2px; outline:rgb(0 0 0 / 8%) solid 1px; border-radius: 0.4rem; background-color: #fff; } .content-list-item { display: flex; flex-direction: column; align-items: stretch; min-height: 100%; padding-bottom: 1em; &.medium { margin: 0 5px 14px 0; .title { flex-shrink: 0; order: 2; padding: 0; margin-top:.5em; // added extra padding font-size: 22px !important; line-height: 125%; font-weight: 500; a { -
The size of the card is incosistent and causing staggered layout - see second row.
IMHO, this is not a clean look. Also, the darkened card background and borger looks a bit aged, sorry. As a suggestion, I would be more inclined to do the following: 
.homepage .timeline .container-col2 {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
padding: 0 !important;
gap: 1rem;
}then for each card:
.homepage .timeline .container-col2>div {
width: calc(50% - 3rem);
padding: 16px 20px 0px !important;
box-shadow: rgb(0 0 0 / 8%) 2px 4px 8px 2px;
border-radius: 0.4rem;
}Then push the tags to the bottom of the card so they all line up... But that is just me ... :cool:
Graeme
"I fear not the man who has practiced ten thousand kicks one time, but I fear the man that has practiced one kick ten thousand times!" - Bruce Lee
-
cheers Chris Maunder
Yeah, placeholder image is required. Moving Title to under the image also fixes ugly misalignments. It was worth a try ...
Graeme
"I fear not the man who has practiced ten thousand kicks one time, but I fear the man that has practiced one kick ten thousand times!" - Bruce Lee
-
I took the liberty to change the layout so that changes to the html & css are minimal. Elements keep their order in the html code. Also, I have used a placeholder image where the author supplies none (sorry Fred for replacing your image :cool:). Have a look at this:
I had to remove (comment out) the div wrapper around the image and text and rename a div class from texttodescription- see below:[](/Articles/5338801/Build-NFT-Collection-Web3-Application-with-Hardha) Use React and hardhat typescript to build a NFT contract web3 application from scratchThen used the following scss:
.homepage {
.timeline {
.message-list {
padding-bottom: 10px;
font-size: 16px !important;
}.container-col2 { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; padding: 0 !important; gap: 1rem; >div { width: calc(50% - 0.5rem); padding: 16px 20px 0px !important; box-shadow: rgb(0 0 0 / 8%) 2px 4px 8px 2px; outline:rgb(0 0 0 / 8%) solid 1px; border-radius: 0.4rem; background-color: #fff; } .content-list-item { display: flex; flex-direction: column; align-items: stretch; min-height: 100%; padding-bottom: 1em; &.medium { margin: 0 5px 14px 0; .title { flex-shrink: 0; order: 2; padding: 0; margin-top:.5em; // added extra padding font-size: 22px !important; line-height: 125%; font-weight: 500; a {That's interesting. Having the image top, then the heading, avoids image mis-alignment (mostly). I'm not a fan of image placeholders (one of the reasons for this design tweak). If an author doesn't provide an image that's suitable for a thumbnail, then maybe it's just not a visual article and we should leave it at that. Sean is going through articles and adding appropriate thumbnails where it makes sense, but we're erring on the side of a light touch on this.
cheers Chris Maunder
-
That's interesting. Having the image top, then the heading, avoids image mis-alignment (mostly). I'm not a fan of image placeholders (one of the reasons for this design tweak). If an author doesn't provide an image that's suitable for a thumbnail, then maybe it's just not a visual article and we should leave it at that. Sean is going through articles and adding appropriate thumbnails where it makes sense, but we're erring on the side of a light touch on this.
cheers Chris Maunder
Chris Maunder wrote:
I'm not a fan of image placeholders (one of the reasons for this design tweak).
I do hear you, but does throw out card alignment... I guess masonry is the only option then. As for the (mostly) Image alignment in my sample, that was due to the
height: autocalulation was266.667px... Here is the placeholder that I used, just in case you want to have a better look:
Graeme
"I fear not the man who has practiced ten thousand kicks one time, but I fear the man that has practiced one kick ten thousand times!" - Bruce Lee
-
cheers Chris Maunder
Oh wow, it is live ... :omg: I gather you're going to compact the articles that have no image... I still think that the tags should be pushed to the bottom of the card and leave the gap with the description > text.
Graeme
"I fear not the man who has practiced ten thousand kicks one time, but I fear the man that has practiced one kick ten thousand times!" - Bruce Lee
-
Chris Maunder wrote:
I'm not a fan of image placeholders (one of the reasons for this design tweak).
I do hear you, but does throw out card alignment... I guess masonry is the only option then. As for the (mostly) Image alignment in my sample, that was due to the
height: autocalulation was266.667px... Here is the placeholder that I used, just in case you want to have a better look:Graeme
"I fear not the man who has practiced ten thousand kicks one time, but I fear the man that has practiced one kick ten thousand times!" - Bruce Lee
I was thinking about masonry but I can't help think that's probably overkill. I'm sure we can dodgy something up that will achieve a reasonable layout without the overhead
cheers Chris Maunder
-
The size of the card is incosistent and causing staggered layout - see second row.
IMHO, this is not a clean look. Also, the darkened card background and borger looks a bit aged, sorry. As a suggestion, I would be more inclined to do the following: .homepage .timeline .container-col2 {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
padding: 0 !important;
gap: 1rem;
}then for each card:
.homepage .timeline .container-col2>div {
width: calc(50% - 3rem);
padding: 16px 20px 0px !important;
box-shadow: rgb(0 0 0 / 8%) 2px 4px 8px 2px;
border-radius: 0.4rem;
}Then push the tags to the bottom of the card so they all line up... But that is just me ... :cool:
Graeme
"I fear not the man who has practiced ten thousand kicks one time, but I fear the man that has practiced one kick ten thousand times!" - Bruce Lee
While I ponder what to do about missing thumbnails, variable length titles, and whether to compact or be spacious or get Masonry to do magic, I added a complication at the bottom of the homepage feed that may be of interest to some.
cheers Chris Maunder
-
While I ponder what to do about missing thumbnails, variable length titles, and whether to compact or be spacious or get Masonry to do magic, I added a complication at the bottom of the homepage feed that may be of interest to some.
cheers Chris Maunder
I like the swapping and remembering the choice... Would it not be better to put it at the top? Maybe as well as the bottom... As for the image, maybe a faded version of the image that I suggested. Better than a blank area while you decide...
Graeme
"I fear not the man who has practiced ten thousand kicks one time, but I fear the man that has practiced one kick ten thousand times!" - Bruce Lee
