Centre "Compare Features" and making FREE button hide under header when scrolled.

http://sheepwalkhosting.com/pricing/

Please can you tell me the CSS to use to
1. Centre "Compare Features" and
2. Make FREE button hide under header when the page scrolls and you click on it.

Thank you
Marc

  • Predrag Dubajic

    Hey Marc,

    Hope you had a nice weekend :slight_smile:

    Can you try applying this CSS code and tell us if that does the trick:

    #post-277 .entry-content > h2 {
    	text-align: center;
    }
    
    .free-plan-link-logged-in,
    .free-plan-link {
    	z-index: 1;
    }

    If your theme doesn't have custom CSS field, then you may wish to use a child theme or a plugin like this one for this additional CSS. That way you're protected when you come to upgrade.

    Best regards,
    Predrag

  • chairleg

    Hello Predag

    Thank you for your prompt reply. That did not seem to work. I am using a Custom CSS plugin and I have the following CSS:

    .pricing-column .psts-level-1 .choose-plan-button button {
    display: none;
    }
    .psts-level-1 button {display:none;}
    .psts-level-1 .summary {height:160px!important;}
    .free-plan-link a {
    width:190px;
    background: #D65050;
    -webkit-border-radius: 4;
    -moz-border-radius: 4;
    border-radius: 4px;
    font-family: Arial;
    font-weight:bold;
    text-transform: uppercase;
    color: #FFF;
    font-size: 0.8em;
    padding: 0.8em 1em;
    text-decoration: none;
    position:absolute;
    top:-51px;
    left:10px;
    height:48px;
    display:block;
    z-index:9999!important;

    .free-plan-link-logged-in,
    .free-plan-link {
    z-index: 1;
    }

    }
    .free-plan-link a:hover {
    background:white;
    border: 1px solid #D65050;
    color: #D65050;
    }
    #prosites-signup-form-checkout {
    width: 80%;
    max-width: 1080px;
    margin: 50px auto;
    }
    #prosites-signup-form-checkout form div {
    font-style: italic;
    }
    #prosites-signup-form-checkout label {
    display: block;
    font-style: normal;
    font-weight: bold;
    margin-top: 1em;
    }
    #prosites-signup-form-checkout label.checkbox {
    margin-top: 0;
    }
    #prosites-signup-form-checkout input[type="text"], #prosites-signup-form-checkout input[type="email"] {
    display: block;
    width: 75%;
    max-width: 400px;
    }
    #prosites-signup-form-checkout form div.email br {
    display: none;
    }
    #check-prosite-blog {
    background: #93b771;
    color: #fff;
    padding: 0.8em;
    }
    .hentry .title-post {
    font-size: 40px;
    font-weight: 600;
    line-height: normal;
    padding-bottom: 10px;
    margin: 0;
    }
    .post_content > .psts-signup-message + h2 {
    display: none;
    }
    .site-info.container {
    display: none;
    }
    #post-277 .entry-content > h2 {
    text-align: center;
    }

    Marc

  • Adam Czajczyk

    Hello @chairleg!

    I checked your site and I can confirm that I don't see "Compare features" centered. However, assuming that both Predrag and Alex see that right I think Alex diagnose is close to the point.

    I've found out that there's a CSS rule in minified CSS output that states:

    .pricing-column .sub-title {text-align:right;}

    This comes out from the "minified" CSS so I think it would be good to disable and clear caching/minify plugins on a site and then give it another try. In case it didn't help, try adding this rule to your custom CSS

    .pricing-column .sub-title {text-align:center!important;}

    I hope that helps!

    Best regards,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.