Archived topic
CSS Making GB Buttons Not Work On Page
5 replies · Started by Brent Wilson on February 14, 2022
URL: https://wordpress-483838-2431328.cloudwaysapps.com/style-guide/
On this site, I have a decorative right column (added as a block element hooked to before_header). I have some CSS added for that column:
.gb-grid-wrapper.fixed-column {
position: fixed;
top: 0;
right: 0;
width: 100%;
}
body {
margin-right: 14.2857%;
}But with this CSS added, it seems to be making the buttons on this page not interact as buttons (curser change, hover effects). But if I remove that CSS, they seem to be interacting properly.
How can I fix this issue?
The current decorative column is set to 100% in width which covers the entire site, so no content would be clickable.
Change your CSS to:
.gb-grid-wrapper.fixed-column {
position: fixed;
top: 0;
right: 0;
width: 14.2857%;
}Then set the Grid > Container width to 100%.
But I don't think you need to use a Grid block, just one Container block is enough.
So I now have the decorative column as just an image in a container that is set to full width. But I think I need to change the CSS in order to properly target the container. Since it isn't in a grid anymore, should I be removing or replacing the .gb-grid-wrapper portion of the target?
If you add thefixed-column class to the container block, then the CSS would be:
.gb-container.fixed-column {
position: fixed;
top: 0;
right: 0;
width: 14.2857%;
}Okay. Thanks! I think it is working properly now.
What is the benefit of just having it in a container block instead of in a grid block as well? Is it because it is less code and so the site will potentially perform a little better?
Is it because it is less code and so the site will potentially perform a little better?
Yes, it is :)
It might not make noticeable improvements, but it's a good habit to only use the necessary elements.
