CODEWITHSUNDEEP
htmlcssreactjsresponsive-designcss-grid
abhinavm93
abhinavm93

Reputation: 152

css-grid div not resizing when used in react component

I have made a css grid layout in a sample portfolio page i have made, when i did it with just html / css it worked fine and was responsive: The code is here: https://codepen.io/abhinavthinktank/full/YevQNq/

The one which isn't responsive is hosted here: https://abhinav-m.github.io/

The react components for the same are here: https://github.com/abhinav-m/personal-portfolio/tree/master/src/components

I made the same using react, sass and node, however this one is not responsive, to be exact the div with the class techStack is not resizing. Here's the grid layout css:

.gridContainer {
 display: grid;
 grid-template-rows: 15px 10% 20% 10% 20% 20% 20% 25px;
 grid-template-columns: 10% 80% 10%;
 grid-row-gap: 25px;
 justify-items: center; }

and the div class='techStack' css:

.techStack {
 grid-row: 6 / 7;
 grid-column: 2 / 3;
 background: bisque; }

The CSS of both of these appear to be the same! I can't understand why one of these is not working.

LINK FOR JSFIDDLE : https://jsfiddle.net/69z2wepo/121098/ (not responsive)

Upvotes: 0

Views: 1528

Answers (2)

Michael Benjamin
Michael Benjamin

Reputation: 371639

Your image icons (.dev-icon-* colored) are a list of inline-level ::before pseudo-elements, which are each contained inside an inline-level i element, which are all contained inside a block-level div element.

The icons are provided by a third party service (devicon).

For whatever reason, these pseudo-elements, as devicon icons, don't wrap.

However, if you switch out the devicon code (e.g. content: "\e845") with plain text (e.g. content: "text text text text"), then the pseudo-elements do wrap.

Alternatively, if you switch the div container from display: block (the default) to display: flex, the devicons wrap, as well.

So the problem seems to boil down to devicons in a block container.

Here's a simple overall solution:

div.icons {
    display: flex;
    flex-wrap: wrap;
}

Upvotes: 1

Will Jenkins
Will Jenkins

Reputation: 9887

I had a look but I can't work out what the cause of the difference is. I'm guessing it's a style somewhere else on the page or because of a slightly different structuring of elements.

However, if you set the style of your icons to display: inline-block then it fixes your problem.

Upvotes: 1

Related Questions