I have used Foundation grid to create the site. After that created the page, but it's showing the small area (small css classes) during page edit in experience mode and also after publish its not covering the complete page:

Foundation Grid: enter image description here

While Bootstrap Grid covering complete page: enter image description here

Foundation Page output: enter image description here

Please let me know, is there any settings needs to be changed for Foundation grid, so that it will cover whole page.


Well, it's how the foundation grid works. It's more grid specific setting rather then SXA one. But thanks to the fact that SXA supports different grid system there is an option to customize this.

Just navigate to your theme item and look for PlaceholderSettings field:

enter image description here

Change settings from Fixed to Flex for one of the placeholders or to all of them. Here I've just changed this to the Main placeholder and this gives me something like that:

enter image description here

By changing those settings you change the CSS class which is assigned to the certain placeholder. Those classes are defined per grid system. For the Foundation grid they are defined here: /sitecore/system/Settings/Feature/Experience Accelerator/Foundation/Grid Definition:

enter image description here

  • Thanks for the guidance. After updating the Placeholder settings to site specific grid, i am able to see that extra "expanded" css class added into each container div (header/main/footer).
    – Amit Kumar
    Jan 9 '18 at 9:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.