What's your biggest current challenge? Have your say in Community Polls along the right column.

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

Solved

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

Andrew-Alcott
Excursionist
28 4 14

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?

 

Accepted Solution (1)
Andrew-Alcott
Excursionist
28 4 14

This is an accepted solution.

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: <article class="page-width" aria-labelledby="title-0"> the replace with the following: <article class="page-width custom_blog_page_width" aria-labelledby="title-0">

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%;}

View solution in original post

Replies 6 (6)

suyash1
Shopify Partner
10215 1260 1601

@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

To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Andrew-Alcott
Excursionist
28 4 14

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?

suyash1
Shopify Partner
10215 1260 1601

@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

To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Andrew-Alcott
Excursionist
28 4 14

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

Much appreciated

suyash1
Shopify Partner
10215 1260 1601

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

To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Andrew-Alcott
Excursionist
28 4 14

This is an accepted solution.

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: <article class="page-width" aria-labelledby="title-0"> the replace with the following: <article class="page-width custom_blog_page_width" aria-labelledby="title-0">

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%;}