New Hom Page Layout card sizes

[Graeme_Grant]

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

[Graeme_Grant]

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 text to description - see below:

    [![](/img/missing-article-image.png)](/Articles/5338801/Build-NFT-Collection-Web3-Application-with-Hardha)




    Use React and hardhat typescript to build a NFT contract web3 application from scratch

Then 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 {

[Chris Maunder]

cheers Chris Maunder

[Graeme_Grant]

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

[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

[Graeme_Grant]

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: auto calulation was 266.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

[Graeme_Grant]

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]

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

[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

[Graeme_Grant]

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