Logo list mobile

[JarnoBroekkamp]

Hi everyone,

I created a logo list and on desktop it shows 3 logos on a row but on mobile it shows 2 on one row and the last logo below, which doesn't look very good honestly, how can i fix that on mobile it shows 3 per row.

URL: www.ateliercharisma.com

Thanks in advance!

[webwondersco]

@JarnoBroekkamp Hope you are doing well.

Just want to share that, if you will display 3 icons per row for the mobile view it looks so small. Please check the attachment

what I suggest instead of 2 show the single logo per row for mobile view.

[JarnoBroekkamp]

Thanks for the detailed description, but i dont have the option to change how it looks on mobile!

[vpsbohra]

Hi @JarnoBroekkamp 

You can follow the following steps:

1. Please remove the width from the html.
2. Please go to the Online Store.
3. Then Edit Code.
4. Please find the theme.liquid file.
5. Please add code before closing the tag </head> tag.

<style>

.logo-list {
    display: inline !important;
}

</style>

If this solution is worked, then please Like this and Mark this as accepted solution!

Laddi

[webwondersco]

@JarnoBroekkamp 

Follow these Steps:

- Go to the Online Store
- Edit Code
- Find theme.liquid file
- Add the following code at the bottom of the file above </body> tag

<style>
@media(max-width:480px){
body .logo-list{
display:block;
}
}
</style>

Result:

[websensepro]

Hello @JarnoBroekkamp,

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid

@media only screen and (max-width: 600px) {
#section#shopify-section-template--20793934348612__logo_list_7m6TcH .logo-list{
justify-content: center;
    gap: var(--logo-list-gap);
    display: grid;
    grid: auto / repeat(3, minmax(0, 329px)) !important;
}

#section#shopify-section-template--20793934348612__logo_list_7m6TcH a.logo-list__item .constrained-image {
    max-width: 150% !important;
}
}

 Thanks!

[JarnoBroekkamp]

Unfortunately after i did al the steps it still shows a row with 2 and a row with 1

[websensepro · Accepted solution]

Hello @JarnoBroekkamp,
You can paste this code in theme.css

.section-spacing.color-scheme.color-scheme--scheme-1.color-scheme--bg-76fb24f07e08d7b2b2668a7cc812aad4 .logo-list{

grid: auto / repeat(3, minmax(0, 250px)) !important;

}

Thanks!

[vpsbohra]

Hi @JarnoBroekkamp 

You can follow the following steps:

1. Please remove the width from the html.
2. Please go to the Online Store.
3. Then Edit Code.
4. Please find the theme.liquid file.
5. Please add code before closing the tag </head> tag.

<style>
@media screen and (max-width: 767px) {
.logo-list {
    display: inline !important;
}
}

</style>

If this solution is worked, then please Like this and Mark this as accepted solution!

Laddi

[JarnoBroekkamp]

Hi Laddi,

Thanks a lot but i find that the logo's next to each other are a bit better looking