Make a full width button

Hi there,

Which button are you referring to?

Let me know :)

Hi Leo,

Sorry I was working on the site earlier and removed it, just added it in again underneath the three recent posts.

Thanks,

Alex

Try width: 100%;

Hi Leo,

Thanks for your reply,

I'm pretty awful with CSS so I apologise - Do I need to make that button a new class?

Thanks,

Alex

Change the HTML to this:
<a class="smooth-scroll button ghost wide" href="#intro">Wide button</a>

Then this is the CSS:

a.button.wide {
    width: 100%;
}

Let me know :)

Thanks Leo,

Sort of there but it's not responsive unfortunately, I tried a 'max-width: 100%; but no luck - any ideas?

Thanks!

It should be responsive.

width: 100%; means it's 100% of the container width. So when the container shrinks, the button gets smaller.

You are currently using 1000%. Looks like a mistake?

Oh! Sorry! Not sure what I was doing there! Changed it to 100 but it still wasn't resizing with the page - added a margin:auto; on there and it's working fine!

Thank you for your help!

Glad I could help :)

Hi Leo,

Sorry still having trouble with this - for some reason, when I apply any styling in Simple CSS to the button, the changes appear while the customize tab is open but after I save and close, it all disappears, have tried clearing the cache etc but can't seem to get it to stay?

Any ideas?

This is as i'd like it to display -

a.button.wide {
border: 2px solid #000;
color: #000;
width: 90%;
margin:auto;

}

Is the theme default CSS overriding it?

Hi there,

the CSS for the Ghost Buttons is ovderiding some of the CSS. GhostButtons is in the Additional CSS which comes after Simple CSS.

I would suggest you merge the two of them into either Simple CSS or Additional CSS and make sure that your button.wide CSS comes after the Ghost Buttons.

Hi David,

Thanks for your reply,

So it's this CSS from Additional CSS?

--

.button.ghost,
.button.ghost:visited,
.button.ghost:focus {
color: #ffffff;
letter-spacing: 1px;
background: transparent;
border: 2px solid #ffffff;
padding: 8px 20px;
margin: 10px;
border-radius: 6px;
transition: all 0.6s ease 0s;
}

.button.ghost:hover,
.button.ghost:active {
color: #ffffff;
background: transparent;
border: 2px solid #08cec7;
}

--

Do I need to move that to the Simple CSS section and delete from Additional? Then make my styling for the new button with the 'a.button.wide' selector?

Will that not get overwritten if I update the GP theme or is the Additional CSS section also a child?

Thanks!

Simple CSS stores the CSS in the plugin. Additional CSS stores it in the Theme. Updating the Theme won't effect either. Changing the Theme would of course remove the Additional CSS ( note - it will return when switching back to the original Theme).

So you can choose to use either Additional CSS or Simply CSS. Just cut and paste one into the other. Just making sure that your a.button.wide CSS comes after the .button.ghost css.

Thanks David,

I've done that but it still doesn't seem to be working?