Solved

Adjust text width on one specific page

MN_Brian
Tourist
3 0 3

I'm looking to make the page title and description use the full page width on one specific page of my site (https://guthriestore.com/pages/featured-artist-collections). The page features a large number of selected collections with a short description at the top. The title and description are currently narrower than the list of collections (which are at 100% width).

 

The other pages on the site (About us and Contact/Hours/FAQs) are also at the narrower width, but I'd like to keep those as they are. 

 

Some details:

Theme: Craft version 12.0

Page template name: featured-artist-all

 

Thanks,

Brian.

Accepted Solution (1)
Made4uo-Ribe
Shopify Partner
5089 1215 1483

This is an accepted solution.

Add some !important maybe it will listen. If not let me know we can find another solution. 

 

@media screen and (min-width: 990px) {
.page-width.page-width--narrow.section-template--17113817579752__main-padding {
    max-width: 120rem !important;
    padding: 0 5rem !important;
}
}

 

And save. Be sure you add it correctly no additional codes or missing. Codes are sensitive. 

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


View solution in original post

Replies 5 (5)

Moeed
Shopify Partner
3531 890 1106

Hey @MN_Brian 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

{% if page.handle == "featured-artist-collections" %}
<style>
@media screen and (min-width: 768px) {
.page-width.page-width--narrow.section-template--17113817579752__main-padding {
    margin: 0 !important;
    max-width: 100% !important;
    text-align: -webkit-center !important;
}
}
</style>
{% endif %}

RESULT:

Moeed_0-1705682140957.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
Canva to Shopify in clicks - Free App

Made4uo-Ribe
Shopify Partner
5089 1215 1483

Hi @MN_Brian 

Check this one. 

From your Shopify admin dashboard, click on "Online Store" and then "Themes".

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

 

@media screen and (min-width: 990px) {
.page-width.page-width--narrow.section-template--17113817579752__main-padding {
    max-width: 120rem;
    padding: 0 5rem;
}
}

 

And save. 

Result:

Made4uoRibe_0-1705697741203.png

 

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


MN_Brian
Tourist
3 0 3

Thank you Moeed and Made4uo-Ribe for the clear instructions. I tried both options and neither one changed the text on that page. The result image that Made4uo-Ribe shows is exactly how I want it to look. I'm not sure what else to try. 

Made4uo-Ribe
Shopify Partner
5089 1215 1483

This is an accepted solution.

Add some !important maybe it will listen. If not let me know we can find another solution. 

 

@media screen and (min-width: 990px) {
.page-width.page-width--narrow.section-template--17113817579752__main-padding {
    max-width: 120rem !important;
    padding: 0 5rem !important;
}
}

 

And save. Be sure you add it correctly no additional codes or missing. Codes are sensitive. 

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


MN_Brian
Tourist
3 0 3

Thank you, Made4uo-Ribe. That worked!