Make css layout responsive

Hi all,

I have a problem with making my css layout responsize. What I have is the CssLayout as my content and two FormLayouts laid horizontal by default inside. What I want to do is when width of the browser is too small, the form from the right side goes vertically, on the botton of that one from the left side. And I’ve already done that, but only if I set size as undefined for both FormLayouts but when I do setSizeFull, the responsive wont’t work. My problem is I need to setSizeFull the components inside of both FormLayout and FormLayouts either.

Here is my code: final CssLayout content = new CssLayout(); content.addStyleName("css-layout"); content.setResponsive(true); content.setWidth(MAX_SIZE); final FormLayout leftSide = new FormLayout(); leftSide.setSizeUndefined(); // I need to delete that !! form is too small leftSide.setMargin(new MarginInfo(true, true, true, true)); leftSide.addComponents(name, shortName); leftSide.addStyleName("left-form"); content.addComponent(leftSide); final FormLayout rightSide = new FormLayout(); rightSide.setSizeUndefined(); // I need to delete that !! form is too small rightSide.setMargin(new MarginInfo(true, true, true, true)); rightSide.addComponents(town, address); rightSide.addStyleName("right-form"); content.addComponent(rightSide); Panel wrap = new Panel(); wrap.setContent(content); wrap.addStyleName("borderless"); Responsive.makeResponsive(content,leftSide,rightSide); return wrap;
And here is my CSS :

[code]
.css-layout {

.left-form {
    line-height: 30px;
    padding: 5px;
}

.right-form {
    vertical-align: top;
}
        
.right-form.left-form {
    padding: 5px
}        


}

.css-layout[width-range~="0-699px"]

{
.right-form {width: 100%}
}

.css-layout[width-range~="700px-"]

{
.right-form {width: 50%}
}
[/code]Thanks for all help.

regards
Dominik