Docs

[tylervarian]

Hi. I have a MailChimp Form at the

very bottom

of the home page.

http://69.195.124.107/~tudiofi8/

I would like to do two simple things.

1. On the title: LET’S MOTIVATE YOU! I would like to open up the lettering a tiny bit. The lettering is very “tight”.
2. Once opened up a little bit, take the title LET’S MOTIVATE YOU! ad center it above the MailChimp form.

Thanks so much!!

[Rahul]

Hey There,

Thank you for contacting us 🙂

Please use

.x-subscribe-form-539 h1 {
    color: #ffffff;
    font-size: xx-large;
    float: right;
}

and let us know if this CSS code meets your requirement. Thanks!

[tylervarian]

This reply has been marked as private.

[Lely]

Hi There,

There are syntax errors on your custom CSS. See attached screenshot for details.

[tylervarian]

THANKS SO MUCH for going through my CSS and giving me the changes. You guys are the BEST!!!

I made the changes but as you can see, the text still hasn’t moved in the MailChimp form.

[Rupok]

Hi there,

Still there are lot of issues on your code and it’s broken on multiple places. Most of the media queries are not closed properly; so most of your code actually executing in wrong way and not taking any effect.

I have cleaned up your code and adding here :

.x-navbar {
    -webkit-box-shadow: 0px 7px 31px -5px rgba(0, 0, 0, 0.55);
    -moz-box-shadow: 0px 7px 31px -5px rgba(0, 0, 0, 0.55);
    box-shadow: 0px 7px 31px -5px rgba(0, 0, 0, 0.55);
}
.x-navbar .mobile .x-nav li>a {
    border: none;
}
a.x-btn-navbar {
    background-color: transparent !important;
    box-shadow: none !important;
}
.remove-bold-paragraph {
    font-weight: 400;
}
div#meettheteam {
    background-position: top right;
}
@media (max-width: 400px) {
    .mobile-hide {
        display: none!important;
    }
    .home #x-section-17 .x-img {
        width: 100%;
    }
}
.x-pricing-column h2 {
    color: white;
}
.x-pricing-column:nth-child(1) h2 {
    background-color: #9CC64D;
}
.x-pricing-column:nth-child(2) h2 {
    background-color: #808080;
}
.x-pricing-column:nth-child(3) h2 {
    background-color: #003366;
}
.x-navbar .desktop .x-nav > li#menu-item-121.x-active > a,
.x-navbar .desktop .x-nav > li#menu-item-121.current-menu-item > a {
    box-shadow: none;
    color: rgb(0, 51, 102);
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
    #training {
        display: none;
    }
    #meettheteam {
        display: none;
    }
}
@media only screen and (min-width: 1024px) and (max-width: 1366px) {
    #training {
        display: none;
    }
    #meettheteam {
        display: none;
    }
}
.x-subscribe-form-539 h1 {
    color: #ffffff;
    font-size: xx-large;
    float: right;
}

Let’s use this code to replace your existing code. I didn’t do this so that you can check for your reference and re-check the media queries.

Hope this helps.

[tylervarian]

THANKS SO MUCH for going through my CSS and giving me the changes. You guys are the ABSOLUTE BEST!!!

2 things:
1. The LET US MOTIVATE YOU! is still left justified on mobile and iPad. How do I make that text responsive?
2. I need to take a CSS coding class. 🙂 Any suggestions?

Thanks again!!

[Joao]

Hi There,

Please add the following code and adjust according to your wishes:

@media (max-width: 979px) {

.x-subscribe-form-539 h1 {
    font-size: 2em;
    text-align: center;
}
}

Regarding CSS I really loved a tutorial called CSS Basics from a youtube channel called DevTips, the guy is amazing and so funny, totally worth.

Let us know if you need further help.

Joao

[tylervarian]

Thanks so much for MORE code!! Love it.

Take a look at the attached image from my mobile phone. The email line is “squished” up against the headline. What do you think?

🙂

[Rad]

Hi there,

Please add this as well,

@media ( max-width: 767px ) {

.x-subscribe-form fieldset {
    display: block;
    width: 100%;
}

}

Cheers!

[tylervarian]

Thanks Rad.

I’m sorry to be such a pain. I added the new code and the mobile version is still a bit of a mess. See attachment. 🙁

Thanks so much for your help!

[tylervarian]

By the way, while you’re looking at the MailChimp form on your mobile device, do you see how the checkerboard image pulls away from the section above it? I am using this checkerboard throughout the site and it does this on mobile in every instance. Is there any code I can use to keep the checkerboard bumped up against the section above it?

Thanks again!

[Joao]

Hi There,

Please add the following code to Appereance > Customizer > Custom > CSS

@media (max-width: 481px) {
#x-section-22 {
    margin-top: -5px;
    margin-bottom: -2px;
}
}

Hope that helps

Joao

[tylervarian]

Joao, still not working. Now title is sitting above the email box but it is right justified – needs to be center. ALSO, please see my ps from previous reply regarding the racing stripe images throughout the site.

THANKS AGAIN!

[Rue Nel]

Hello There,

To center the title, please have your custom css updated and use this:

@media (max-width: 979px) {
  .x-subscribe-form-539 h1 {
    font-size: 1em;
    text-align: center;
    float: none;
  }
}

Hope this helps. Please let us know if this would work out.

[Author]

Posts