Image on list view page

[combert]

The image on the list view page takes up a lot of space. Especially when viewed on mobile devices.

This page: http://lists.starwarsclubhouse.com/display_list?tourney_list_id=24185

Maybe show it on desktop devices and hide it on mobile devices? Or remove it all together since it really doesn't serve any real purpose.

Anyways, thank you for the site.

[combert]

Hi

I did a little testing. Modifying the css in main.css and replacing the exisitng css with this should create a better display on mobile devices.

At the very least just adding adding overflow: hidden; to .main-section will make a big difference for tablet users.

.entries {
    padding: 0 2%;
    overflow: hidden;
    width: 36%;
    float: left;
}

.charts {
    width: 60%;
    float: left;
    overflow: hidden;
}

.main-section {
    width: 100%;
    margin: 0;
    overflow: hidden;
}

@media only screen and (max-width: 640px) {
    .entries {
        width: 96%;
        float: none;
    }
    .charts {
        display: none;
    }
}

[lhayhurst]

hi! thanks for the good suggestions. I've added them into main.css. I kind of suck at styling -- I totally appreciate your help!!

[combert]

Great!

You need to make the ".charts" width 60% instead of 66%.

---

Thomas Foss Christensen

On Tue, Jul 19, 2016 at 5:49 AM, Lyle Hayhurst notifications@github.com wrote:

hi! thanks for the good suggestions. I've added them into main.css. I kind of suck at styling -- I totally appreciate your help!!

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/lhayhurst/xwlists/issues/70#issuecomment-233523038, or mute the thread https://github.com/notifications/unsubscribe-auth/AA0p2VbUGIPFmGRm4TXx52iaEa9TlQf1ks5qXEkvgaJpZM4H-b9k .

[combert]

Ahh!

It's because you have a style block for ".charts" in the "list_display.html" template. And that overrides the main.css file. So you need to remove that or set the width to 60%.

Also I just realized that the media query thing doesn't really work on mobile phones since the entire site is not responsive. Sorry about that. Doesn't do any harm though.

[combert]

Right now the list is being show beneath the picture because of the 66%.

[lhayhurst]

sorry for delayed response, have been moving into my new home! blundering through this now

[lhayhurst]

great, changed it to 60%, thanks again. next step ... port everything to bootstrap :-)