Archived topic

Images too small on mobile view

5 replies · Started by Sarah on September 11, 2017

Viewing posts 1–6 of 6

September 11, 2017 at 9:21 am #383286

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

September 11, 2017 at 7:40 pm #383561

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;
}

September 11, 2017 at 11:27 pm #383638

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! :)

September 11, 2017 at 11:39 pm #383647

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;
}

September 12, 2017 at 5:37 am #383820

You beaut! That works perfectly. Thanks Tom :D

September 12, 2017 at 9:59 am #384040

You're welcome :)

This archived topic is closed to new replies.

Start building better websites today.