New to the community? Start here

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

Mon, 1 Feb 2016 11:48:32

Predrag Dubajic
- Support
- 4,401 pts: Hero points 32,654 pts: Rep. points LEVEL 30
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
- Site Builder, Child of Zeus
- 95 pts: Hero points 137 pts: Rep. points LEVEL 4
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
Predrag Dubajic
- Support
- 4,401 pts: Hero points 32,654 pts: Rep. points LEVEL 30
Hi Marc,

Title is centered now when I check your site so it could be browser caching not showing you changes right away.

As for the button issue, you are missing one closing bracket after z-index:9999!important; part, so after you add it you should be good to go :slight_smile:

Let us know how it goes.

Best regards,

Predrag
chairleg
- Site Builder, Child of Zeus
- 95 pts: Hero points 137 pts: Rep. points LEVEL 4
Excellent Predag. Thank you.

I still cannot see the “Compare Features” as centred and I have tried 2 different browsers and on my phone?
Alex Stine
- System Administrator
- 1,205 pts: Hero points 5,087 pts: Rep. points LEVEL 23
Hello,

Do you have any caching plugins? It is showing up fine for me.
Adam
- Support Gorilla
- 6,230 pts: Hero points 34,080 pts: Rep. points LEVEL 30
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
chairleg
- Site Builder, Child of Zeus
- 95 pts: Hero points 137 pts: Rep. points LEVEL 4
So sorry for the late reply. That has worked :slight_smile:

Thank you

Marc

Ready to get started?

How do you rate me?

Thank you for rating your experience!