Hi, I have to manage a page with three column, the first one has the main content loop and the other two are sidebars. When I set the size of the sidebars I register this function:
function beans_child_view_modify_grid( $args ) {
return array_merge( $args, array(
'grid' => 10,
'sidebar_primary' => 3,
'sidebar_secondary' => 2,
'breakpoint' => 'small'
) );
}
add_filter( 'beans_layout_grid_settings', 'beans_child_view_modify_grid' );but this only echoes a fixed configuration. What I need is the possibility to define the behaviour of the grif for different window sizes. For instance I would like to transform the sidebars for sizes smaller then "small" showing them always on the same row. I Suppose there should be a way to change the class "uk-width-small-2-10" in "uk-width-small-4-10" and "uk-width-small-3-10" in "uk-width-small-6-10".
Is that right? How can I achieve this?
Thank you
Hey Vic, if you look at the UIkit Grid documentation, which class would you like on which column ideally?
Hi Thierry, maybe I didn't explain myself... I will try to be more clear posting some code. The function I wrote above returns this DOM:
<div class="uk-container uk-container-center">
<div class="uk-grid" data-uk-grid-margin="">
<div class="tm-primary uk-width-medium-2-4 uk-row-first">
[...]
</div>
<aside class="tm-tertiary uk-width-small-2-10" role="complementary" itemscope="itemscope" itemtype="http://schema.org/WPSideBar">
[...]
</aside>
<aside class="tm-secondary uk-width-small-3-10" role="complementary" itemscope="itemscope" itemtype="http://schema.org/WPSideBar">
[...]
</aside>
</div>
</div>This produces a grid of three columns 5/10 + 2/10 + 3/10 until the window size is small. When the size gets smaller the colums are not adapted to the width and the grid turns in a two rows configuration with the main column of 5/10 to 100% width and the other two columns 2/10 + 3/10 moves below the first one (which is correct) but keep covering only 50% width producing a second row with three columns of 2/10 + 3/10 + 5/10 where the third column is empty.
What I want is a behaviour where if the window size is smaller then "small" the two columns should go on a new line but covering the whole width in a two columns configuration like 4/10 + 6/10. I have clues about how to have this with html code but how can I automize the behaviour directly in the function that produces the grid code?
Hope is more clear now, thank you!
Hey Vic, this is a little complex because you have to create a nested grid and move your sidebars in there.
Here is the sample template page file (click to download) which does just that. So basically we create a wrap and nested grid. Then we move the sidebars (re-ordered as you requested via private message before the forum was live) in our new nested grid and adapt the classes accordingly.
So what we end up with is the primary content is medium-6-10 and the new sidebars wrap is medium-4-10. Then in the nested grid we have the secondary sidebar first with uk-width-6-10 uk-width-small-1-2 and primary sidebar with uk-width-4-10 uk-width-small-1-2.
This may be a bit tricky to get your head around it but don't hesitate to ask if anything isn't clear.
mmmm... I think I understood but this could be not applicable in my case because I also need the possibility to rearrange the sidebars to have and element from the main loop on the top of itself and the secondary sidebar, which should move below somehow...
I reached the same behaviour with some javascript, simply adding those classes (I already took from the uk-grid documentation) at document ready.
This seems to play your same trick for now but I'm still figuring how to move down only the first two columns and placing an element above them.
If you have clues about that I would really appreciate, thank you!
I am not sure I understand what you mean here:
mmmm… I think I understood but this could be not applicable in my case because I also need the possibility to rearrange the sidebars to have and element from the main loop on the top of itself and the secondary sidebar, which should move below somehow…
I think the easiest would be for you to share an HTML structure with the final result you are looking for and the flexible variants needed. It is a bit difficult to understand what you are after without actually seeing any design or code. Alternatively, you may share your javascript snippet if you manage to get it working via javascript.
Thanks,
Maybe an image would be the best way to understand what I meant:
https://cldup.com/ngkknnzBEb.jpg
The layout on top is the default one. The one on the bottom is what I'm figuring out how to obtain considering that the main structure is the one I posted in the code above.
Please let me know if this is clear enough now, thank you!
Yes that helps a lot 🙂
Could you kindly post the mobile layout as well so that I can send you the revised template?
This is the mobile layout: https://cloudup.com/cjxgPG_aBUA
Thank you so much for being interested on this!
You won't be able to get this desktop and mobile layouts without modifying the DOM elements using JavaScript.
You can easily achieve the desktop layout but for your mobile layout, the primary sidebar would have to move in the grid wrapping the main content and secondary sidebar so that both sidebars are side by side.
Indeed... You confirmed my worries.
So you're saying that I can achieve the desktop layout even if I'm using the three colums configuration inside the uk-grid? Do you have some beans framework function to achieve this? Can you give me some clues?
I will figure out a way for the mobile version.
Hey Vic, this sample-template.php does your desktop version 🙂
Hey Vic, I just wanted to check if you are winning with your template?
hi, thank you so much Thierry for interesting on my case. I think I'm getting every day more focused on how to solve goals with your framework and that's great for me!
In the end I didn't follow your snippet because I needed to build something more complex including the mobile part. Anyway I figured it out and now I'm working on inner pages. I'm getting so much clues from your answers to other users tickets and I think you're dowing a huge great job with this support system. But I'm still thinking that a comprehensive user guide would be the best to search&retrieve tasks.
My next challenge is to understand how to force a layout with 'c_sp' directive but setting a different sidebar then the default primary one...
Hey Vic, I am glad to hear that other discussions on the forum helps you.
Regarding layouts and sidebar, you can register your own layout or replace an existing sidebar with another one specific pages. Would you mind creating a new discussion for that as it isn't really related to this "responsive grid" discussion?
Thanks 🙂