Solved

Logo list mobile

JarnoBroekkamp
Excursionist
33 0 4

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!

 

Accepted Solution (1)
websensepro
Shopify Partner
1045 144 149

This is an 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!

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here

View solution in original post

Replies 9 (9)

webwondersco
Shopify Partner
1103 164 161

@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

 

webwondersco_0-1715155417519.png

 

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

 

Web Wonders | Shopify Partner | Connect here!
- Question answered? Mark as Accepted Solution, reply helpful? Click Like
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
- a small Coffee Tip would be greatly appreciated. :)..! Instagram
JarnoBroekkamp
Excursionist
33 0 4

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

 

laddisahsi
Shopify Partner
383 38 40

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>

 

 

 

laddisahsi_0-1715155834336.png

 

 

 

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


Laddi

-Shopify website development, Theme & App Development
-Contact me: WhatsApp


-Email Me
-If this solution is worked, then please Like this and Mark this as accepted solution!
webwondersco
Shopify Partner
1103 164 161

@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:

webwondersco_0-1715156407189.png

 

Web Wonders | Shopify Partner | Connect here!
- Question answered? Mark as Accepted Solution, reply helpful? Click Like
- Hire me, if you want to design, re-design, develop a store, or make changes to the pre-built store.
- a small Coffee Tip would be greatly appreciated. :)..! Instagram

websensepro
Shopify Partner
1045 144 149

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;
}
}

 

websensepro_0-1715155732063.png

 


 Thanks!

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here
JarnoBroekkamp
Excursionist
33 0 4

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

 

websensepro
Shopify Partner
1045 144 149

This is an 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!

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here

laddisahsi
Shopify Partner
383 38 40

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>

 

laddisahsi_0-1715156444650.png

 

 

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


Laddi

 

-Shopify website development, Theme & App Development
-Contact me: WhatsApp


-Email Me
-If this solution is worked, then please Like this and Mark this as accepted solution!
JarnoBroekkamp
Excursionist
33 0 4

Hi Laddi,

 

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