Minion Theme: make a text box on a collection page

Store Design
, ,

Topic summary

A user working with the Minion theme needed to make a text box wider on their collection pages. Despite selecting ‘wide’ and ‘fullwidth’ layout options in the theme settings, the text box remained too narrow.

Solution provided:

  • Add custom CSS to the end of the base.css file
  • Target the specific section ID with a max-width: 100% property within a media query for screens wider than 750px
  • The CSS successfully expanded the text box to the desired width

Follow-up request:
The user also wanted to widen their blog post layout. A similar CSS solution was provided, targeting the blog article grid with the same max-width: 100% approach.

Both CSS modifications resolved the width issues. The discussion demonstrates a common Shopify theme customization where default theme settings have limitations that require custom CSS overrides.

Summarized with AI on November 25. AI used: claude-sonnet-4-5-20250929.
1

I’ve added a tex box under the product grid on my collection pages and I want it to be wider. Where do I edit the code for this?

Screen Shot 2022-10-31 at 6.14.23 pm.png
Screen Shot 2022-10-31 at 6.14.23 pm.png2700×1542 575 KB

2

@Slice_agency - this needs css, can you please share this page link?

3

Here you go https://petbayaus.myshopify.com/collections/all

Password is otseaz

4

@Slice_agency - please check if you have an option to make this text wide from settings for the section, it does not have unique class, so better if have default section

5

Thanks for looking :slightly_smiling_face: It gives me the option to select the width for the layout and the background. I have selected ‘wide’ and ‘fullwidth’ but it doesn’t make it wide enough.

Screen Shot 2022-10-31 at 6.33.44 pm.png
Screen Shot 2022-10-31 at 6.33.44 pm.png2328×1554 565 KB

Screen Shot 2022-10-31 at 6.33.36 pm.png
Screen Shot 2022-10-31 at 6.33.36 pm.png2282×1494 558 KB

6

@Slice_agency - try this css, please add this css to the very end of base.css file

I think this section has same id on all the pages

@media screen and (min-width:750px){
#shopify-section-template--14378302898481__394b4fc9-ad0f-461b-82e9-c4da5af68107 .grid .col-6{max-width:100%;}
}
7

Beautiful!! That worked, thank you so much :slightly_smiling_face:

1 Like
8

Hi @Slice_agency

I’m Richard Nguyen - CRO Expert at PageFly, I’d like to suggest this idea:

Add this css at the bottom

Online Store ->Theme ->Edit code

Assets → base.css

.col-6 {

max-width: 100% !important;

}

Hope you find my answer helpful!

Regards,

Richard-pagefly

9

Hi again, I also want my blogs to be wider. Is that a simple solution? Here is a blog: https://petbayaus.myshopify.com/blogs/news/why-do-dogs-like-squeaky-toys

10

@Slice_agency - try this

@media screen and (min-width:750px){
article .grid .col-6{max-width: 100%;}
}
11

Perfect! Thank you again :slightly_smiling_face: