ChatGPT for refining and learning CSS

I wasn’t quite happy with the prior day’s address block. It was fun and all to generate new code for the site from an LLM, but it looked kinda funky. Instead, I decided to take a different tack entirely. Perhaps after a business listing I could use some cool looking buttons to prompt the user for their next action. With that in mind, I started with one, people probably wanted to see a map location for the business. Here’s the basic discourse with ChatGPT4:

Can you make me a very simple button for my website. The button should say Google Maps and open a link to Google maps. The button should have a simple border, and a white background

<html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Google Maps Button</title>
</head>
<body>
    <a href="https://www.google.com/maps" target="_blank" class="google-maps-btn">Google Maps</a>
</body>
</html>

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    padding: 0;
}

.google-maps-btn {
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    color: #333333;
    background-color: #ffffff;
    padding: 12px 24px;
    text-decoration: none;
    border: 2px solid #333333;
    border-radius: 4px;
    transition: background-color 0.3s, color 0.3s;
}

.google-maps-btn:hover {
    color: #ffffff;
    background-color: #333333;
}

This code creates a simple Google Maps button with a border and white background. When you hover over the button, the text and background colors will invert. The button links to Google Maps and opens the link in a new tab. You can modify the styles, colors, and fonts in the CSS file to match your website’s design.

From there, I figured I could use many of the buttons to express different user intents after reading a snippet, so asked, “I want to use many of these buttons, how would I ensure there is an even amount of space between each button”. CGPT went on:

To ensure an even amount of space between multiple buttons, you can use CSS Flexbox or Grid layout. Here’s an example using Flexbox:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Spaced Buttons</title>
</head>
<body>
    <div class="button-container">
        <a href="#" class="button">Button 1</a>
        <a href="#" class="button">Button 2</a>
        <a href="#" class="button">Button 3</a>
        <a href="#" class="button">Button 4</a>
    </div>
</body>
</html>

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    padding: 0;
}

.button-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 800px;
    padding: 0 20px;
}

.button {
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    color: #333333;
    background-color: #ffffff;
    padding: 12px 24px;
    text-decoration: none;
    border: 2px solid #333333;
    border-radius: 4px;
    transition: background-color 0.3s, color 0.3s;
}

.button:hover {
    color: #ffffff;
    background-color: #333333;
}

In this example, we have created a button-container div and added multiple buttons inside it. The container has a Flexbox layout with justify-content set to space-between, which ensures even spacing between the buttons. The max-width and padding properties on the container limit its width and ensure some space is maintained around the buttons on smaller screens.

Before you know it hey presto, a new button setup, but on mobile things looked funky so a little later in the day I returned and asked, “I have a problem with some code on my website. I have some buttons that I want to cascade onto new lines if viewed on mobile. Can I show you my code and you can suggest how to do that?”

Of course! Please go ahead and share your code, and I’ll be happy to help you achieve the desired behavior for your buttons on mobile devices.

After pasting in the button code I got:

I see that you have provided the HTML code for the buttons. To achieve the desired behavior, you’ll need to add some CSS for responsive design. You can use media queries to apply different styles depending on the screen size. Here’s an example of how you could modify your code:

First, wrap your buttons in a container div:

<div class="button-container">
  <span class="checkemout">More info</span>

  <a href="https://goo.gl/maps/pofpxtqsLBjGLP1U6" target="_blank" class="info-buttons" rel="noopener">Map</a>

  <a href="https://bgrtheburgerjoint.com" target="_blank" class="info-buttons" rel="noopener">Website</a>

  <a href="https://www.instagram.com/bgrsugarhouse/?hl=en" target="_blank" class="info-buttons" rel="noopener">Instagram</a>
</div>

Next, add the following CSS to your stylesheet or within <style> tags in the <head> section of your HTML document:

button-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.info-buttons {
  flex: 1;
  min-width: calc(50% - 4px);
  max-width: 100%;
  text-align: center;
  /* Add any other button styles here */
}

@media (min-width: 768px) {
  .info-buttons {
    max-width: none;
  }
}

This CSS code uses flexbox to create a responsive layout for the buttons. The flex-wrap: wrap property makes the buttons wrap onto new lines if they don’t fit in the available space. The gap property is used to add space between the buttons.

The min-width and max-width properties of the .info-buttons class are set so that each button takes up 50% of the available space on small screens (with 4px gap compensation), allowing two buttons per line. The max-width is set to 100% to ensure the buttons take the full available width on larger screens. The media query at the end ensures that the max-width constraint is removed for screens wider than 768px, which would typically be tablets and desktop devices.

Feel free to adjust the values as needed to better suit your design.

While this was great, I had a slight issue, so went on, “That works great, however when the buttons cascade onto a new line the vertical space between each button is too close, how can I make a uniform vertical space when the buttons cascade to a new line”

You can control the vertical spacing between buttons by updating the gap property in the .button-container class. The gap property sets both the horizontal and vertical spacing between the items inside the flex container. Here’s the updated CSS code:

.button-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px; /* Adjust the second value to control the vertical space between buttons */
}

.info-buttons {
  flex: 1;
  min-width: calc(50% - 4px);
  max-width: 100%;
  text-align: center;
  /* Add any other button styles here */
}

@media (min-width: 768px) {
  .info-buttons {
    max-width: none;
  }
}

In the gap property, I’ve set the first value to 8px for horizontal spacing and the second value to 16px for vertical spacing. You can adjust the second value to increase or decrease the vertical space between the buttons when they wrap onto a new line.

This still posed some problems, CGPT went onto suggest I use row-gap in conjunction with column-gap but that too failed. I pointed this out to CGPT who rather than belabor the point, simply suggested a different tack entirely:

I apologize for the confusion earlier. Let’s try another approach to add vertical spacing between the buttons when they wrap onto a new line.

Instead of using row-gap and column-gap, we can add margin to the buttons. Here’s the updated CSS:

.button-container {
  display: flex;
  flex-wrap: wrap;
}

.info-buttons {
  flex: 1;
  min-width: calc(50% - 4px);
  max-width: 100%;
  text-align: center;
  margin-bottom: 16px; /* Add margin to the bottom of each button */
  /* Add any other button styles here */
}

@media (min-width: 768px) {
  .info-buttons {
    max-width: none;
    margin-bottom: 0; /* Remove the bottom margin for larger screens if desired */
  }
}

In this version, I’ve removed the row-gap and column-gap properties and added a margin-bottom property to the .info-buttons class. This will create a uniform 16px vertical space between buttons when they wrap onto a new line. Adjust the margin value as needed to achieve the desired vertical spacing.

I think this last bit is what really had the lightbulb go off over my head. I expected the model to keep rehashing CSS code that (from what I could see on Google) didn’t really work, but instead, it did why I would do with enough time – look for a workaround. Mind. Blown.

This back and forth with the model, refining my core idea, improving, pivoting – a fabulous experience and one that took just minutes. A year ago I would have sunk a whole Saturday afternoon into trying to cobble together suspect CSS; and probably then throw it in the trash.

Instead, ChatGPT let me take a nebulous idea, explore the basics, suggest improvements, refine them, and by the end I’d learnt entirely new things (the flex CSS in this instance) that I’ll no doubt use again.

“A little bit of knowledge is a dangerous thing?” In ChatGPT world, this phrase is about to need a rewrite – it’s all you *really* need frankly, to jump in an execute an idea.

Featured image, Midjourney: a room full of books, and documents, there is a robot that is stood pointing to a specific book, drawing the viewers attention to the book –ar 3:2 –v 5

Leave a Reply Cancel reply