Center logo section

[Edgars_Rudzitis]

I found a custom code to add logo list for my website.

On desktop it looks all ok but on mobile its aligned right but i want it to be centered.

Heres the code:

<div class="logoList--container page-width" style="padding-top: {{ section.settings.padding_top | append: "px" }}; padding-bottom: {{ section.settings.padding_bottom | append: "px" }}">
<h2 class="h1">{{ section.settings.title | escape }}</h2>
<ul>
{%- for block in section.blocks -%}
<li class="logoList--item" {{ block.shopify_attributes }}>
{%- if block.settings.link != blank -%}
<a href="{{ block.settings.link }}">
{%- endif -%}
{%- if block.settings.image != blank -%}
{{ block.settings.image | img_url: '160x160', scale: 2 | img_tag: block.settings.image.alt }}
{%- else -%}
{{ 'logo' | placeholder_svg_tag: 'placeholder-svg' }}
{%- endif -%}
{%- if block.settings.link != blank -%}
</a>
{%- endif -%}
</li>
{%- endfor -%}
</ul>

</div>
<style>
.logoList--container {
padding-top: 20px;
padding-bottom: 20px;
margin: auto;
}

.logoList--container ul {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
justify-content: center;
}

.logoList--item{
display: inline-block;
max-width: {{ section.settings.logo_width }};
}

.logoList--item img{
width: 100%;
}
</style>

{% schema %}
{
"name": "Logo list",
"settings": [
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Logo list"
},
{
"type": "select",
"id": "logo_width",
"label": "Logo width",
"default": "160px",
"options": [
{
"label": "Extra Small",
"value": "50px"
},
{
"label": "Small",
"value": "100px"
},
{
"label": "Medium",
"value": "160px"
},
{
"label": "Large",
"value": "200px"
},
{
"label": "Extra Large",
"value": "400px"
}
]
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 2,
"default": 20,
"label": "Padding top"
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 2,
"default": 20,
"label": "Padding bottom"
}
],
"blocks": [
{
"type": "logo_image",
"name": "Logo",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "url",
"id": "link",
"label": "Link",
"info": "Optional"
}
]
}
],
"presets": [
{
"name": "Logo list",
"category": "Image",
"blocks": [
{
"type": "logo_image"
},
{
"type": "logo_image"
},
{
"type": "logo_image"
},
{
"type": "logo_image"
}
]
}
]
}
{% endschema %}

[Mustafa_Ali]

hey @Edgars_Rudzitis share the URLs of your website plz

[Edgars_Rudzitis]

https://enammo.com/

[Mustafa_Ali · Accepted solution]

<style>
@media screen and (max-width: 767px) {
.logoList--container.page-width {
    padding-right: 4rem !important;
    padding-left: 0rem !important;
}
}
</style>

hey @Edgars_Rudzitis dear follow these steps
Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->before the </body> ----->
before the body ----->
if this code work please do not forget to like and mark it solution

[Edgars_Rudzitis]

Hello.
Im no expert in coding so would need a ready code haha.

[Mustafa_Ali]

don't ware about it just follow the step and then your problem is solved and plz don't forget to like and mark it solution