Unable to set grid width property-CodePudding

On my personal page i have a section with Skills, showing how much i know each programing language (i do not think it is accurate but whatever). I can seem to set width on the Skill grid to behave as all the other grids.

This is how it looks:

This is what i need it to look like (except with the skills instead of email):

Here you can access the code:

https://codepen.io/wodosharlatan/pen/OJwQNLL

I solved the contact section by using grid-column: span 2;, but it does not work for this section, i also tried setting the grid width to 100% but it did not do anything

Any help or ideas are appreciated, if you need more code drop me a comment

CodePudding user response：

You are setting grid with two columns instead of one for "medium devices".

.about__container,
.skills__container,
.portfolio__content,
.contact__container,
.footer__container {
    grid-template-columns: repeat(2, 1fr);
}

replace it in your media query for medium sized devices with:

.about__container,
.skills__container,
.portfolio__content,
.contact__container,
.footer__container {
    grid-template-columns: 1fr;
}

Keep in mind these are combined selectors, so it will change styles for others containers also, but I hope you want to achieve full width for medium sized devices anyway.

P.S.

grid-template-columns: repeat(2, 1fr);

just creates two equal columns and repeat function translates to:

grid-template-columns: 1fr 1fr;

Also don't forget to cleanup spanning column code :-)

CodePudding user response：

It seems the skills__container has an extra wrapping layer inside for the content, and might not actually apply the layout to its content.

Forked demo with modification: codepen

Try remove the extra wrapping layer:

<div >
  <!-- Removed extra wrapper