adjust business listing grid

[Mhmdabed11]

Describe your PR

Adjust businesses listing grid to show 12 listings on the page, where each row has between 1 and 4 listings.

Related to #313

Pages/Interfaces that will change

/businesses page will be affected

Screenshots / video of changes

1. 4 listings per row

2. 3 listings per row

3. 2 listings per row

4. 1 listing per row

Steps to test

1. Go to /businesses page.
2. Resize window

[netlify[bot]]

Deploy request for rebuild-black-business accepted.

Accepted with commit c9d6a3e75ffc2fd4c382a620e6162d5a0c3743d9

https://app.netlify.com/sites/rebuild-black-business/deploys/5f2fb35c5496c20008ce8d6b

[magnificode]

Hey @Mhmdabed11 - thanks again for this work. Couple small things and then I think we should be good to get this merged. Apologies for the delay in reviewing here, been a bit of a busy couple of weeks.

Any chance we could add hyphens: auto to the headings here? That way if a longer title shows up in a more narrow card, the content will break onto a new line? You may need to add this as an inline style, as I'm not sure that Chakra has an attribute for this.

I added a comment about upping the container size to 1600 as well.

Appreciate the work!!

[Mhmdabed11]

@magnificode Thank you for your comments and no worries at all! I had to add wordBreak: break-all instead of hyphens: auto since the hyphens property is not fully supported by all modern browsers.

[magnificode]

@Mhmdabed11 good call! Any chance we can leverage both? That way modern browsers get the benefit of the hyphens, and older browsers will still see the word break?

[Mhmdabed11]

@magnificode of course! Will do it in a few.

[magnificode]

@Mhmdabed11 excellent work as always, thank you so much for the help!

[Mhmdabed11]

@magnificode You are most welcome!

[racedale]

@all-contributors please add Mhmdabed11 for code

[allcontributors[bot]]

@racedale

I've put up a pull request to add @Mhmdabed11! :tada: