[Christian BParticipant]

I have created a content area (or content band, I think that’s what you call it), with a background image and set it as Parallax. Inside the area, I have also created a “jumbo” button. It’s all good. The problem, however is, even the largest button that I created still appears too small.

Have a look what I have created so far:

http://www.bizraven.de/1s.png
(The button is also not properly centered)

I want to look the button to like this:

http://www.bizraven.de/2s.png
(And how would I get it centered?)

Can you please help in how I might get the button the way I want? Thanks.

[Christian BParticipant]

In case it is not possible to create a larger button, is there another way I could create the text STARTING AT $199/mo with a rectangular border? CSS possibly? (In the end, it doesnt need to be a button as long as I get text bigger)

[ChristianModerator]

Hey Christian,

Please add “width: 420px; height: 90px;” to the Style attribute or field of your button and add “center-text” class to your column or content band where you placed that button.

Thanks.

[Christian BParticipant]

This reply has been marked as private.

[Nabeel AModerator]

This reply has been marked as private.

[Christian BParticipant]

This reply has been marked as private.

[ChristianModerator]

Hey Christian,

You didn’t place the CSS in the style attribute of the button (see http://prntscr.com/4iu50t). I’ve placed it there for you. Please see the result http://www.qvirtual.de/home-page-2/. Please take note though, that px value is not responsive. Therefore, you might want to limit it to 420px width or add a class to your button and add the CSS below in Apperance > Customize > Custom > CSS.

.your-class {
width: 510px;
height: 105px;
padding-top: 30px;
}

With that, you can change the width in mobile view like

@media (max-width: 767px) {
.your-class {
width: 80%;
height: 80px;
padding-top: 10px;
}
}

That is just a sample media query. Custom media queries must be added by you or a Web Developer.

Hope that helps. 🙂

[Christian BParticipant]

You are a legend!!! Works great 🙂

So, I ended up creating a class for my button:
<div class=”your-class”><span style=”color: #ffffff;”>STARTPAKETE AB €200/Monat</span></div>

Then, I added the following CSS:

.your-class {
width: 910px;
height: 105px;
padding-top:27px;
font-size:45px;
}

One last question, the button does not appear to be centered. I still got the “center-text” code in the content band though, but it is no longer working. What code is missing to center the button?

Sorry, this is gonna be my last question. After this, I wont bother you anymore 🙂 Promised 🙂

[ZeshanMember]

Hi Christian!

Thank you for writing in! You’re most welcome 🙂

This is because you are having columns in the content band where you have added the button (see: http://prntscr.com/4j2x1n). Simply remove the columns and move your button to the content band directly.

Hope this helps. 🙂

Thank you.

[Christian BParticipant]

Thanks. I have gotten rid of the columns in the content band which has moved the button to the left, but it is still not center. So, the button is still in the content band, because I want the button to sit in front of a Parallax background. Is this the problem why I cant get in centered? Not sure what else to try.

Thanks 🙂

[Nabeel AModerator]

Hey Christian,

Did you clear the cache? It’s showing centered when i view it on my system. Can you share a screenshot with us of what you see?

[Christian BParticipant]

This reply has been marked as private.

[CousettMember]

A couple of things that needs to be done.

• Update your theme – update your X theme to version 2.4.0 as you’re still using 2.1.0 which is fairly old at this point. This will also update the latest X-shortcode. <br />
  You can download latest X from ThemeForest<br />
  This update guide is also helpful highlighting steps to accomplish the update -> http://theme.co/x/member/kb/updating-your-theme-and-plugins/
• Try adding this CSS code:

  .x-btn.x-btn-square {
  width: 100%;
  }

  and

  .your-class {
  width: inherit;
  }

[Christian BParticipant]

This reply has been marked as private.

[RadModerator]

Hi Christian,

In that case, you can add your own class name for your specific button.

Example :

.x-btn.x-btn-my-custom-css {
width: 100% !important;
}

Then all you have to add in your button’s class is x-btn-my-custom-css.

Example : [button class="x-btn-my-custom-css"]

Now, if you need to center a button, you can just add text-align: center; on its column’s style attribute. Button are inline element which can be align using text alignment.

You can try adding center-text to column’s class attribute to align your button. This will only work on buttons witn no 100% width.

Removing this is recommended :

.x-btn.x-btn-square {
width: 100%;
}

Thanks!

[Author]

Posts