[Resolved] CSS Coding Syntax

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