Center image in footer that is left aligned in Minimal theme but for mobile display only

Store Design
1

Hello!

I’ve added an image of my logo underneath a text section in the footer (added via editing code in footer.liquid):

{% when 'text' %}
<div class="grid__item {{ column_width }}">
<h3 class="h3">{{ block.settings.title | escape }}</h3>
<div class="rte">{{ block.settings.richtext }}</div>
<div class="grid-item one-half text-left" style="margin-left: 0px">
<img src="{{ 'footerimage.png' | asset_url }}" alt="alt text" width="200px"/>
</div>
</div>

In desktop view, the image and text are left aligned which is what I want, however- everything is centred when in mobile view and I do like it but the image that I’ve now placed underneath the text is still left aligned so it looks off between everything else. How can I make it so the image will change to center align for mobile view only and still remain left for desktop?

Thanks in advance!

2

@lisasnacks

Could you provide me store URL? I should be able to answer your question.

Yours faithfully!

3

Sent a message! Thanks :slightly_smiling_face:

4

@lisasnacks

yes, please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/timber.scss.liquid->paste below code at the bottom of the file.
@media screen and (max-width: 768px) {
.site-footer .grid-item.one-half.text-left {
    width: 100%;
    text-align: center !important;
}
}