[Support request] How to make a button full width

Home Forums Support [Support request] How to make a button full width

Home Forums Support How to make a button full width

  • This topic has 8 replies, 2 voices, and was last updated 7 months ago by Fernando.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #2327891
    xinghui

    Hello, I created a button on the page, now I want to change the width of this button to 100%, my approach is to add code inside the css, but I don’t know why the code I added doesn’t work, please help me Check out how to fix this problem. At first my idea was to directly add html code to create a new button, but now I want to create it directly with your button and change the width of this button to full width

    #2327898
    Fernando
    Customer Support

    To have a better understanding of the issue, may you provide the link to the site in question and point us to where we can see the button?

    You may use the private information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

    #2327918
    xinghui

    hi,here is my image url :https://postimg.cc/rKvNPn7Z,You can directly open this URL to view the picture directly ,Please reply in time and provide me with effective help, thank you
    image insert:button can not full wide,how to make it bacome full wide

    #2327922
    xinghui

    #2327923
    Fernando
    Customer Support

    You shouldn’t add CSS in the additional CSS class section. CSS should be added in Appearance > Customize > Additional CSS.

    Moreover, if you’re using a GB Button Block, you can select the Buttons Block, and set it to fill horizontal width as such: https://share.getcloudapp.com/o0uXp8Ep

    #2327931
    xinghui

    Fernando, thank you very much for your reply, my problem has been solved, I used the Button Block->fill horizontal width you said, which is very convenient, but I have a question, please explain it to me, I like your theme very much Editor, want to know more about its usage, such as what is this additional CSS class section used for? What is the difference between it and Appearance > Customize > Additional CSS, and if I want to add css to the button by myself, how should I write the code in Appearance > Customize > Additional CSS? Looking forward to your reply, thank you very much

    #2327941
    Fernando
    Customer Support

    So, in HTML, elements can have classes.

    For instance, if you look at the HTML of your website, you’ll see that your button has a class gb-button for instance.

    See for example: https://share.getcloudapp.com/OAujzqjO

    Classes can be used to target elements for custom code.

    Say you want all buttons with class gb-buttonto have a black colored text, you can go to Additional CSS and add

    .gb-button {
     color: #000;
    }

    Now, if you add a class in the additional CSS class list in the block settings, you can use that class as your target for custom code.

    So for instance, you only want specific Containers to have a background-color of green, then, you can add make-green to the class list of those containers and add this code:

    .make-green {
     background-color:#00ff00;
    }
    #2327990
    xinghui

    Fernando, thank you very much for your screenshots and patient explanation, I have understood the relationship between the two and know how to use their functions correctly, thank you very much, best wishes

    #2327998
    Fernando
    Customer Support

    You’re welcome Xinghui!

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