Image Gallery Image Size

[rivetworld]

Hello!

So I made an image gallery code for a gallery page, it is fine in desktop yet the images on mobile are different, there is space on the right and the images aren't centered + they arent big enough. any help?

website url: https://rivetworld.space

<style>
.image-gallery__item {
width: 50%;
max-width: 480px;
box-sizing: border-box;
padding: 10px;
text-align: center;
display: inline-block;
vertical-align: top;
margin-left: 20px;
float: left;
}

.image-gallery__image {
width: 100%;
height: auto;
}

.image-gallery::after {
content: "";
display: table;
clear: both;
}

@media (max-width: 767px) {
.image-gallery__item {
width: 100%;
max-width: 100%;
margin-left: 0;
float: none;
}

.image-gallery__image {
/* Specify mobile image size or URL here */
width: 100%; /* Example: Adjust the dimensions or URL as per your requirements */
height: auto;
}
}

@media (min-width: 768px) {
.image-gallery__image {
/* Specify desktop image size or URL here */
width: 100%; /* Example: Adjust the dimensions or URL as per your requirements */
height: auto;
}
}
</style>

<div data-section-id="{{ section.id }}" data-section-type="image-gallery-section">
<div class="wrapper">
{% if section.settings.title != blank %}
<div class="section-header text-center">
<h2 class="h1 section-header__title">{{ section.settings.title | escape }}</h2>
<hr class="hr--small">
</div>
{% endif %}

<div class="image-gallery">
{% for block in section.blocks %}
<div class="image-gallery__item">
<a href="{{ block.settings.link }}" class="image-gallery__link">
<img src="{{ block.settings.image | img_url: '828x1006' }}" alt="{{ block.settings.image.alt | escape }}" class="image-gallery__image">
</a>
</div>
{% assign remainder = forloop.index | modulo: 2 %}
{% if remainder == 0 %}
<div style="clear: both;"></div>
{% endif %}
{% endfor %}
</div>
</div>
</div>

here is the code for reference

[NomtechSolution]

Try this code

<style>
.image-gallery__item {
  width: 100%;
  max-width: 480px;
  box-sizing: border-box;
  padding: 10px;
  text-align: center;
  margin: 0 auto;
}

.image-gallery__image {
  width: 100%;
  height: auto;
}

.image-gallery::after {
  content: "";
  display: table;
  clear: both;
}

@media (max-width: 767px) {
  .image-gallery__item {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    float: none;
  }

  .image-gallery__image {
    /* Specify mobile image size or URL here */
    max-width: 100%; /* Adjust the dimensions or URL as per your requirements */
    height: auto;
  }
}
</style>

<div data-section-id="{{ section.id }}" data-section-type="image-gallery-section">
  <div class="wrapper">
    {% if section.settings.title != blank %}
    <div class="section-header text-center">
      <h2 class="h1 section-header__title">{{ section.settings.title | escape }}</h2>
      <hr class="hr--small">
    </div>
    {% endif %}

    <div class="image-gallery">
      {% for block in section.blocks %}
      <div class="image-gallery__item">
        <a href="{{ block.settings.link }}" class="image-gallery__link">
          <img src="{{ block.settings.image | img_url: '828x1006' }}" alt="{{ block.settings.image.alt | escape }}" class="image-gallery__image">
        </a>
      </div>
      {% assign remainder = forloop.index | modulo: 2 %}
      {% if remainder == 0 %}
      <div style="clear: both;"></div>
      {% endif %}
      {% endfor %}
    </div>
  </div>
</div>

[rivetworld]

Hi ! This one worked but on the desktop there's a bit of space on the right but it did work on mobile, any more help ? Thank you!