Click here to Skip to main content
15,512,632 members

Bugs and Suggestions

   

General discussions, site bug reports and suggestions about the site.

For general questions check out the CodeProject FAQs. To report spam and abuse Head to the Spam and abuse watch. If you wish to report a bug privately, especially those related to security, please email webmaster@codeproject.com

 
GeneralRe: QA comment line breaks Pin
Chris Maunder1-Sep-22 6:37
cofounderChris Maunder1-Sep-22 6:37 
GeneralRe: QA comment line breaks Pin
OriginalGriff2-Sep-22 12:12
mveOriginalGriff2-Sep-22 12:12 
SuggestionNew Hom Page Layout card sizes Pin
Graeme_Grant31-Aug-22 14:28
professionalGraeme_Grant31-Aug-22 14:28 
GeneralRe: New Hom Page Layout card sizes Pin
Chris Maunder31-Aug-22 16:39
cofounderChris Maunder31-Aug-22 16:39 
GeneralRe: New Hom Page Layout card sizes Pin
Graeme_Grant31-Aug-22 16:51
professionalGraeme_Grant31-Aug-22 16:51 
GeneralRe: New Hom Page Layout card sizes Pin
Chris Maunder1-Sep-22 6:39
cofounderChris Maunder1-Sep-22 6:39 
GeneralRe: New Hom Page Layout card sizes Pin
Graeme_Grant1-Sep-22 8:07
professionalGraeme_Grant1-Sep-22 8:07 
GeneralRe: New Hom Page Layout card sizes Pin
Graeme_Grant1-Sep-22 22:14
professionalGraeme_Grant1-Sep-22 22:14 
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 | :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:
HTML
<!-- <div class="description"> -->
    <div class="thumbnail">
        <a href="/Articles/5338801/Build-NFT-Collection-Web3-Application-with-Hardha"
            ><img
                src="/img/missing-article-image.png"
                style="width: 400px; height: auto"
        /></a>
    </div>
    <div class="description">
        Use React and hardhat typescript to build a NFT contract web3 application from scratch
    </div>
<!-- </div> -->

Then used the following scss:
CSS
.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 {
                            color: #005782;
                            &:hover {
                                color: #069;
                            }
                        }
                    }
                }

                .entry {
                    flex-shrink: 0;
                    order: 2;
                    font-size: 11px;
                    font-weight: normal;
                    color: #999;
                    margin: 4px 0 5px;
                    line-height: 20px;
                }

                .thumbnail {
                    flex-shrink: 0;
                    order: 1;
                    //min-height: 266.667px;
                }

                .description {
                    flex-shrink: 0;
                    order: 2;
                }

                .tags {
                    flex-grow: 1;
                    order: 2;
                    display: flex;
                    align-items: flex-end;
                    /* justify-content: flex-start; // left aligned */
                }

                .read-later {
                    vertical-align: baseline;
                    height: fit-content;

                    &:hover {
                        background-color: #f90;
                        color: #fff;
                    }
                }
            }

        }
    }
}

It's in a mock project that I can share with you... Thoughts?

[edit] If you wanted animated content card border:
CSS
>div {
    width: calc(50% - 0.5rem);
    padding: 16px 20px 0px !important;
    border-radius: 0.4rem;
    background-color: #fff;
    box-shadow: 1px 1px 0 rgba(0,0,0,3%),
        -1px 1px 0 rgba(0,0,0,3%),
        1px -1px 0 rgba(0,0,0,3%),
        -1px -1px 0 rgba(0,0,0,3%);
    border-radius: 0.4rem;
    transition: box-shadow .6s cubic-bezier(.43,.195,.02,1);

    &:hover {
        box-shadow: 0 1px 1px rgb(0 0 0 / 5%),
            0 2px 3px rgb(0 0 0 / 5%),
            0 4px 6px rgb(0 0 0 / 5%),
            0 8px 12px rgb(0 0 0 / 5%),
            0 12px 24px rgb(0 0 0 / 5%);
    }
}


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


modified 2-Sep-22 11:21am.

GeneralRe: New Hom Page Layout card sizes Pin
Chris Maunder2-Sep-22 12:49
cofounderChris Maunder2-Sep-22 12:49 
GeneralRe: New Hom Page Layout card sizes Pin
Graeme_Grant2-Sep-22 14:01
professionalGraeme_Grant2-Sep-22 14:01 
GeneralRe: New Hom Page Layout card sizes Pin
Chris Maunder6-Sep-22 5:49
cofounderChris Maunder6-Sep-22 5:49 
GeneralRe: New Hom Page Layout card sizes Pin
Richard Deeming31-Aug-22 22:30
mveRichard Deeming31-Aug-22 22:30 
GeneralRe: New Hom Page Layout card sizes Pin
Graeme_Grant1-Sep-22 5:17
professionalGraeme_Grant1-Sep-22 5:17 
GeneralRe: New Hom Page Layout card sizes Pin
Chris Maunder1-Sep-22 6:14
cofounderChris Maunder1-Sep-22 6:14 
GeneralRe: New Hom Page Layout card sizes Pin
Chris Maunder2-Sep-22 11:35
cofounderChris Maunder2-Sep-22 11:35 
GeneralRe: New Hom Page Layout card sizes Pin
Graeme_Grant2-Sep-22 12:05
professionalGraeme_Grant2-Sep-22 12:05 
GeneralRe: New Hom Page Layout card sizes Pin
Graeme_Grant2-Sep-22 14:15
professionalGraeme_Grant2-Sep-22 14:15 
GeneralRe: New Hom Page Layout card sizes Pin
Chris Maunder22-Sep-22 17:23
cofounderChris Maunder22-Sep-22 17:23 
GeneralRe: New Hom Page Layout card sizes Pin
Graeme_Grant22-Sep-22 18:19
professionalGraeme_Grant22-Sep-22 18:19 
BugTimeline landing page alignment issue Pin
Graeme_Grant31-Aug-22 14:06
professionalGraeme_Grant31-Aug-22 14:06 
GeneralRe: Timeline landing page alignment issue Pin
Chris Maunder31-Aug-22 16:34
cofounderChris Maunder31-Aug-22 16:34 
GeneralRe: Timeline landing page alignment issue Pin
Graeme_Grant31-Aug-22 16:38
professionalGraeme_Grant31-Aug-22 16:38 
GeneralRe: Timeline landing page alignment issue Pin
Chris Maunder31-Aug-22 16:41
cofounderChris Maunder31-Aug-22 16:41 
GeneralRe: Timeline landing page alignment issue Pin
Graeme_Grant31-Aug-22 16:42
professionalGraeme_Grant31-Aug-22 16:42 
BugRe: Timeline landing page alignment issue Pin
Graeme_Grant2-Sep-22 15:15
professionalGraeme_Grant2-Sep-22 15:15 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Flags: AnsweredFixed

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.