Hello @iamwithU,
I can see that there are still some unclosed curly braces that made other CSS blocks orphaned or ignored. This is your custom CSS:
/*
// Body.
*/
body {
line-height: 1.7;
}
/*
// Site container.
*/
.x-boxed-layout-active .site {
width: 100%;
border: 0;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.575);
}
/*
// Navbar.
*/
.x-navbar {
border-right: 0;
box-shadow: 2px 0 4px rgba(0, 0, 0, 0.275);
}
/*
// Hours.
*/
.hours {
margin: 0 auto;
border: 1px solid rgba(255, 255, 255, 0.25);
padding: 1.15em 1.5em;
font-size: 0.915em;
color: #fff;
border-radius: 4px;
}
.hours.home {
margin-top: 20px;
max-width: 275px;
font-size: 0.85em;
}
/*
// Location.
*/
.location img {
width: 250px;
margin: 0;
}
.location .h-location {
margin: 0 0 8px;
border-bottom: 1px solid rgba(0, 0, 0, 0.25);
padding: 0 0 8px;
line-height: 1.1;
}
.location .h-features {
margin: 45px 0 8px;
border-bottom: 1px solid rgba(0, 0, 0, 0.25);
padding: 0 0 10px;
font-size: 1em;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.location .p-info,
.location .p-features {
font-size: 16px;
line-height: 1.5;
}
/*
// Call to action.
*/
.cta {
margin: 0 auto;
max-width: 425px;
}
/*
// Custom headlines.
*/
.h-custom-headline.accent span::before,
.h-custom-headline.accent span::after {
border-bottom-color: rgba(255, 255, 255, 0.15);
border-top-color: rgba(255, 255, 255, 0.15);
}
.x-container.offset {
margin: 0 auto;
}
body .x-container.max,
body .x-container.width {
width:100%;
}
.x-block-grid>li {
margin: 2% 2% 0 0;
}
body.archive.x-navbar-fixed-left-active {
padding-left: 0px !important;
}
@media ( min-width: 980px ) {
.archive .x-navbar {
display: none;
}
.archive .h-landmark, .p-landmark-sub {
display: none;
}
.archive .x-boxed-layout-active .site {
margin: 0 !important;
}
.archive li.product-category.product {
display: none;
}
.woocommerce li.product {
box-shadow: none;
border: 0;
background: none !Important;
}
.woocommerce .x-content-band.vc .wpb_row, .x-content-band.vc .wpb_content_element {
background: none;
}
.woocommerce .x-container.max, body .x-container.width {
margin-top: 0;
margin-bottom: 0;
}
.archive .x-main.full {
margin-top: -25px;
}
@media (min-width: 980px){
.home a.x-brand.img {
display: none;
}
.archive.post-type-archive.post-type-archive-product #x-content-band-3 {
display: none;
}
.home .x-navbar-fixed-left .desktop .x-nav, .x-navbar-fixed-right .desktop .x-nav {
margin-top: 7em;
}
.archive .site,
.archive .site > .x-container.max.width {
width: 100%;
max-width: 100% !important;
}
.archive #x-content-band-1 .h-custom-headline {
margin-top: 0 auto;
}
.archive.woocommerce .h-custom-headline.h5 {
color:red;
}
body p:empty {
display:none;
}
.archive.woocommerce .x-main.full {
margin-top: 0px;
}
.h-custom-headline p {
margin:0;
}
.product_gallery .a3dg-navbar-control .icon_zoom span, .product_gallery .a3dg-navbar-control .slide-ctrl span {
text-transform: lowercase;
font-family: Georgia;
font-size: 12px;
font-style: italic;
}
.archive.woocommerce div#x-content-band-3 {
padding: 0;
margin: 0;
}
.woocommerce li.product .entry-wrap {
padding-top: 0px;
}
.woocommerce li.product .entry-header h3 {
padding-bottom: 0 !important;
}
.woocommerce-ordering select, .woocommerce-result-count {
color: #fff;
}
.h-custom-headline.accent span > span:before, .h-custom-headline.accent span > span:after {
display: none !important;
}
.x-content-band .woocommerce .cols-4 li.product, .x-content-band .woocommerce.columns-4 li.product {
width: 100%;
}
.archive #x-content-band-1,
.archive #x-content-band-2 {
background-color: transparent !important;
}
@media (max-width:767px){
.mobile-mbn{
margin-bottom: 0 !important;
}
}
a.x-btn-navbar.collapsed,
.masthead-inline .x-btn-navbar {
background-color: #000 !important;
}
.x-img-circle, .x-img-circle img {
margin-bottom: 1%;
}
.x-boxed-layout-active .entry-wrap {
padding-bottom: 0 !important;
}
/*reset margin to 0 when viewed on mobile*/
@media (max-width: 767px) {
.mobile-man {
margin: 0 !important;
}
}
@media (max-width: 767px) {
/*make the featured box title and text closer to each other*/
.home #x-section-8 .x-feature-box-title,
.home #x-section-8 .x-feature-box-text {
margin-top: 0;
line-height: 1;
}
/*make the featured box title closer to the image*/
.home #x-section-8 .x-feature-box-graphic {
margin-bottom: 0;
}
}
@media ( max-width: 979px ) {
.convert_plug_heading {
font-size: 45px !important;
}
}
@media ( max-width: 979px ) {
.convert_plug_heading {
font-size: 45px !important;
}
}
@media ( max-width: 767px ) {
.convert_plug_heading {
font-size: 40px !important;
}
}
.x-flexslider-shortcode-container {
margin-bottom: 0 !important;
}
.x-content-band .woocommerce .cols-4 li.product {
margin: 5% 2%;
}
@media (max-width: 768px){
.cp-optin-to-win .cp-image-container, .cp-optin-to-win .cp-text-container, .cp-optin-to-win .cp-text-container.cp-right-contain {
padding: 0;
}
.cp-modal-body {
padding: 15px 25px !important;
}
@media (max-width: 610px) {
.cp-first-order-2 form#smile-optin-form {
margin: 10px 0px;
}
}
@media (orientation: landscape) {
.post-type-archive-product #x-content-band-2 .x-column[class*="x-"] {
display: table-cell;
width: 20%;
vertical-align: top;
float: left;
margin-right: 0;
}
}
@media (max-width: 480px) {
.post-type-archive-product #x-content-band-2 .x-column[class*="x-"] .hidden_products{
overflow: hidden;
height:0px;
-webkit-transition: all 2s;
transition: all 2s;
}
}
@media ( max-width: 480px ) {
.niconne {
font-family: 'Niconne', cursive !important;
font-size: 38px;
}
}
@media( max-width:767px){
.custom-columns .x-column.x-sm{
float:left;
}
.custom-columns .x-column.x-2-3{
width: 65.33332%;
}
.custom-columns .x-column.x-1-3{
width: 30.66666%;
}
.custom-columns .x-column {
margin-right: 4%;
}
.custom-columns .x-column:last-of-type {
margin-right: 0;
}
@media( max-width:480px){
.custom-columns .x-column.x-sm{
float: none;
width: 100%;
margin-right: 0;
}
}
@media (max-width: 767px) {
#x-section-5 .x-container .x-column.x-1-2 {
width:50%;
display: table-cell;
}
#x-section-5 .x-container .x-column.x-1-2 h2{
font-size:130% !important;
}
#x-section-7 .x-container .x-column.x-1-3 {
width: 33.33333%;
display: inline-block;
vertical-align:top;
min-height:358px;
}
@media (max-width: 480px) {
#x-section-5 .x-container .x-column.x-1-2 {
width:100%;
display: block;
}
}
#x-section-7 .x-container .x-column.x-1-3 {
width:100%;
display: block;
min-height:0px;
}
.cp_id_c3747 .cp-form-container {
margin-bottom:0;
}
@media only screen and (max-width: 767px) {
.convert_plug_heading .cp_responsive {
font-size: 24px !important;
}
}
.home.x-boxed-layout-active .entry-wrap {
padding-top: 0;
}
@media (min-width: 1001px) {
.site,
body .x-container.max.width {
max-width: none;
}
}
.x-nav-tabs > .active > a, .x-nav-tabs > .active > a:hover {
color: black;
background-color: #D3D3D3
}
.x-nav-tabs > li > a:hover {
color: #D3D3D3;
}
.x-tab-content {
background-color: #fff !important;
border-color: #fff !important;
color: #000 !important;
}
body .x-nav-tabs.right>.x-nav-tabs-item {
border: 1px dotted gray;
}
@media (min-width: 481px) {
#x-section-2 .x-nav-tabs.left,
#x-section-2 .x-nav-tabs.right {
float: left;
width: 24%;
max-width: 200px;
}
}
/*caption/title*/
.woocommerce li.product .entry-header h3 {
font-size: 100%;
}
/*price*/
.woocommerce li.product .entry-header .price>.amount,
.woocommerce li.product .entry-header .price>ins>.amount {
font-size: 80%;
}
.niconne {
font-family: 'Niconne', cursive !important;
}
.page-id-839 .widget_product_search,
.page-id-2096 .widget_product_search,
.page-id-987 .widget_product_search,
.page-id-408 .widget_product_search,
.page-id-925 .widget_product_search,
.page-id-1975 .widget_product_search,
.page-id-842 .widget_product_search,
.page-id-403 .widget_product_search {
display: none;
}
.entry-wrap, .x-colophon, .site, .x-root {
background-color: transparent !important;
}
@media (max-width: 767px){
.woocommerce li.product .entry-header .button {
display: none !important;
}
}
.button
{
text-shadow: unset;
}
.x-nav
{
text-align: center !important;
}
.x-colophon.bottom .x-nav li a {
letter-spacing: 0px;
text-transform: none;
}
.sku_wrapper {
display: none;
}
It is a bit in a mess. It should have been indented so that you can easily see the CSS blocks and @media
where in you can also see whether the curly braces were in the right places or have been correctly closed. For example, the indented codes should look like this:
.element-class {
/* some styling here */
}
@media(max-width: 980px) {
.element-class {
/* some styling here */
}
}
Tip: Every open curly brace must be closed to prevent any conflict.
I would highly recommend that you go over your code one line at a line. That is the only way you can check your work.
Kindly let us know how it goes.