Overlay + Margin tweaks

  • Hi, it’s me again. Thank you very much for the image standardisation fix from before, I was just wondering how I can make some final tweaks so that it matches the other image montage I have below. I’m looking to remove the margins in between each author’s column as well as change the overlay so that it doesn’t white out, but slightly darkens so that author’s name appear in the middle and their pfp can still be seen.

    Not sure how to add in additional css if there are multiple tweaks, but the current css code I’m using is:

    .authors-list-items-s3 .authors-list-item img {
    height: 190px;
    width: 100%;
    }

    @media only screen and ( max-width: 720px ) {
    .authors-list-items-s3 .authors-list-item img {
    height: auto;
    }
    }

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author WPKube

    (@wpkube)

    Hi @dummyt

    You’re welcome.

    Give this a try:

    .authors-list-cols-dir-horizontal .authors-list-col-4 {
    margin: 0;
    width: 33%;
}
.authors-list-items-s3 .authors-list-item-main {
    background: #rgba( 0,0,0, 0.4);
    border: 0;
    display: flex;
    align-items: center;
    transform: scale(1);
}
.authors-list-item-title {
    color: #fff;
}
    Thread Starter dummyt

    (@dummyt)

    Hmm… I tried it, you can see it from the link. Not suree where I did wrong. I currently have this in the css of the shortcode:
    .authors-list-items-s3 .authors-list-item img {
    height: 270px;
    width: 100%;
    }

    @media only screen and ( max-width: 720px ) {
    .authors-list-items-s3 .authors-list-item img {
    height: auto;
    }
    }
    .authors-list-cols-dir-horizontal .authors-list-col-4 {
    margin: 0;
    width: 33%;
    }
    .authors-list-items-s3 .authors-list-item-main {
    background: #rgba( 0,0,0, 0.4);
    border: 0;
    display: flex;
    align-items: center;
    transform: scale(1);
    }
    .authors-list-item-title {
    color: #rgb(#,0,0);
    }

    This is my shortcode:
    [authors_list style=”3″ columns=”4″ amount=”50″ show_count=”no” bio_word_trim=”10″ show_bio=”no” show_link=’no’ skip_empty=”no” exclude=2,22,30,31,37,36]

    But it isn’t really showing a change…

    Plugin Author WPKube

    (@wpkube)

    Hi @dummyt

    Try the following:

    body .authors-list-cols-dir-horizontal .authors-list-col-3 {
    margin: 0;
    width: 25%;
}
body .authors-list-items-s3 .authors-list-item-main {
    background: rgba( 0,0,0, 0.4);
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(1);
}
body .authors-list-item-title {
    color: #fff;    
}
    • This reply was modified 3 years, 10 months ago by WPKube.
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Overlay + Margin tweaks’ is closed to new replies.