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

Solved
Andrew-Alcott
Excursionist
24 3 12

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?

 

0 Likes
suyash1
Shopify Partner
3241 363 531

@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

You are welcome to contact me, my email - suyash.patankar@gmail.com
Free Shopify solutions/tutorials on youtube
#1 page builder app on Shopify - for FREE! PageFly
Andrew-Alcott
Excursionist
24 3 12

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?

0 Likes
suyash1
Shopify Partner
3241 363 531

@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

You are welcome to contact me, my email - suyash.patankar@gmail.com
Free Shopify solutions/tutorials on youtube
#1 page builder app on Shopify - for FREE! PageFly
Andrew-Alcott
Excursionist
24 3 12

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

Much appreciated

0 Likes
suyash1
Shopify Partner
3241 363 531

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

You are welcome to contact me, my email - suyash.patankar@gmail.com
Free Shopify solutions/tutorials on youtube
#1 page builder app on Shopify - for FREE! PageFly
0 Likes
Andrew-Alcott
Excursionist
24 3 12

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

0 Likes