fixed quick links responsiveness (#4488)

## What type of PR is this? (check all applicable)

- [ ] Refactor
- [ ] Feature
- [x] Bug Fix
- [ ] Optimization
- [x] Documentation Update
- [ ] Community Node Submission


## Have you discussed this change with the InvokeAI team?
- [x] Yes
- [ ] No, because:

      
## Have you updated all relevant documentation?
- [x] Yes
- [ ] No


## Description
There was an issue with the responsiveness of the quick links buttons in
the documentation.

## Related Tickets & Documents

- Related Issue #4455
- Closes #4455

## QA Instructions, Screenshots, Recordings

• On the documentation website, go to the Home page, scroll down to the
quick-links section.

[Home - InvokeAI Stable Diffusion Toolkit
Docs.webm](https://github.com/invoke-ai/InvokeAI/assets/92071471/0a7095c1-9d78-47f2-8da7-9c1e796bea3d)

## Added/updated tests?

- [ ] Yes
- [x] No : _It is a minor change in the documentation website._

## [optional] Are there any post deployment tasks we need to perform? No
This commit is contained in:
Millun Atluri 2023-09-09 12:34:09 +10:00 committed by GitHub
commit 183f66c70c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -15,7 +15,8 @@ title: Home
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.1/css/fontawesome.min.css">
<style>
.button {
width: 300px;
width: 100%;
max-width: 100%;
height: 50px;
background-color: #448AFF;
color: #fff;
@ -27,8 +28,9 @@ title: Home
.button-container {
display: grid;
grid-template-columns: repeat(3, 300px);
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
justify-content: center;
}
.button:hover {