Re: How to change the width of a certain page content?

Solved

How to change the width of a certain page content?

irkakhodjaev
Excursionist
14 1 3

Hi!

By default our theme (Wokiee) has two types of page width:

1) Fullwidth,

2) Boxed (1200 px)

We use boxed version.

For some pages 1200 px are too wide, so we would like to shrink the page content to 780 px.

How to achieve that without affecting other pages, Header and the Footer?

On the attached image you can see what we want to achieve.

page-width-example.jpg

Accepted Solution (1)
oscprofessional
Shopify Partner
16116 2409 3125

This is an accepted solution.

@irkakhodjaev ,

 

body.pagepage\.about.loaded .container-indent {
    max-width: 780px;
    margin: 0 auto;
}

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free

View solution in original post

Replies 14 (14)

oscprofessional
Shopify Partner
16116 2409 3125

Hi @irkakhodjaev ,

Share your store URL where you want modification.

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
irkakhodjaev
Excursionist
14 1 3
oscprofessional
Shopify Partner
16116 2409 3125

Hi @irkakhodjaev ,

It is fine at 780px media

oscprofessional_0-1631534507708.png

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
irkakhodjaev
Excursionist
14 1 3

@oscprofessional It's not about resizing the window, it's about changing the width of page's content.

Please, take a look at the screenshot I have attached to the question.

I want to change the width of page's content, so on any desktop screen wider than 780px the content wouldn't get wider.

Now the page's content is 1200px wide. I need it to change to 780px.

oscprofessional
Shopify Partner
16116 2409 3125

oscprofessional_0-1631596671447.png

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
irkakhodjaev
Excursionist
14 1 3

@oscprofessional As you can see there it affects the Header and the Footer. I need to change the width of the content only without affecting the Header and the Footer.

oscprofessional
Shopify Partner
16116 2409 3125

@irkakhodjaev ,

 

oscprofessional_2-1632135081897.png

you want like this?

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
irkakhodjaev
Excursionist
14 1 3

@oscprofessional Yes, exactly!

oscprofessional
Shopify Partner
16116 2409 3125

@irkakhodjaev ,

 

.pagepage.about .container-indent {
    max-width: 780px;
    margin: 0 auto;
}

 


Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
irkakhodjaev
Excursionist
14 1 3

@oscprofessional Is that going to change the width of all pages?

I need to change the width of some pages.

I thought it shoud be something like: if page-handle equals "my-page" then width: 780.

No?

oscprofessional
Shopify Partner
16116 2409 3125

@irkakhodjaev ,

copy again..

it will change only about us page

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
irkakhodjaev
Excursionist
14 1 3

@oscprofessional It didn't work. Maybe there's another way to identify the page rather than ".pagepage.about"?

oscprofessional
Shopify Partner
16116 2409 3125

This is an accepted solution.

@irkakhodjaev ,

 

body.pagepage\.about.loaded .container-indent {
    max-width: 780px;
    margin: 0 auto;
}

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
irkakhodjaev
Excursionist
14 1 3

@oscprofessional Thank you so much! It worked!