Archived topic
How to make a button full width
8 replies · Started by xinghui on August 29, 2022
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
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
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:
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
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
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;
}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
You’re welcome Xinghui!
