How can I match collection page widths to my homepage?

Store Design
1

Our homepage is formatted correctly. The max width is set at 1560px for the header and page content sections. The collection page is not formatted correctly. The content, logos, etc are pushed all the way to the edge of the screen. Page width for collections pages and header appears to be set at either “initial” or 100%.

Can someone assist me with matching the collection page widths to the home page for content sections, grids, and header?

I tried sorting through previous posts and implementing suggested changes to customize the code to our site but didn’t have any luck.

Home: https://throtl.com/

Collections Page: https://throtl.com/collections/exhaust-mufflers-tips

1 Like
2

@TheMike

sorry for any issue i have check both are page width same so what do you need on collection page do you need max-width?

2 Likes
3

The homepage content section is set to a max width of 1560px. So it scales until it hits 1560.

The site width is set to 100% so it scales to monitor size.

When you visit the collection pages, the content area scales to the full width of the site/monitor size.

I need the collection pages to scale to a max width of 1560px.

I can’t figure out what I am missing so I really appreciate your help.

4

@TheMike

yes please add this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/dynamic.css ->paste below code at the bottom of the file.
    this code apply for after 5 - 6 second
.PageContent.PageContent--narrow.Rte, .page-content, .page-width, main#MainContent>section.page {
    max-width: 1560px !important;
}
2 Likes
5

@KetanKumar Thank you so much. This is getting us very close. I was thinking of the main content area as the entire center column. Sorry about that. The header and content area look good now but I still need to move the featured product grid which appears to be named isp_center_container and the left column navigation named isp_left container to fit in line with the header and content.

I attached a screenshot so you can see the width issues I still see.

Thank you again.

1 Like
6

@TheMike

thanks for update

sorry but i can’t see above code

7

I am not sure what wasn’t viewable so here’s the whole message with formatting removed:

KetanKumar Thank you so much. This is getting us very close. I was thinking of the main content area as the entire center column. Sorry about that. The header and content area look good now but I still need to move the featured product grid which appears to be named “isp_center_container” and the left column navigation named “isp_left_container” to fit in line with the header and content.

I attached a screenshot so you can see the width issues I still see.

Thank you again.

I tried uploading a doc that included a screenshot of the current site width issues (it wouldn’t allow image files). I don’t have the changes live yet.

In the link below, you will see the left column navigation and the center column product results grid. I need to get those lined up with the changes we are making to the header and the content area.

The left navigation and the center product results grid need to fit side by side within that max width area of 1560px.

https://throtl.com/collections/exhaust-mufflers-tips

I hope this makes sense. Thanks so much again!!

8

@TheMike

sorry but issue was generate by this css

https://cdn1-gae-ssl-default.akamaized.net/css/search_result_page_high_fidelity.min.css

9

That’s odd. I didn’t insert or paste that code. Are you able to read this one ok?

10

Trying again.

I am not sure what wasn’t viewable so here’s the whole message with formatting removed:

KetanKumar Thank you so much. This is getting us very close. I was thinking of the main content area as the entire center column. Sorry about that. The header and content area look good now but I still need to move the featured product grid which appears to be named “isp_center_container” and the left column navigation named “isp_left_container” to fit in line with the header and content.

I attached a screenshot so you can see the width issues I still see.

Thank you again.

I tried uploading a doc that included a screenshot of the current site width issues (it wouldn’t allow image files). I don’t have the changes live yet.

In the link below, you will see the left column navigation and the center column product results grid. I need to get those lined up with the changes we are making to the header and the content area.

The left navigation and the center product results grid need to fit side by side within that max width area of 1560px.

https://throtl.com/collections/exhaust-mufflers-tips

I hope this makes sense. Thanks so much again!!

11

@TheMike

can you please sent your theme zip full code i have set and update code

12

The ZIP is too large. Are there certain files I can send you to get what you need?

1 Like
13

@TheMike

you have upload google drive or dropbox or sent email as you like