Column Spacing, Diagonal Lines, & Transparency

[quituck]

Hi,
I have a few problems that I need assistance with. I’m using the ethos theme.

1.) 3 Column Spacing Issue: I have a section with 3 columns it looks fine however, on mobile the are huge gaps between the three columns. Please see the image attached.

2.) Diagonal Lines: I have diagonal lines on a page using the separator. One problems there is an overlap. How to I remove the overlap and hide the section behind the diagonal line. See image attached.

3.) Transparency: So, I have my site transparent using this css code

.page-template-template-blank-4-php .x-main, .page-template-template-blank-5-php .x-main, .page-template-template-blank-6-php .x-main, .page-template-template-blank-8-php .x-main, .site {
background-color: transparent;
}

My problems with this is that my blog page and post page backgrounds are transparent. Any suggestions on how to fix this? I would like the backgrounds white. See the image attached.

Thanks

[lely]

Hi There,

Please do share page URL for each issue so we can check directly. Is this your site: https://internetideators.com? I am not sure which page is in question for each issue. Also, for #3, you mean to negate those custom CSS for blog and post pages? Please clarify. Thank you.

[quituck]

I added a secure note. Please let me know if you need anything else.

[Joao]

Hi There,

In that case we also need the login credentials.

Thanks

[quituck]

Please see the secure note attached. I also have one other issue. There was preinstalled content css that I cant seem to delete on my home page. I try to delete it but it keeps coming back. Any ideas why it’s not deleting? I can always recreate the page to remove it but I’d rather solve the issue.

[ruenel]

Hello There,

Thanks for writing in!

1.) I have viewed almost all of the pages in your site. I could not find this page in question so I wasn’t able to inspect and figure out how to resolve this gap issue.

2.) This is not actually an overlap. This is a result of the background color because you were using a semi transparent background color. Please change it to a solid background color.

3.) To resolve this issue, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.x-content-sidebar-active .x-container.main:before {
    right: -50em;
}

We would loved to know if this has work for you. Thank you.

[quituck]

The gap issue appeared on the first page (Home Page). When I put it in mobile view the gap occurs. Please assist

Also I need help changing the header background to white. It’s also transparent. Check my forum page.

[ruenel]

Hey There,

To resolve your gap issue in smaller screens, please add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r)

@media(max-width: 979px){
  .h-custom-headline.cs-ta-center.h3 {
    margin-top: 0 !important;
    padding-top: 1.15em;
  }
}

And to change the background color of your header into a solid color, you can make use of this code:

 .x-navbar{
    background-color: rgba(24, 21, 21, 1);
}

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