Logo bar not centered

Solved
Highlighted
Tourist
7 0 3

I followed a super useful tutorial to insert a logo bar on my homepage. However it's not centered and I cannot for the life of me work out why?!? Would also love to get the same build I get on the Journal section on the homepage... Any help very much appreciated.

 

socko.shop 

 

<style>
  .logo-bar-section {
    max-width: {{ section.settings.logo_width }};
    display: inline-block;
    margin: 0 27.5px 35px;
    text-align: center;
  }
</style>

<div>
  <h2>{{ section.settings.title | escape }}</h2>
  {% if section.blocks.size > 0 %}
    <ul>
      {% for block in section.blocks %}
        <li class="logo-bar-section" {{ block.shopify_attributes }}>
          {% if block.settings.link != blank %}
            <a href="{{ block.settings.link }}">
          {% endif %}
          {% if block.settings.image != blank %}
            {{ block.settings.image | img_url: '150x150', scale: 2 | img_tag: block.settings.image.alt, 'logo-bar__image' }}
          {% else %}
            {{ 'logo' | placeholder_svg_tag: 'placeholder-svg' }}
          {% endif %}
          {% if block.settings.link != blank %}
            </a>
          {% endif %}
        </li>
      {% endfor %}
    </ul>
  {% endif %}
</div>

{% schema %}
  {
    "name": "Logo list",
    "class": "index-section",
    "max_blocks": 10,
    "settings": [
      {
        "type": "text",
        "id": "title",
        "label": "Heading",
        "default": "Logo list"       
      },
	  {
        "type": "select",
        "id": "logo_width",
        "label": "Logo width",
        "default": "150px",
        "options": [
          {
            "label": "Extra Small",
            "value": "100px"
          },
          {
            "label": "Small",
            "value": "125px"
          },
          {
            "label": "Medium",
            "value": "150px"
          },
          {
            "label": "Large",
            "value": "175px"
          },
          {
            "label": "Extra Large",              
            "value": "200px"
          }
        ]
      }
    ],
    "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 %}
1 Like
Highlighted
Shopify Partner
5867 860 1966

This is an accepted solution.

Hello, @parisiem 

Thanks for post.

please update this code

<style>
  .logo-bar-section {
    max-width: {{ section.settings.logo_width }};
    display: inline-block;
    margin: 0 27.5px 35px;
    text-align: center;
  }
</style>

<div class="home--logobad text-center">
  <h2>{{ section.settings.title | escape }}</h2>
  {% if section.blocks.size > 0 %}
    <ul>
      {% for block in section.blocks %}
        <li class="logo-bar-section" {{ block.shopify_attributes }}>
          {% if block.settings.link != blank %}
            <a href="{{ block.settings.link }}">
          {% endif %}
          {% if block.settings.image != blank %}
            {{ block.settings.image | img_url: '150x150', scale: 2 | img_tag: block.settings.image.alt, 'logo-bar__image' }}
          {% else %}
            {{ 'logo' | placeholder_svg_tag: 'placeholder-svg' }}
          {% endif %}
          {% if block.settings.link != blank %}
            </a>
          {% endif %}
        </li>
      {% endfor %}
    </ul>
  {% endif %}
</div>

{% schema %}
  {
    "name": "Logo list",
    "class": "index-section",
    "max_blocks": 10,
    "settings": [
      {
        "type": "text",
        "id": "title",
        "label": "Heading",
        "default": "Logo list"       
      },
	  {
        "type": "select",
        "id": "logo_width",
        "label": "Logo width",
        "default": "150px",
        "options": [
          {
            "label": "Extra Small",
            "value": "100px"
          },
          {
            "label": "Small",
            "value": "125px"
          },
          {
            "label": "Medium",
            "value": "150px"
          },
          {
            "label": "Large",
            "value": "175px"
          },
          {
            "label": "Extra Large",              
            "value": "200px"
          }
        ]
      }
    ],
    "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 %}

if you have any quires and issues let me know i can help you.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
4 Likes
Highlighted
Tourist
7 0 3
Thank you Ketan! Can you help me understand where I went wrong? Many thanks

2 Likes
Highlighted
Shopify Partner
5867 860 1966

@parisiem 

Thanks for update 

sorry, i don't know what did you say?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
Explorer
150 4 21

in mobile view is there a way to get the logos all aligned in 1 row. 

 

at the moment they are 1 below each other but that only happens in mobile view 

0 Likes
Highlighted
New Member
2 0 2

Hello, 
I`ve had the same issue and your code solved it for me too. 
Thanks for that

My issue is now, that the logos are aligned in one column. In the normal gallery section they are scaled down and aligned in two columns next to each other, which looks better and saves space.

Do you have a solution for that as well? 

Thank you in advance. 


1 Like
Highlighted
Shopify Partner
5867 860 1966

@bessermitmesser 

Welcome to the Shopify community!
and Thanks for your question.


Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like
Highlighted
New Member
2 0 2

Unfortunately I can`t send you the URL, because I tried it in a draft theme. 

Here are two screenshots: 

On the top there is a standard gallery section without links and I would like it to look like this, too. 
4 logos per row on desktop an 2 in mobile view and also a transparent background. 

mobilemobiledesktopdesktop

Do you have an idea, what I can do to fix this? 

Thanks in advance. 


1 Like
Highlighted
Shopify Partner
5867 860 1966

@bessermitmesser 

Thanks for details 

but, sorry i can i guide whout cheking cdoe possible to provide store preview url

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like
Highlighted
Tourist
7 0 3

On mobile, the list of logos remains off centre. 
The text headline is centred, but the logos sit to the right. 
live here: Mocana.yoga - although i'm not sure i'll leave these logos off-centred on my live site for very long.

1 Like