UIKit 2.x - One or two columns dependant on browser width

Palebo · Oct 4th 2018

Hi all

I want to create a 2 column setup, where both columns (Section A and B) should be visible within a wide browser view (Desktop) and only one column (Section B) in a small browser view (Mobile).

So I started by doing this using uikit v2.x but when in Mobile view the Sectioj B is kissing approx 25% of its width. It only fills out 75% of the width.

<div class="uk-width-1-4 uk-visible-large">Section A</div>

<div class="uk-width-3-4">Section B</div>

</div>

Any good suggestions of how to fix this? I need for the Mobile view to fill out 100% width.

/Palebo

Fosphatic Duke · Oct 4th 2018

Hello,

Uikit v2 hugh? Some more information and a link where you try to solve it would be helpful.

Regards,

Fossy

jhejlik · Oct 4th 2018

Hi, try this:

Code

<div class="uk-grid">
<div class="uk-width-1-4 uk-visible-large">Section A</div>
<div class="uk-width-large-3-4">Section B</div>
</div>

Abdulhalim · Oct 4th 2018

Hello dude,

As Fosphatic Duke it's better to put the link to your website, where you have problem exactly, Also thanks to jhejlik for his guide .

for more info you have to review UIKit v2 tutorial @ https://getuikit.com/v2/docs/tutorials.html / section responsive grid

UIKit 2.x - One or two columns dependant on browser width

Fosphatic Duke Oct 4th 2018

Share

Tags