BeTheme : button to 100%? and less padding.

MacMartino · February 2016

Hi, at my testsite fysiotherapie.bpr.nu

we run a test. Now, we would like to have 6 buttons at 100% width in the blue box, and not with that much space between them.

I cannot find how to change that. Can I add a class, or anything, to manage this?

so - button goes wider tha just the text

and - not like 2cm white space between teo buttons...

please help.

thanksz!

Albert · February 2016

Hi,

please show us on screenshot what exactly you want to achieve.

MacMartino · February 2016

it is at fysiotherapie.bpr.nu/home the blue part in the image.

I do not knwo how to insert a screenshot here, but it should be clear right away

Albert · February 2016

To make those buttons 100% width, you need to use the following css:

a.button.button_stroke_custom { text-align: center !important; width: 100% !important; }
a.button .button_label { float: none !important; }

MacMartino · February 2016

Thanks;

But i'm afraid that all buttons (on other locations) also will change if I add this to custom css. Is there a way to only change those at that part?

Albert · February 2016

You can set ID for section and then before each line of css we gave you above, use that ID.

MacMartino · February 2016

? If i set a section name in the builder above 'This filed is used as an Section label in admin panel only', i use : Schoudertitel

But if i add the code below nothing happens. Shouldn't i address the section otherwise?

Schoudertitel a.button.button_stroke_custom { text-align: center !important; width: 100% !important; }
Schoudertitel a.button .button_label { float: none !important; }

MacMartino · February 2016

Beside this (a) question, how to set the correct code for the section 'Schoudertitel' om the 'home'page,

there's this (b) question about the big space between the buttons. How can I get them to be stacked upon eachother, without the big space under/above ?

Thanks in advance

Albert · February 2016

ID name = # so before Schoudertitel should be #, as below:

#Schoudertitel a.button.button_stroke_custom { text-align: center !important; width: 100% !important; }
#Schoudertitel a.button .button_label { float: none !important; }

Of course # should be used in css rule only, not in ID field.

MacMartino · February 2016

Can you please help me with this.

1) I added the code (#Schoudertitel) as you mentioned, in the custom CSS tab.

2) I named the section label 'Schoudertitel'

In this section i entered 'Custom CSS Class' 'Schoudertitel' but nothing happened. I Tried '# Schoudertitel' but nothing happened as well. I even tried tot add <div class="Schoudertitel" but nothing happens as well.

So, ok I entered the Custom CSS code.

But now, how do I get it to work in the box that I want?

it is at fysiotherapie.bpr.nu/home the blue part in the image.

Please help

Albert · February 2016

Please open your website in Firefox html mode (CTRL+U) and check how many html errors you got. Please fix them first and all should be fine.

MacMartino · February 2016

I opened the page and set it in HTML mode. I don't see any HTML errors. How do you see it?

I downloaded your be theme sample content, and adjusted it. So I wasn't really into HTML things. Is it possible that HTML errors are within the theme?

Can you please help. I'm not a developer, but try to use your theme. I do not see any errors, and the help provided isn't clear to me now

Albert · February 2016

If you don't see any errors, then probably we are talking about different sites. http://pasteboard.co/1kk5dbe9.png - this is the proof.

MacMartino · February 2016

Okay, so the red parts are errors. Did not know that.

We always use </br> bu changed them now. So no red marks anymore, yeah! But...

Ok, so we cleaned it up. Now, the part remains where we would like to know How to get the #Schoudertitel buttons (100% wide) to that blue area... Cause when we fill in 'Schoudertitel' at the Custom CSS part, nothing happens yet.

Albert · February 2016

As we see, you still got the errors but we noticed something else. The Schoudertitel is a class name, not ID, so the right css should be:

.Schoudertitel a.button.button_stroke_custom { text-align: center !important; width: 100% !important; }
.Schoudertitel a.button .button_label { float: none !important; }

BeTheme : button to 100%? and less padding.

Comments