BeTheme : button to 100%? and less padding.

MacMartino

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

Hi,

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

MacMartino

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

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; }

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

MacMartino

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

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

MacMartino

? 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

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

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.

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

MacMartino

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

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.

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

MacMartino

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

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

MacMartino

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

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; }

Learn more: Video Tutorials | How To | FAQ Vote on what comes next