How to change the width of About page? Motion theme

karina_
New Member
5 0 0

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!

Replies 9 (9)

Kinjaldavra
Shopify Partner
2302 570 1422

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

 

karina_
New Member
5 0 0

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?

g33kgirl
Shopify Partner
390 109 142

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

 

 

If you found my answer helpful, please LIKE and ACCEPT.
buymeacoffee.com/g33kgirl
If you're not comfortable with code, please modify code files at your own risk.
karina_
New Member
5 0 0

hi! thanks a lot. Could you please specify where to add the second code?

g33kgirl
Shopify Partner
390 109 142

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.

If you found my answer helpful, please LIKE and ACCEPT.
buymeacoffee.com/g33kgirl
If you're not comfortable with code, please modify code files at your own risk.
karina_
New Member
5 0 0

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 }} " ....>
Copy


is it like this <body class="template-{{ about |/pages/about }}"> ?

g33kgirl
Shopify Partner
390 109 142

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

 

 

 

If you found my answer helpful, please LIKE and ACCEPT.
buymeacoffee.com/g33kgirl
If you're not comfortable with code, please modify code files at your own risk.
karina_
New Member
5 0 0

thanks for your help! It didn't work out unfortunately

freya0328
Pathfinder
140 1 6

Thanks for the help, I also just solved this problem.

banned