CSS: Making adjustments to a webpage generated by ChatGPT

I decided to make a webpage using ChatGPT, and then fix up anything I didn’t like.

I asked ChatGPT to make a webpage using advanced HTML and CSS, and to make it colourful. Here is what it produced:

Here is the mobile version:

Issue 1: Each section went right to the edge of the screen

The very first thing which annoyed me about the webpage was the way that each section went right up to the edge of the screen:

Solution 1: Adjusted the width and margin

First, I adjustd the width to 85% for each section:

width: 85%;

What this does is make it so that each section only takes up a width of 85% of the screen, weather it’s on a desktop or mobile:

Then, to align it in the centre, I adjusted the margin to auto:

So I adjusted this:

margin: 2rem 0;

To this:

margin: 2rem auto;

This puts it in the middle:

I’m sure you can see what the second issue is.

Issue 2: Content inside the sections are a mess:

Solution 2: Changed the display to Flexbox and aligned the items in the center

First of all, I changed the display to Flexbox. This gives more control over the elements inside the section.

display:flex;

Then I aligned the items into a column:

flex-direction: column;

Then I aligned the items into the center:

justify-content: center;
align-items: center;

Next I adjusted the margin on the button so it wasn’t so close to the content:

margin-top: 25px;

Finally, I fixed the text up:

p {
   text-align: center;
   overflow: hidden;
   text-overflow: ellipsis;
   }

I think it looks okay now.

Just one more thing that annoyed me.

Issue 3: Sticky heading

Whenever I scrolled down, the heading stuck up the top. In this particulr instance, I found it annoying.

It was a simple fix.

I simply deleted the following for the header:

position: sticky;

And there you have it!

Here is a link to the code

Conclusion

This is not a groundbreaking webpage by any means. But it is good to get practice making stylistic adjustments to webpages. Even if this one was generated by AI. (On the contrary, maybe making webpages with AI is excellent for getting practice!).

I decided to make another challenge, and ask AI to generate an ugly looking webpage:

I don’t think I’ll touch this one, for now!

At least it’s somewhat responsive, though!

Peter Eagleton