Logo bar not centered

Solved
parisiem
Tourist
8 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 %}
KetanKumar
Shopify Partner
20709 2148 7849

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
parisiem
Tourist
8 0 3
Thank you Ketan! Can you help me understand where I went wrong? Many thanks

KetanKumar
Shopify Partner
20709 2148 7849

@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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
jtan
Trailblazer
155 4 23

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
bessermitmesser
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. 


KetanKumar
Shopify Partner
20709 2148 7849

@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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
bessermitmesser
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. 


KetanKumar
Shopify Partner
20709 2148 7849

@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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
AdamHoltrop
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.