[Resolved] CSS Coding Syntax

Home Forums Support CSS Coding Syntax

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1406078
    Sonia

    Hi,

    First off, I have the GP Premium as well as the plugins GenerateBlocks and the WP Show Posts installed on my websites, and I loved the theme, and using those plugins, it makes my life easier designing and styling my websites. Kudos!

    I added some CCS and would like to know if the syntax, as well as the coding, is OK if it’s clean and won’t break down my site. It seems to work fine but just wants to double-check since I am not an expert when it comes to CSS.

    Here is the code:

    /* GeneratePress Site CSS */

    /* Adding Line to Site Containers */
    .inside-article, .sidebar .widget, .comments-area {
    border: 1px solid rgba(232, 234, 237, 1);
    box-shadow: 0 0 10px rgba(232, 234, 237, 0.5);
    }

    /* Removing Header for Category Pages */
    .archive .page-header {
    display: none;
    }

    /* Centering Page and Single Posts Title */
    .page .entry-header, .single .entry-header {
    text-align: center;
    }

    /* List Items Line Spacing */
    .entry-content li {
    margin-bottom: 1em;
    }

    /* Images Caption Text Styling */
    .wp-block-image figcaption {
    text-align: center;
    font-size: 14px;
    }

    /* Adding CTA Button to Menu */

    @media
    (min-width:768px) {
    .main-navigation .main-nav ul li.nav-button a {
    background-color: #d0021b;
    color: #ffffff;
    line-height: 65px;
    border-radius: 5px;
    }
    }

    .main-navigation .main-nav ul li.nav-button:hover a {
    background: #00825f;
    }

    /* Rounding Corners Nav Menu Items */
    .main-navigation .main-nav ul li a {
    border-radius: 5px;
    }

    /* Space between Nav Menu Items */
    .main-navigation .main-nav > ul > li:not(:last-child) {
    margin-right: 5px;
    }

    /* Styling WP Show Posts Plugin */
    a.wp-show-posts-read-more, a.wp-show-posts-read-more:visited {
    border: 2px solid #d0021b;
    background: #d2100b;
    color: #fff;
    }

    a.wp-show-posts-read-more:focus, a.wp-show-posts-read-more:hover {
    border: 2px solid transparent;
    color: #fff;
    background: #00825f;
    }

    .wp-show-posts-entry-title a {
    color: #00825f;
    }

    .wp-show-posts-entry-title a:hover {
    color: #1e73be;
    }

    .wp-show-posts-inner {
    padding: 20px;
    border: 1px solid #ddd;
    }

    /* Adding Box Shadow Effect */
    .my-box-shadow > .gb-grid-column > .gb-container {
    box-shadow: 5px 1px 20px rgba(0,0,0,0.2);
    }

    /* Settings for Visible Containers for Tablet and Mobile */

    @media
    (max-width:1024px) {
    .container {
    margin-left: 20px;
    margin-right: 20px;
    }
    }

    /* Mobile Menu Icon Sizing */
    .menu-toggle {
    font-size: 24px;
    }
    /* End GeneratePress Site CSS */

    Thanks,
    Sonia

    #1406192
    David
    Staff
    Customer Support

    Hi there.

    thanks for the wonderful feedback – much appreciated.

    That CSS looks great 🙂
    My only recommendation would be to move @media query CSS to the very end of your CSS.
    This will stop it from being overwritten if you add similar CSS styles after it.

    #1406201
    Sonia

    Hi David,

    I will move as suggested the @media query CSS to the very end of my CSS.

    Thank you for checking my CCS coding.

    Have a nice day 🙂

    Sonia

    #1406393
    David
    Staff
    Customer Support

    You’re welcome.
    Have a nice day too

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