Skip to main content

How do I increase the width for the content on all of my pages in the Action theme?

By default, the Action theme places the content of each page in smaller columns that don't take up the full width of the page. How do I remove this styling?

Official response from

To remove the column styling, you can target the classes using JavaScript by adding the following code to the bottom of your layout.html file:

<script>
  //Removes smaller columns from Bootstrap Grid and makes it larger
  $(".container > .row > div").removeClass().addClass("col-sm-12");
  //Sets blockquote elements to 100% max-width
  $("blockquote").css("max-width", "100%");
</script>

Please note that this script will change the behavior on every page. If you need to exclude certain pages from this styling, this is possible with liquid!

Share this post

Showing 2 reactions

How would you tag this suggestion?
Please check your e-mail for a link to activate your account.