Responsive

Hi Thierry,

Quick question, whats the best way to adjust the responsive layout in the beans framework?

Thanks

Hey Deborah, there are many elements involved to make layouts responsive. Could you elaborate a bit on what you are intending to do (IE: changing the breackpoint values etc.)?

Thanks,

Thanks Thierry.

When in mobile view, I need just the phone number to be displayed and to displayed in line. However at the moment its putting numbers underneath each other vertically. You can see the site here: http://flooidstagingsekari.co.za/contact/

I'm sure its something very small that I've missed, but was hoping for some help.

Thanks

Hey Deborah,

Could enable Development Mode in Appearance->Settings so that I can see the data-markup-id which will help setting helper HTML classes for you responsive footer?

Thanks,

Hi Thierry,

Development Mode is enabled.

Thanks

Thanks Deborah, great job on the website 🙂

The CSS which is causing issue is the following:

.tm-mega-footer {
    padding-left: 200px;
    padding-right: 200px;
    background: #000000;

}

.uk-width-medium-1-4 {
    width: 30%;
}

.uk-width-medium-1-4 {
    padding: 0 0 0 0;
}

I would strongly advise not to modify UIkit structural classes, for example .uk-width-medium-1-4. If you wanted the width to be fixed you would set it to uk-width-1-4 which would not change from the medium breakpoint.

Your footer seems to be a simple grid so I would advise to step back, remove your custom CSS and set a raw UIkit grid which will work just fine. Then use the UIkit utility class to hide the part you want on mobile, for example:

<div class="uk-grid">
    <div class="uk-width-medium-1-3 uk-hidden-small">
     <!-- Your logo -->
    </div>
    <div class="uk-width-medium-1-3">
     <p>Tel: +971 4 434 2816</p>
        <ul class="uk-hidden-small">
         <li>Facebook</li>
            <!-- More social... -->
        <ul>
    </div>
    <div class="uk-width-medium-1-3 uk-hidden-small">
     <!-- Your menu and credit -->
    </div>
</div>

Note how the uk-hidden-small UIkit utility class is used to hide element on mobile.

I also noticed that you have CSS set for uk-container and so on. Instead you could make your website fluid using beans_remove_attribute( 'beans_fixed_wrap', 'class', 'uk-container' );.

If I can give a tip, the best (and right) approach when building website using Beans and UIkit is to get it working as far as possible only using Beans HTML API and UIkit attributes which will get your project 90% done (yes I mean 90%). Then to do final touches using CSS which should only be cosmetic and not structures changes unless it is really needed. The quick approach seems to be modifying everything via CSS but not only it is not good for performance, it is also most of the time already available in UIkit and will lead end up making things more complicated than what it is. For example, Beans website uses 86 lines of custom CSS for the entire website (aka docs, code references etc.)

Hope that helps,