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?

I use Motion theme and my website is www.aricluv.com

Thanks for your help!

0 Likes
Natztech
Shopify Partner
646 176 432

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

 

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
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 https://www.aricluv.com/pages/about. Is it possible?

0 Likes
freya0328
Excursionist
79 0 8

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

0 Likes
g33kgirl
Shopify Partner
223 59 71

@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.
Do NOT give out your passwords unless absolutely necessary.
0 Likes
karina_
New Member
5 0 0

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

0 Likes
g33kgirl
Shopify Partner
223 59 71

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.
Do NOT give out your passwords unless absolutely necessary.
0 Likes
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 }}"> ?

0 Likes
g33kgirl
Shopify Partner
223 59 71

@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.
Do NOT give out your passwords unless absolutely necessary.
0 Likes
karina_
New Member
5 0 0

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

0 Likes