Tribute page using CSS Grid

1

Hi,
I just had a go at my first responsive design web project and am trying to simulate the behaviour of the given tribute page and have done this so far:
https://codepen.io/bp96/pen/rNVoQRa

The original tribute page is here: https://codepen.io/freeCodeCamp/pen/zNqgVx

So I’ve tried using CSS Grid for the #tribute-info div but I want to try and get the second column (where the timeline is) to expand as the screen grows smaller and becomes mobile. For example, if you reduce the screensize to the lowest size for mine, there’s a lot of empty space which I don’t want (which isn’t present in the original one). How can I adapt it?

2

Hello there.

This is where the issue is:

grid-template-columns: auto 50% auto;

Either, add a media query to change this, or change it from the get-go.

Also, some things to note when using CodePen:

  1. CodePen does not expect any content outwith the body tags.
  2. All meta, link, and script information must be put in the :gear: settings section of the HTML editor.
  3. You do not need to/cannot link the CSS in your HTML, if you place the CSS in the appropriate section.
  4. If your project uses React, use the Babel preprocessor, and link the CDN in the appropriate :gear: section.
  5. The editors offer the ability to format and analyse your code, providing useful information about forgotten closing tags etc.

If you are still confused with how to use CodePen, please read the official documentation.

Hope this helps

3

Hi thanks for the reply -
I added this in:

@media (max-width: 460px) {
  #tribute-info {
  grid-template-columns: auto 100% auto;
  }
}

But it doesn’t seem to work? Might be something quite simple…

4

It works for me. Are you decreasing the screen size all the way?

5

I decreased the screen size as far as it’ll go (on Chrome) and there was no change.

But just managed to fix it by increasing the max-width to 560px though!