Having trouble adjusting the grid's width property

Question

Having trouble adjusting the grid's width property

My personal page features a section dedicated to displaying my skills and proficiency in various programming languages (although it may not be entirely accurate). I am struggling to adjust the width of the Skill grid to match the layout of the other grids on the page.

Here is the current layout for reference: https://i.sstatic.net/0wqMs.png

Here is the desired layout (replacing email with skills): https://i.sstatic.net/geJrk.png

Link to the code:

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

I managed to adjust the contact section using grid-column: span 2;, however, this method does not work for the skills section. I also attempted to set the grid width to 100% without success.

Any assistance or suggestions would be greatly appreciated. Feel free to request more code if needed.

javascript html css grid width

Answer 1

Answer №1

When setting up the grid for "medium devices," it seems you have mistakenly used two columns instead of one.

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

To correct this, replace the code in your media query for medium devices with the following:

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

It's important to note that these are combined selectors affecting other containers as well. However, I assume your intention is to achieve full width for medium devices.

P.S.

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

The above code creates two equal columns, which is equivalent to:

grid-template-columns: 1fr 1fr;

Lastly, remember to clean up any code related to spanning columns.

Answer 2

When setting up the grid for "medium devices," it seems you have mistakenly used two columns instead of one.

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

To correct this, replace the code in your media query for medium devices with the following:

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

It's important to note that these are combined selectors affecting other containers as well. However, I assume your intention is to achieve full width for medium devices.

P.S.

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

The above code creates two equal columns, which is equivalent to:

grid-template-columns: 1fr 1fr;

Lastly, remember to clean up any code related to spanning columns.

Answer 3

Answer №2

There appears to be an additional layer of wrapping within the skills__container, which may not be correctly applying the layout to its content.

Check out the modified demo here: codepen

To rectify this issue, try eliminating the surplus wrapping layer:

<div class="skills__container container grid">
  <!-- Removed extra wrapper 👉 <div> -->
  <!--==================== SKILLS 1 ====================-->
  <div class="skills__content skills__open">
  ...
  ...
  </div>
  </div>
  <!--==================== SKILLS 2 ====================-->
  <div class="skills__content skills__close">
  ...
  ...
  </div>
  </div>
  <!--==================== SKILLS 3 ====================-->
  <div class="skills__content skills__close">
  ...
  ...
  </div>
  </div>
  <!--   </div> -->
</div>

Answer 4

There appears to be an additional layer of wrapping within the skills__container, which may not be correctly applying the layout to its content.

Check out the modified demo here: codepen

To rectify this issue, try eliminating the surplus wrapping layer:

<div class="skills__container container grid">
  <!-- Removed extra wrapper 👉 <div> -->
  <!--==================== SKILLS 1 ====================-->
  <div class="skills__content skills__open">
  ...
  ...
  </div>
  </div>
  <!--==================== SKILLS 2 ====================-->
  <div class="skills__content skills__close">
  ...
  ...
  </div>
  </div>
  <!--==================== SKILLS 3 ====================-->
  <div class="skills__content skills__close">
  ...
  ...
  </div>
  </div>
  <!--   </div> -->
</div>

Having trouble adjusting the grid's width property

Answer №1

Answer №2

Similar questions

Tips for successfully accessing a variable in an Angular Pipe

Firefox 3 fails to utilize cache when an ajax request is made while the page is loading

The select tag is malfunctioning in the Firefox browser upon clicking with the mouse

A guide to mastering Nested Table creation in Angular

When the content in the div exceeds its boundaries, it causes it to overlap with

Creating a rotating wheel using JavaScript that is activated by a key press event

Transforming JSON/XML into a hierarchical display

How to efficiently upload multiple files simultaneously in Angular 10 and .NET Core 5 by utilizing a JSON object

execute the function after the animation has finished

What is the best way to eliminate particular elements from a nested JSON payload in JavaScript?

Unable to successfully import an external HTML file that contains a script tag

Tips for adjusting the CSS styles within a jQuery plugin

Saving the initial and final days of each month in a year using javascript

Obtain the name of the object method from inside the method itself

Upon utilizing JSON.parse in Express, an unexpected token < in JSON was encountered at position 0 while attempting a client side fetch POST

Why is it that I am unable to utilize the post data stored in $var within my PHP document when making an Ajax call?

With jQuery's .text() method, it is possible to modify the first span's Bootstrap class, but not the

Instructions on how to save HTML "innerHTML" along with attributes to a text document

Angular2: dynamic spinner directive for showing progress/loading overlay

Display event using Angular