Changing CSS to a specific page only

Solved
zenkimnyc
New Member
3 0 0

I'm trying to increase the padding on 'about us' page only. text gets very long and hard to read with current 'debut' theme.

tried adding below under .page-width in theme.scss.liquid but no luck:

@include media-query($medium-up) {
padding-left: 200px;
padding-right: 200px; } 

unfortunately this change was applied to all the other pages which is not what i want.

is there a easy way to push this change only to 'about us' page?

 

0 Likes
dmwwebartisan
Shopify Partner
4567 1023 1320

Hey there,

Can you please share your about us page url ? so I can check and tell you solution.

Let me know.

 

Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
zenkimnyc
New Member
3 0 0

hi,

here is the url: https://www.nobrablem.nyc/pages/about-us

pw: oasis707

 

thank you

0 Likes
Ninthony
Shopify Partner
1637 224 615

This is an accepted solution.

Your about us page doesnt have a unique identifier for the body tag, so you're going to have to go into page.liquid in your templates folder and make a condition to apply styles only if it is on the about us page. Open page.liquid and at the top add this:

{% if page.handle == "about-us" %}
<style>
.page-width {
    padding-left: 200px;
    padding-right: 200px;
}
</style>
{% endif %}

And just change that value to whatever your needs are.

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
Ninthony
Shopify Partner
1637 224 615

This is an accepted solution.

Actually, it might be better to change the max-width property so you dont have an issue on mobile:

.page-width {
    max-width: 900px;
}

Just be sure to put it in the condition I provided above with the style tags

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
zenkimnyc
New Member
3 0 0

works great!

i noticed the footer width of 'about-us' is affected as well, but it's good enough for now.

thank you!

0 Likes
SneakerSafe
Explorer
53 0 13

@Ninthony

Hi I want to do the same adjustments to this page https://sneakersafe.co.uk/pages/size-chart. I've tried the codes posted here but they do not work, would you be able to help please?

0 Likes
Ninthony
Shopify Partner
1637 224 615
{% if page.handle == "size-chart" %}
<style>
.template-page .page-width {
    max-width: 500px;
}
</style>
{% endif %}

Just change the width to whatever you want it to be.

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D