lundi 7 mai 2018

uikit 3.0 - responsive grid for mobile

i'm currently playing with the uikit (https://getuikit.com). I'm in trouble creating a responsive grid. For desktop & mobile.

My html is looking like this:

<div class="uk-section uk-section-muted">
<div class="uk-container uk-position-relative">
    <h1 class="uk-h1 uk-heading-line uk-text-center uk-text-lowercase"><span>hey</span></h1>
    <div class="uk-grid-match uk-child-width-1-3@m" uk-grid>
        <div>
            <div class="uk-card uk-card-default uk-card-large uk-card-hover uk-card-body uk-responsive-width">
                <h3 class="uk-card-title uk-text-lowercase">lorem</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                    labore
                    et dolore magna aliqua.</p>
            </div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-large uk-card-hover uk-card-body uk-responsive-width">
                <h3 class="uk-card-title uk-text-lowercase">lorem</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                    labore
                    et dolore magna aliqua.</p>
            </div>
        </div>
        <div>
            <div class="uk-card uk-card-default uk-card-large uk-card-hover uk-card-body uk-responsive-width">
                <h3 class="uk-card-title uk-text-lowercase">lorem</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                    labore
                    et dolore magna aliqua.</p>
            </div>
        </div>
    </div>
</div>

and it looks good for the desktop browser, but not when it comes to mobile. The mobile version looks like this: https://prnt.sc/jet3f3

And it should look like this: http://prntscr.com/jet47e

Thanks for your support,

cheers




Aucun commentaire:

Enregistrer un commentaire