Reduce spacing in Logo List

New Member
2 0 1

I'd like to reduce the spacing between each logo in the logo list to allow all logos to fit on one line. Currently we're displaying 6 logos but it drops the 6th logo to a second row. There is plenty of space between each logo, if reduced it would allow for all 6 to fit. The theme I'm using is Debut. 

 

 

0 Likes
New Member
2 0 1

I think I've figured it out. I've changed .logo-bar__item in theme.scss.liquid in bold below.

from this:

.logo-bar__item {
  display: inline-block;
  vertical-align: middle;
  max-width: 160px;
  margin: 0 ($section-spacing / 2) $section-spacing-small;
}

 

to this:

.logo-bar__item {
  display: inline-block;
  vertical-align: middle;
  max-width: 160px;
  margin: 0 10px $section-spacing-small;
}

 

1 Like
Tourist
12 0 0

Thanks! Would you know how to this for mobile?

All the images on my logo list stack on top of each other on mobile, would prefer it if they were on the same line.

 

 

0 Likes

Hello

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Tourist
12 0 0
0 Likes

Hello ,

Please give me screenshot of your logo-list

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Tourist
12 0 0

Screen Shot 2019-11-26 at 11.22.46.png

 

0 Likes

@henz123,

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste bellow code in bottom of file

@media only screen and (max-width: 768px) {
.logo-bar__item {
	margin: 0;
}
}
@media only screen and (max-width: 600px) {
.logo-bar__item {
	max-width: 140px;
}
}
@media only screen and (max-width: 480px) {
.logo-bar__item {
	max-width: 100px;
}
}
@media only screen and (max-width: 360px) {
.logo-bar__item {
	max-width: 90px;
}
}
Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
1 Like
Tourist
12 0 0

It worked! Thanks so much Pallavi! 

 

The second set of logos at the end of my homepage looks a bit too close together on mobile - but i guess i would just need to play around with the margins in that code to fix it?

 

thanks again!

0 Likes

@henz123,

Add below css for second set of logos

@media only screen and (max-width: 768px) {
#shopify-section-1563119887783 .logo-bar__item {
	margin-right: 5%;
}
#shopify-section-1563119887783 .logo-bar li:last-child {
	margin: 0;
}
}
@media only screen and (max-width: 480px) {
 #shopify-section-1563119887783 .logo-bar__item {
  max-width:80px;
 }
#shopify-section-1563119887783 .logo-bar__item {
	margin-right: 3%;
}
}

@henz123 wrote:

It worked! Thanks so much Pallavi! 

 

The second set of logos at the end of my homepage looks a bit too close together on mobile - but i guess i would just need to play around with the margins in that code to fix it?

 

thanks again!


 

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
1 Like