How do I center an inline list to fit all screen sizes?

Question

Here is CSS:

            .wrapper{
                display: inline;
                line-height: 2em;
                width: 100%;
                height: 100%;
                min-width: 1000px;
                min-height: 1000px;
                text-align: center;
            }
            ul{
                list-style: none;
            }
            li{
                list-style: none;
            }
            .craftbeers{
                color: white;
                margin-top: 85px;
                display: inline-block;
            }
            .craftbeers h2{
                margin-left: 40px;
            }
            .winetap{
                color: white;
                margin-top: 85px;
                display: inline-block;
            }
            .winetap h2{
                margin-left: 40px;
            }
            .wineglass{
                color: white;
                margin-top: 85px;
                display: inline-block;
            }
            .wineglass h2{
                margin-left: 40px;
            }
            .spirits{
                color: white;
                margin-top: 85px;
                display: inline-block;
            }
            .spirits li{
                margin-left: -40px;
            }
            .other{
                color: white;
                margin-top: 85px;
                margin-left: 95px;
                line-height: 0.5em;
                text-align: center;
            }

Here is HTML:

<div class="wrapper">
            <div class="craftbeers">
                <h2>Craft Beers on Tap</h2>
            <ul>
                <li><bold>BrewDog</bold> Elvis Juice IPA (6.7%)... $7</li>
                <li><bold>New Belgium</bold> Fat Tire Amber Ale (5.2%)... $5</li>
                <li><bold>Wolf's Ridge</bold> Clear Sky Cream Ale (5%)... $6</li>
                <li><bold>Wolf's Ridge</bold> Clear Sky Daybreak (5%)... $6</li>
                <li><bold>Deschutes</bold> Fresh Squeezed IPA (6.4%)... $5</li>
                <li><bold>Ill Mannered</bold> O'Shag Irish Ale(4.8%)... $6</li>
                <li><bold>Ill Mannered</bold> Bitter Ex Double IPA (9.3%)... $8</li>
                <li><bold>CBC</bold> Bodhi Double IPA (8.5%)... $8</li>
                <li><bold>Seventh Son</bold> Bibiendum Stout (7%)... $6</li>
                <li><bold>Land Grant</bold> Beard Crumbs Stout (7.3%)... $8</li>
                <li><bold>Land Grant</bold> Greenskeeper(4.9%)... $7</li>
            </ul>
            </div>
            <div class="winetap">
                <h2>Wine on Tap</h2>
            <ul>
                <li><bold>The Dreaming Tree</bold> Red Blend... $10</li>
                <li><bold>Paul Dolan</bold> Sauvignon Blanc... $10</li>
                <li><bold>Franciscan</bold> Chardonnay... $10</li>

                <h3>Wine by Glass</h3>
                <li><bold>Matua</bold> Sauvignon Blanc... $12</li>
                <li><bold>Noble Vines</bold> Pinot Noir... $9</li>
                <li><bold>Mondavi</bold> Cabernet Sauvignon... $10</li>
                <li><bold>Bread & Butter</bold> Chardonnay... $9</li>
                <li><bold>Debonne</bold> GR Reisling... $9</li>
                <li><bold>Lagaria</bold> Pinot Grigio... $8</li>
                <li><bold>Pantucci</bold> Merlot... $8</li>
            </ul>
            </div>
            <div class="spirits">
                <h2>Spirits</h2>
            <ul>
                <li><bold>Jim Beam</bold> Single Barrel... $10</li>
                <li><bold>Knob Creek</bold>... $8</li>
                <li><bold>Knob Creek Rye</bold>... $8</li>
                <li><bold>Suntory Whisky Toki</bold>... $8</li>
                <li><bold>Captain Morgan</bold>... $7</li>
                <li><bold>Crown Bourbon Mash</bold>... $8</li>
                <li><bold>Grey Goose</bold>... $8</li>
                <li><bold>Pinnacle Raspberry</bold>... $6</li>
                <li><bold>Wild Turkey Rare Breed</bold>... $8</li>
                <li><bold>Clontarf 1014</bold>... $8</li>
                <li><bold>Crown Royal</bold>... $7</li>
            </ul>
            </div>
            <div class="other">
                <h3>Other</h3>
                <p><bold>Flights:</bold> 4 wine flights.. $15.00... 3 wine flights.. $13.00</p>
                <p><bold>Flights:</bold> Choose 4 beers.. $10.00</p>
                <p><bold>Can't decide?</bold> All samples only $1.00!</p>
                <p><bold>HAPPY HOUR:</bold> Monday-Friday 3:00-7:00, Saturday 12:00-5:00</p>
                <p><bold>Non-Alcoholic Beverages</bold>.. $1.00: Coke, Diet, Ginger Ale, Water</p>
                <p><bold>Snacks:</bold> Tommys Beef Jerky ($9.00), Chips($0.50)</p>
            </div>
            </div>

This did fit on my Mac, but I changed & now it doesn't fit on either Windows or Mac. Do I need to make a Media Query? I'm also confused w/ inline-block. Should the Wrapper only display inline or each class & inline alone without inline-block does not work. Also, here is the domain: http://vineandtapdublin.com/wine.php

EDIT: Ignore .wineglass

Any help would be appreciated, thanks.

Answer 1

Your problem is this css:

.wrapper{
                display: inline;
                line-height: 2em;
                width: 100%;
                height: 100%;
                min-width: 1000px;
                min-height: 1000px;
                text-align: center;
            }

Inline elements will not allow you to set a width or height. So you want to remove that line (by default, it will turn into display:block). After that, min-width will cause trouble on smaller screens: a phone with a width of maybe 360px will force the user to scroll to see the entire div because it is too wide.

You will also need to modify the line-height in .other. You should never use a line-height of less than 1em, or the lines of text will overlap if there is more than one line (which is happening in mobile now).

Answer 2

I don't know if you have tried Viewport in header . Viewport will help to fit in (especially mobile phone/tablet) screens.

<meta name="viewport" content="width=device-width, initial-scale=1.0">