[Resolved] Images too small on mobile view

[Sarah]

Hi, I’m just working on a page and am using Lightweight Grid columns to display a tick in one column and the content related to it beside it.

It displays fine in Desktop and Tablet view but when I check it on mobile phone view the ticks go so super small, you can’t tell what they are.

Can you take a look for me please?
https://clearfocus.consulting/new-home-page/

Thanks!
Sarah

[Tom]

Hi Sarah,

LGC is probably overkill for something like this.

Try this instead:

<div class="list-row">
    <div class="list-arrow">IMAGE HTML IN HERe</div>
    <div class="list-text">Text in here</div>
</div>

Then add this:

.list-row > div {
    display: inline-block;
}

[Sarah]

Hi Tom, I just tried that on https://clearfocus.consulting/new-home-page/ but it’s looking damn ugly! Can you take a look? I appreciate your help! 🙂

[Tom]

Ha, scratch that then.

Use this CSS instead:

.list-row {
    clear: both;
    margin-bottom: 30px;
}

.list-row .list-arrow {
    float: left;
    margin-right: 20px;
}

.list-text {
    overflow: hidden;
}

[Sarah]

You beaut! That works perfectly. Thanks Tom 😀

[Tom]

You’re welcome 🙂

[Author]

Posts