Why thin visible border between sections

Support
#1

I cant figure out why there is a thin grey border between the sections of my site. It’s probably something simple but I’ve looked in all the settings and can’t find a border setting that affects it. The site is kcpropest.com.

#2

Hello Blake,

Do you want your site to be like this?

If that is the case, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.x-navbar.x-navbar-fixed-left,
.x-topbar,
.x-boxed-layout-active .site, 
.x-boxed-layout-active .x-site {
    border: none;
}

Hope this helps. Please let us know how it goes.

#3

Yes the image is the desired look. I’ve added the CSS code and it didn’t have any effect. Here is the all the code I have in the Global CSS just in case something else is affecting it:

.x-navbar-static-active .x-navbar .desktop .x-nav>li>a>span, .x-navbar-fixed-left-active .x-navbar .desktop .x-nav>li>a>span {
    background-color: #87190C;
    border-radius: 6px;
    color: #fff;
    width:180px
}

.x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
    padding: 3px 27px !important;
    font-size: 15px;
}

.masthead-inline .x-navbar .desktop .sub-menu {
    background-color: #87190C;
    border-radius: 6px;
}

.x-navbar .desktop .x-nav > li > a, .x-navbar .desktop .sub-menu a, .x-navbar .mobile .x-nav li a {
    color: #fff;
}

.x-sidebar,.nf-form-content, #text-2 > .h-widget {
  background-color:#87190c;
  color: #FFF;
}

[data-x-icon-o]:before, [data-x-icon-l]:before, [data-x-icon-s]:before, [data-x-icon-b]:before, [data-x-icon]:before, [data-x-fa-pro-icon]:before, [class*="x-icon-"]:before {
    line-height: 2;
}

.nf-field-element input {
  line-height:inherit;
}

@media (max-width: 1199px) {
  .x-navbar .mobile .x-nav > li > a {
    color: #000;
  }}
@media (max-width: 1199px) {
  .menu-item-1726 a > span  {
    color: #000;
  }
}

.x-sidebar .widget:first-child {
    margin-top: 35px;
}  
.contactusform {
  background-color: #FFF;
}

#menu-footer-menu a {
  font-size:14px
}

.x-btn-navbar > i {
  color: #000;
}

.nf-field-label > label > span{
  color: #FFF;
}

//Removes the thin grey border between all the sections of the site
.x-navbar.x-navbar-fixed-left,
.x-topbar,
.x-boxed-layout-active .site, 
.x-boxed-layout-active .x-site {
    border: none;
}

Thank you so much for your assistance, I do appreciate it!

#4

Hey Blake,

The code is not working because you added a comment that is incorrect. You should be adding this code instead:

/* Removes the thin grey border between all the sections of the site */
.x-navbar.x-navbar-fixed-left,
.x-topbar,
.x-boxed-layout-active .site, 
.x-boxed-layout-active .x-site {
    border: none;
}

To add a comment in css, you use /* comment here */. For more details, please check this out:

#5

Ah thats it! Works great now, thanks @RueNel!

#6

You’re welcome. Glad we’re able to help.

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.