Shopify themes, liquid, logos, and UX
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?
Solved! Go to the solution
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%;}
@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
Thanks Suyash.
Think I prefer option 1. What would i need to do for this:
Anything else?
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
Really appreciate your help but is there anyway you can break the steps up to make it more simple for me?
Much appreciated
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
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%;}
Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-TekLabs to discuss practical strategies for...
By JasonH Nov 13, 2024The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024