- This topic has 11 replies, 2 voices, and was last updated 3 years, 4 months ago by Elvin.
-
AuthorPosts
-
December 16, 2020 at 5:47 pm #1583658Henry
Please see this setting: screenshot – this is NOT going flush to the sides of the grid. Any idea why?
Here’s the client view.
Thanks
December 16, 2020 at 6:02 pm #1583661ElvinStaffCustomer SupportHi,
Can you link us to the page in question? To check why this is occurring.
You can provide the site details on the private information text field. Thank you.
December 16, 2020 at 6:16 pm #1583669HenryAdded – thank you for taking a look
December 16, 2020 at 7:52 pm #1583707ElvinStaffCustomer SupportTo clarify:
I believe something like this is what you’re trying to do? https://share.getcloudapp.com/ApuGxGo1
If so, here’s how you can do it.
Add this CSS:
.full-width-button{ width:100%; max-width:100%; }
You then add
full-width-button
on the GB Button’s class so all buttons would have a uniform width (occupy the width of the grid column) instead of being smaller or bigger(overflow) than the column.December 16, 2020 at 10:15 pm #1583791HenryI inserted the code…didn’t work π
The CSS class is definitely there, I checked…
Any ideas what could be wrong here?
December 16, 2020 at 10:52 pm #1583829ElvinStaffCustomer SupportOut of interest β why didnβt it work for me? I thought that feature would make the button go 100%
To shed light on the issue.
By default, the button’s width depends on its content w/c is usually the width of the text + button’s padding.
What happens on your grid is that since, the months have different string length, the width also varies.
Also, some of the buttons overflows past its container. It affects the visual balance/alignment.
To confirm: is the proposed fix not working? Let us know.
December 16, 2020 at 11:07 pm #1583844HenryUnfortunately not working…I placed the code in multiple spots
December 16, 2020 at 11:09 pm #1583848HenryHere’s the screenshot for where I put the css class: screenshot
December 16, 2020 at 11:18 pm #1583863HenryAlso – (sorry for flurry of comments) – maybe my approach is wrong with a grid for buttons?
December 16, 2020 at 11:56 pm #1583884ElvinStaffCustomer SupportAlso β (sorry for flurry of comments) β maybe my approach is wrong with a grid for buttons?
Ah I know why. And my bad for not spotting it earlier. lol.
The issue here is that the horizontal space for a 6 column grid to work well is too narrow. (max-width: 900px)
All the buttons are actually going full width of the column but some of them are overflowing because some name of the months are too long.
You can test this yourself by changing the max-width of the content area.
December 17, 2020 at 12:54 am #1583929HenryYes – fantastic! Thanks very much – in fact, looks better with the x4 rather than x6
December 17, 2020 at 1:53 am #1584006ElvinStaffCustomer SupportYes β fantastic! Thanks very much β in fact, looks better with the x4 rather than x6
Nice one. Good choice, that’s actually more manageable.
No problem. π
-
AuthorPosts
- You must be logged in to reply to this topic.