Can a button fill width of column but keep text aligned to the left instead of being centred?

[core365]

Hi, I’m working on a site and I’m using a list of buttons for page links and I’m trying to get the button fill the width of the column (otherwise another button goes straight next to it without going on the next line), but keep the text aligned to the left instead of being centred and I’m struggling to find a way of doing this!

Hope you can help!

I’ll put the URL in a secure note as it’s being built on a temp link.

The list of buttons is in the footer, under the heading ‘Making it Easier for You’. I have added margin-right to the buttons already, but I’m aware that when viewed on a mobile, this could then make the button text split onto 2 lines when it isn’t necessary.

Also, do you know why there’s a double vertical scroll bar down the right side of the page?!! I can’t seem to get rid of it! It looks like it’s only started to appear on the latest sites I’ve been doing with your theme for some reason!

Thanks!

[albrecht]

Hi @core365,

Thanks for writing in.

@core365

Hi, I’m working on a site and I’m using a list of buttons for page links and I’m trying to get the button fill the width of the column (otherwise another button goes straight next to it without going on the next line), but keep the text aligned to the left instead of being centred and I’m struggling to find a way of doing this!

Try making the button to full width again then remove the margin-right. Then under the Content flexbox of the button, update the Align Horizontal to end, this will align the text and icon to the left since the row is being reversed already. Here’s a screenshot of the setup.

@core365

Also, do you know why there’s a double vertical scroll bar down the right side of the page?!! I can’t seem to get rid of it! It looks like it’s only started to appear on the latest sites I’ve been doing with your theme for some reason!

Regarding the vertical scroll bar, were you able to fix it already? Since I can only see a single scroll bar.

Hope it helps.

[core365]

Hi, that’s brilliant! Thank you for explaining about how to get the buttons to fill the width but aligning to the left, it worked great!

With regards to the double scroll bar, I’m still seeing this in Cornerstone and also on the front end, whether I’m logged into the admin or logged out. I’ve uploaded a screen grab for you to see. I’m on a mac and I’m using Chrome.

Thanks!

[benursal]

Hey there, we’re glad to have helped!

Regarding double scrolling, this normally doesn’t happen. In this case, through trial and error (I removed HTML code in my browser to see which codes remove the double scroll), I found that the last row of the last section is the cause.

However, I cannot pin-point why that is causing it. It might be with our theme or some customization. But here’s a solution:

Please copy the code below to the Theme Options > CSS

body{
   overflow-x: visible;
}

Hope this helps.

[core365]

Hi, many thanks for looking into it and giving me the CSS to fix it!

As you pointed out whereabouts the problem was, I had a look at it and managed to find out that it was the ‘Gap Height’ on the row that was causing it (it was set to 1 by default) and when I changed the ‘Gap Height’ to ‘0’ the scroll bar disappeared!

It’s probably because I created my own footer and what with the introduction of the ‘Gap Height’, it created that issue with the double scroll bar, because I never used to have that problem before when I created my own footers.

Thanks for your help!

[rad]

Glad it’s working now and you’re most welcome!