[Resolved] Make a full width button

[Alex]

Hi there,

I’m trying to make a full width button for my site but having no luck, using the Catalyst theme and i’d like the styling to be the same as the existing ghost button, just at 90% width – I’ve set up a new class and added the Max-width:90%; value in my CSS but no joy!

Any help very gratefully received,

GeneratePress 2.2.2

GP Premium 1.7.8

[Leo]

Hi there,

Which button are you referring to?

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Alex]

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

[Leo]

Try width: 100%;

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Alex]

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

[Leo]

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 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Alex]

Thanks Leo,

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

Thanks!

[Leo]

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?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Alex]

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!

[Leo]

Glad I could help 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Alex]

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?

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Alex]

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!

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Alex]

Thanks David,

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

[Author]

Posts