Custom CSS for main content / remove divider?

Hello @baldilocks

Hope all is well!

Please share here a link to your site so we could see the CSS up close. Also please share a screenshot with a divider.

Please try also this CSS for the content section:

.hustle-modal-message {
    font-family:Futura;
    font-size:15px;
    color:#fff;
}

Let us know how it went!

Kind regards,
Nastia

Hi and thank you!

The site is behind password protection so can’t share but I’ve attached an screenshot of the divider. https://prnt.sc/kzr9k6

The code you shared didn’t seem to work.

Could you please try the following CSS under Edit PopUp -> Design -> Custom CSS

.wph-modal .hustle-modal.hustle-modal-simple header {
  border-bottom: none;
}

screenshot: https://monosnap.com/file/b0y9CJtRdnLcM4WjoVWIkLlLJPkCEr#

Let us know how that goes!
Thank you,
Dimitris

Hi,

I have custom CSS enabled. Managed to change the title and subtitle font and remove the horizontal divider. However, it still leaves a big gap between subtitle and content.

https://prnt.sc/l0rme7

Currently using the following code.

.hustle-modal.hustle-modal-simple header {
  border-bottom: none;
}

.hustle-modal .hustle-modal-title{
    font-family:Futura;
    font-size:30px;
    color:#fff;
}

.hustle-modal .hustle-modal-subtitle{
    font-family:Futura;
    font-size:15px;
    color:#fff;
}

.hustle-modal-message {
    font-family:Futura;
    font-size:15px;
    color:#fff;
}

.hustle-modal .hustle-modal-body{
    font-family:Futura;
    font-size:22px;
    color:#fff;
}

https://prnt.sc/l0rthj

• This reply was modified 6 years, 5 months ago by baldilocks.

Hello @baldilocks

Hope all is well!

This gap is added from the Main content section. Please edit the pop-up, load Content tab and remove the additional line from there. Please see this:
https://monosnap.com/file/kxs3TWTS5Z23C2jhxCn58goUOkgKGr

Otherwise, please share here a link to your site so we could see the CSS structure up close and provide the CSS for your site.

Please advise,

Kind regards,
Nastia

Hi and thanks for the reply, Nastia.

The line is part of the Simple style. If I do not use the Title and Subtitle feature then the line disappears but spacing remains.

1 – backend showing the title and subtitle options: https://prnt.sc/l0up0k
2 – frontend result when title and subtitle are in main content: https://prnt.sc/l0uprl

But (always a but) then i still have the font issue as it doesn’t change even with the code that you mentioned earlier.

.hustle-modal-message {
    font-family:Futura;
    font-size:15px;
    color:#fff;
}

I managed to changed the Title and Subtitle font when I used the following CSS:

.hustle-modal .hustle-modal-title{
    font-family:Futura;
    font-size:30px;
    color:#fff;
}

.hustle-modal .hustle-modal-subtitle{
    font-family:Futura;
    font-size:15px;
    color:#fff;

But the custom code to change the main-content font doesn’t work ??

Solution I ended up using:

1. Don’t use the Title and Subtitle fields.
2. Used the following code to change content font:

<span style="font-weight: 700; font-family: Futura;"></span>`

Hello @baldilocks

I apologize for a late reply! Hope you’re well!

Glad to know you’ve fixed the issue. If you need anything else at all, we’re here for you, please just reopen the ticket or create a new one.

Have a good day and take care!

Cheers,
Nastia