Resize logo bar (social media links) on Debut theme

Solved
Highlighted
Tourist
3 0 0

The debut theme allows a section to showcase social media links. It's referenced in assets as logo-bar.liquid. On my site, snapfocal.com, I've included a link to our instagram, facebook, and youtube. When I view the website on desktop the spacing and sizing of the image links is good, but when I shrink the size of my browser window the images stay the same size and it messes up the formatting, putting the 3 logos in a column instead of a row. This also happens when I view it on mobile, because the screen is smaller. I'd like to make it so that the spacing stays the same as the screen resizes, and the logos themselves get smaller, so that they are always in a row. 

Below is the code, if anyone can show me what to change to get the desired result that would be great.

<div class="page-width">
  {% if section.settings.title != blank %}
    <div class="section-header text-center">
      <h2>{{ section.settings.title | escape }}</h2>
    </div>
  {% endif %}

  {% if section.blocks.size > 0 %}
    <ul class="logo-bar{% if section.settings.title_enable %} logo-bar--large{% endif %}">
      {% for block in section.blocks %}
        <li class="logo-bar__item{% if section.settings.title_enable %} logo-bar__item--large{% endif %}" {{ block.shopify_attributes }}>
          {% if block.settings.link != blank %}
            <a href="{{ block.settings.link }}" class="logo-bar__link">
          {% endif %}
          {% if block.settings.image != blank %}
            {{ block.settings.image | img_url: '160x160', 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 %}

  {% if section.blocks.size == 0 %}
    {% include 'no-blocks' %}
  {% endif %}
</div>

 

0 Likes
Highlighted
Shopify Partner
1023 214 464

@snapfocal 

 

Go to the Assets > theme.scss.liquid file and add following code at the end of file:

#shopify-section-1597782239461 ul.logo-bar li { width: 15%; }

  

Cheers,

Tejas

Shopify Expert | Skype: tejas.nadpara
- Like and Mark as an Accepted Solution if reply helpful
- Feel free to contact me on support@hexaecommerce.com regarding any help
1 Like
Highlighted
Tourist
3 0 0

Dear Tejas, thank you so much! That fixed it perfectly. If I may ask, what does the "#shopify-section-15..." reference? Additionally I see the ul and li are used to reference different items - the list and the list items - in css but where is the sheet they are referencing? Thanks again!

0 Likes
Highlighted
Astronaut
1084 178 213

This is an accepted solution.

@snapfocal 

It references to a Shopify section, the ones that are created at the Customize page. With this specific code, if you ever remove this section OR add another one that code will not work anymore.

I'd suggest changing to this:

.logo-bar .logo-bar__item{
width: 15%;
}


It will have the same result but work permanently, no matter if you remove/add other of those sections in the future.

Kind regards, 
Diego

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
1 Like
Highlighted
Tourist
3 0 0

Thank you! I'm still a little confused - I understand that the .logo-bar refers to a class called logo-bar, and I found the original declaration of the class in the logo-bar.liquid file, but theres no width defined there. I'm new to css so maybe 'width' is just a universal keyword? Thanks again for your help

0 Likes
Highlighted
Astronaut
1084 178 213

@snapfocal You're welcome! yes, width 15% is some sort of universal code for css.

Next time you need help feel free to contact me personally I will be happy to help! 

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
0 Likes
Highlighted
New Member
28 0 0

Please i need help, i have been trying to turn mu menu on desktop to a "hamburger menu" so far so good this is where i am at and i am desperately in need of help to make it look proper on all devicesso far so good this is where i am at and i am desperately in need of help to make it look proper on all devices

0 Likes
Highlighted
Astronaut
1084 178 213

@Lawrence7 

Please create a new question with your issue for the sake of organization. People will be able to help you quicker. Don't forget to include your store url.

Kind regards,
Diego

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
0 Likes