How to create a blog page template that uses the full width of the page

Store Design
1

Hi there,

Hoping this is an easy one to assist with: page www.komerco.com.au using debut theme.

For our product selection guides, we have a custom page template that spans the full width of the page that allows us to add horizontal tables. An example can be found here: https://komerco.com.au/pages/concrete-repair-selection-table-1

To make our site easier to navigate, we’d like to move these from pages to blog posts as this will allow us to have a product selection guide ‘home page’. To do this, we’ll need an additional blog post template that uses the full width of the page rather than the container. Can anyone please help us how to do this?

2

@Andrew-Alcott - we have 2 options for it

1- create custom template for blog page and set css to make it full width

2- set custom css on existing blog pages

can be done

3

Thanks Suyash.

Think I prefer option 1. What would i need to do for this:

  • Assume I’d need to duplicate the blog page template and rename.
  • What is the CSS I’d need to change to make the container full width?

Anything else?

4

@Andrew-Alcott

yes you can duplicate , rename it , add some unique class for its body and set that new blog page to the posts where you want 100% table width,

then using css for this particular page’s unique css class in body we can sert table width to 100%

If you find it difficult you have my email below, you can contact me or add me as collab and we can work on it

5

Really appreciate your help but is there anyway you can break the steps up to make it more simple for me?

Much appreciated

6

Please check attached, sorry for this trouble but I have lost my internet, if you have any more issues can you please email me so I can check on mobile

20210721_113422.jpg
20210721_113422.jpg4000×3000 2.08 MB

7

Should anyone require this type of worth in the future, thanks to Suyash who helped with this:

Firstly, it needs to be the article template that needs to be duplicated (including the copy and paste of the code). Once done, search for this text: the replace with the following:

Then add the following at the end of the theme.scss file:

.custom_blog_page_width { padding-left: 0!important; padding-right: 0!important; max-width: 100%!important;}

.custom_blog_page_width .dataTables_scrollHeadInner{ width: 100%;}