Tagged: boxes, featured content, vertical separators
- This topic has 5 replies, 2 voices, and was last updated 3 years, 1 month ago by Skandha.
-
AuthorPosts
-
October 27, 2020 at 3:28 pm #263958Ken leidnerParticipant
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.
October 27, 2020 at 9:58 pm #264004SkandhaParticipant@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,
SkandhaOctober 28, 2020 at 11:39 pm #264171Ken leidnerParticipantYes, 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;
}October 30, 2020 at 6:55 am #264312SkandhaParticipant@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,
SkandhaOctober 30, 2020 at 10:23 pm #264362Ken leidnerParticipantPerfect!!
Thanks for the help!
October 31, 2020 at 9:34 am #264395SkandhaParticipant@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 -
AuthorPosts
- The topic ‘Featured Content boxes around each article (page)’ is closed to new replies.