Pacific Theme - Collection list Wide screen

Store Design
1

Hey, I’d like to make my collection lists the full width of the screen.

I’ve tried several codes but nothings working.

My website is coldstart.co.nz

2

@coldstartnz please add this css to the very end of your theme.css file and check,
Shopify Admin → Online Store ->Theme → Edit code → theme.css

@media (max-width: 1021px) {
.home-module{padding-left: 0; padding-right: 0;}
}
3

Hey Suyash,

I added it to theme.css.liquid and it hasn’t worked

4

@coldstartnz - try this one

@media (min-width: 1021px) {
.home-module{padding-left: 0 !important; padding-right: 0 !important;}
}
5

that doesnt work either

6

@coldstartnz - it works, this is the home page I see, or you want some other page? can you please share the link?

suyash1_0-1745979995561.png
suyash1_0-1745979995561.png1366×768 212 KB

7

Screenshot 2025-04-30 at 2.36.11 PM.png
Screenshot 2025-04-30 at 2.36.11 PM.png2560×1202 442 KB

Hey, Thats not what I see on my computer

8

@coldstartnz - what is your screen size?

9

27 inch

10

@coldstartnz add this css and check

@media (min-width: 1401px) {
.home-module .home-module-content{max-width: 100%;}
}
11

Bingo! Thank you very much.

I have another one for collections, you can see on my collection list the text is white, I’d like to keep it white but highlight the text in black

12

@coldstartnz - can you please elaborate? you want to make text black or white?

13

forget that actually. How do I delete the collection list title text on the images?

14

@coldstartnz - please add this

.home-collection-list-item-content {
    display: none;
    visibility: hidden;
}
15

To make your collection list full width on your Shopify store (coldstart.co.nz), you’ll need to edit your theme’s code to remove padding or container limits around the section displaying the collections.

Here’s a step-by-step solution that usually works for themes like Craft or Dawn:

  1. Go to Online Store > Themes > Click “…” on your live theme > Edit Code

  2. Search for the file named collection-list.liquid or main-collection-list.liquid (depending on the theme, it may also be under sections or templates)

  3. Look for a wrapper or div with a class like page-width or grid

  4. Replace or remove that wrapper, or override the width in CSS

Example CSS Fix:

You can also use CSS in your base.css (or theme.css) file to override width restrictions:

.collection-list,
.collection-list .page-width {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100% !important;
}

  1. Go to Assets > base.css or theme.css

  2. Scroll to the bottom and paste the code above

  3. Save and refresh your store

Make sure to clear the browser cache or check in incognito to see the changes.

Accept this as solution if it help out

16

I want to make my website in such an angle that there is a picture on one side and content on the other side and a cute background with content written on top. I am all about** calculators** so I need guidance for this if anyone knows about it.

17

Thank you!