Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #263958
    Ken leidner
    Participant

    I would like to put a box around each page I have added to the Featured Content section of the Theme. Or at least a vertical line between each of the 4 columns, in my case, to help separate them. Can the line after the Featured Content section be made darker?

    I am using the free version of the Catch Responsive theme. Website is here (https://rarclubackup.website) and as you can tell it is a work in progress.

    #264004
    Skandha
    Keymaster

    @ken-leidner: Hello there,
    Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

    #featured-content {
        border-bottom: 5px solid #eee;
    }
    #featured-content .featured-content-wrap article:not(:last-child) {
        border-right: 1px solid #000;
    }

    Let me know if this is what you want!
    Kind Regards,
    Skandha

    #264171
    Ken leidner
    Participant

    Yes, except when I have more items then columns. 4 item and 4 columns it is great, 4 items and 3 columns the single item in the “second” row has no vertical line. 5 items and 3 columns there is a vertical line between the two items on the second row.
    For now limiting the featured content to the number of columns will work.

    I did do this, below, to have lines on both sides of an article. The only down side is the double lines when there is a short article. That an it seems so wordy, is there a something like
    #featured-content .featured-content-wrap article:child {(border-left,border-right): 1px solid #000;
    I know that isn’t the right syntax but you get the idea.

    #featured-content {
    border-bottom: 5px solid #eee;
    }

    #featured-content .featured-content-wrap article:first-child {
    border-left: 1px solid #000;
    }
    #featured-content .featured-content-wrap article:last-child {
    border-right: 1px solid #000;
    }

    #featured-content .featured-content-wrap article:not(:last-child) {
    border-right: 1px solid #000;
    }

    #featured-content .featured-content-wrap article:not(:first-child) {
    border-left: 1px solid #000;
    }

    #264312
    Skandha
    Keymaster

    @ken-leidner: Hello there,
    Please use the CSS Code below instead of the previous code I provided you.

    #featured-content .featured-content-wrap article:last-child {
        border-right: 1px solid #000;
    }
    #featured-content .featured-content-wrap article {
        border-left: 1px solid #000;
    }
    .featured-content-wrap {
        display: flex;
        flex-wrap: wrap;
    }

    Let me know if this is what you want!
    Kind Regards,
    Skandha

    #264362
    Ken leidner
    Participant

    Perfect!!

    Thanks for the help!

    #264395
    Skandha
    Keymaster

    @ken-leidner: Hello there, I hope I was able to resolve your issue. If it’s not too much trouble, I have a quick request: could you please leave an honest review?
    https://wordpress.org/support/theme/catch-responsive/reviews/#new-post
    Your review will help others know what to expect when they’re looking for the support I offer. Even a sentence or two would be hugely
    appreciated. Thanks, and if there’s anything else at all that I can do to help, don’t hesitate to let me know. Have a great weekend! 🙂

    Kind Regards,
    Skandha

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.