-
Posts
-
I have a button row I am using on my site and it is starting to look very messy as all of the buttons are different sizes and not lining up to any grid.
I would like to clean this up and have the buttons all the same size and look cleaner by being the same size and spacing on the rows and columns.
Am running WP 6.7.1 with Enfold 6.0.6. Thank you for any advice or help on this matter.
Something similar to this would be nice as an idea where the buttons are the same size and it looks uniform:
https://us.macmillan.com/books/9781250281364/aragetoconquer/Hey Jason,
Please try the following in Quick CSS under Enfold->General Styling:
.avia-buttonrow-wrap .avia-button { width: 120px; min-width: 120px; }Best regards,
RikardTHANK YOU SOOOOO much! This makes it look so much better! I wish I had asked sooner. See updated page:
Okay, so one more oddity that I saw was the home page row of buttons towards the bottom that have icons went a bit crazy… Any ideas on this row of buttons why that would not have worked the rest? For some reason, these buttons on the home page break into two lines of text and go outside the button box. This is under the section
DISCOVER NEW ADVENTURES
Maybe there is away to exclude this CSS just on the home page and keep it for the rest of the website?
Hi,
Please try this CSS as well:
.home #av-layout-grid-5 .avia-button { width: 230px; min-width: 230px; }Best regards,
RikardThank you. The 230 width almost works, but two of the buttons are taller now. I did a test at 250 width and then they all became the same height, but it then flowed into two rows. I have three screenshots I am attaching so you can see, the original, 230 width and 250 width. See links in the private section.
I did try a few sizes between the 230 and 250 and there is no size that results in the original layout that I could find.
I left it at the 250 width.
Thank you for your help. It is almost perfect.
Hi,
Thanks for that. Its displayed on a single row on my end, in which browser are you seeing two rows?
Best regards,
RikardHello! They look fine now on my BIG 32″ monitor, but on Chrome on my “smaller” 27″ monitor in Chrome, it is two rows. I also checked in on 27″ in FireFox and two rows, only 5 across, and then the last one drops down.
What is interesting is on my MAC laptop with a 16″ screen, it is one row with all 6 buttons and looks fine.
Maybe was a cache issue or something?
Thank you again!
- You must be logged in to reply to this topic.