[Resolved] Make a full width button

Home Forums Support Make a full width button

Viewing 15 posts - 1 through 15 (of 19 total)
  • Author
    Posts
  • #875689
    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
    #875855
    Leo
    Staff
    Customer Support

    Hi there,

    Which button are you referring to?

    Let me know 🙂

    #875862
    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

    #875870
    Leo
    Staff
    Customer Support
    #875871
    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

    #875878
    Leo
    Staff
    Customer Support

    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 🙂

    #875885
    Alex

    Thanks Leo,

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

    Thanks!

    #875940
    Leo
    Staff
    Customer Support

    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?

    #875942
    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!

    #875948
    Leo
    Staff
    Customer Support

    Glad I could help 🙂

    #877364
    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?

    #877397
    David
    Staff
    Customer Support

    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.

    #877422
    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!

    #877431
    David
    Staff
    Customer Support

    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.

    #877438
    Alex

    Thanks David,

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

Viewing 15 posts - 1 through 15 (of 19 total)
  • You must be logged in to reply to this topic.