CSS grid must work on IE

[DavidLagou]

Description:

CSS grid must be able to be viewed correctly on all browsers.

Steps to reproduce:

• Visit https//:davidlagou.com
• Go on the web development page in the navbar
• Confirm that each “card” is responsive meaning that they adjust based on the viewport.

Expected Results:

Each card in either the web development page, UI UX page, and the graphic design page must be broken down into cards. And responsive based on the viewport

Actual Result:

CSS grid is incompatible with the current CSS grid features. Therefore there are no grids instead.

Configurations:

This bug was found on the following configurations labeled in Blue.

Severity:

High

Priority

High

Type:

Bug

Assignee:

David Lagou

[DavidLagou]

Steps to resolve the issue

In order to solve this solution, I had to go inside the code and add a few lines.

1. The project container needed to have some IE and Edge specific lines

// projects container 
  -ms-grid-columns: 1fr 1fr;
  -ms-grid-rows: 4fr;

2. Then I named all of the HTML cards with a respective numeric identifier.

• card one
• card two
• card three

3. Then, I went inside my CSS and added a couple of lines :

// individual cards 
.cards.one {
    -ms-grid-column: 1;
    -ms-grid-row: 1;
}

.cards.two {
    -ms-grid-column: 2;
    -ms-grid-row: 1;
}

.cards.three {
    -ms-grid-column: 1;
    -ms-grid-row: 2;
}