Search code examples
javascripthtmlcssgridwidth

Unable to set grid width property

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: enter image description here

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

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

Solution

  • 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 :-)