Liquid, JavaScript, themes, sales channels
Hi!
I'd like to increase the width of only About page, make the margins smaller. I created this page from "pages" section on shopify default selection to create new pages. How can I do it?
Thanks for your help!
@karina_ please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.
.template-page .grid .grid__item{
position: unset !important;
}
.template-page .grid .grid__item .rte img{
margin: 0 auto !important;
width: 100% !important;
}
@media only screen and (min-width: 590px){
.medium-up--three-quarters {
width: 100% !important;
}
}
thanks a lot! It did make the margins smaller but unfortunately on all pages. I wanted to have it only for my About page Is it possible?
@karina_, first, you need to go to theme.liquid (Theme -> Edit code -> Layout -> theme.liquid) and add a page identifier class to the body tag so you know it's the About page:
<body class=" template-{{ page_title | handle }} " ....>
Then you can add in you CSS:
body.tempate-about .page-width {
max-width: 100%;
width: 100%;
}
hi! thanks a lot. Could you please specify where to add the second code?
Hi @karina_ , the second code will go into your CSS file which is located at Themes -> Edit code -> Assets -> theme.css. Make sure to add the code at the end of the CSS file.
It still doesn't work. What exactly should I insert in the first code? and where should I place it exactly?
<body class=" template-{{ page_title | handle }} " ....>
is it like this <body class="template-{{ about |/pages/about }}"> ?
@karina_ no, you need to insert the code exactly as I have given you without making changes.
If you go to this file: theme.liquid (Theme -> Edit code -> Layout ->theme.liquid), press CTRL+F and search for "body" tag. Once you find the body tag you will see "class" like this:
<body class="
You need to add this part to class:
template-{{ page_title | handle }}
So it should look something like this:
<body class=" template-{{ page_title | handle }} (there could be other classes here, you don't need to touch them) " >
Once you have added this code to theme.liquid, add the CSS code to your CSS file (Themes -> Edit code -> Assets -> theme.css😞
body.tempate-about .page-width {
max-width: 100%;
width: 100%;
}
thanks for your help! It didn't work out unfortunately
Thanks for the help, I also just solved this problem.
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024