Responsiveness through grid-based layouts in AEM 6.1

[vasimakram]

Hi All,

   We are working on a demo to get responsiveness using Layout container . We see the components that are dragged and dropped in responsive grid parsys can be re-sized using breakpoints in emulator. So how to achieve the same behavior for the components that are cq included in templates ? OR will it only work for components that are dragged and dropped in responsive grid parsys. Thanks in advance.

[edubey]

Hi,

Not quite clear on your issue, this is what is understood.

Component which are dragged and dropped are responsive on page in publish but you also want responsiveness on the component which are included at template level which currently you are not getting??

Please correct If I am wrong...

Do share screenshot...it might help

[Lokesh_Shivalingaiah]

Hi Vasim,

If your component is responsive, it should work irrespective of how it is included. Responsiveness depends on your markup

[vasimakram]

Hi,

I am talking about Layout container component. Which is OOTB component in AEM 6.1. It works as parsys. When we add any component to this container it will provide a grid system. Using that grid we can re-size our component based on emulators.

My question is instead of doing drag and drop of components in Layout container we can include components in page using <cq:include>. How can we achieve this grid system for the components which are cq:include .

[ankurk67503819 · Accepted solution]

        Basically grid system is based on bootstrap and if you wanna achieve at template level using cq include you need to include your components insides col-xs-12 divs etc.. You can read more on bootstrap and accordingly create the grid in your template.

[crisr1]

I haven't tried this, but I think you may need to change the resource type of the parsys within the template to be that of the layout container... from "wcm/foundation/components/parsys" to "wcm/foundation/components/responsivegrid" 

<jcr:content cq:designPath="/etc/designs/your-site" jcr:primaryType="cq:PageContent" sling:resourceType="your-site/components/pages/subpage"> <par jcr:primaryType="nt:unstructured" sling:resourceType="wcm/foundation/components/responsivegrid"> <embedded_comp jcr:primaryType="nt:unstructured" sling:resourceType="your-site/components/your_component" > </embedded_comp>