How do I change the width of a specific section?

Store Design
, , , , , , , , , , ,

Topic summary

A user needed to center and resize a specific section on their Shopify store to 1300px width. The section in question was an image-with-text component that needed to be narrower than the default width.

Solutions Provided:

Three different CSS-based approaches were offered:

  • Option 1: Add custom CSS to the theme.liquid file before the </head> tag
  • Option 2: Use the theme’s Custom CSS section (Shopify admin > Customize > Theme settings > Custom CSS) with media query targeting the specific section class
  • Option 3: Modify the base.css file directly by adding CSS at the end

All solutions used @media screen and (min-width: 1024px) to apply the 1300px width only on desktop screens. The approaches targeted either the specific section ID or the general image-with-text class.

Resolution: The original poster confirmed one of the solutions worked successfully.

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

Hi, how can I change the width of this section:

CreatorTim_1-1737408993699.png
CreatorTim_1-1737408993699.png1843×832 142 KB

  1. 1. I want to align it to the center of the page.

  2. I want to make it slightly narrower, at 1300px.

Here is my store URL: https://1049xn-ya.myshopify.com/

Thanks a lot,
Tim

2

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code before the tag

Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!

1 Like
3

Hi @CreatorTim ,

You can follow the steps here:

Step 1: Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/ypQ7nly2wv27
Step 3: Copy the code below and paste it there

Here is the code for step 3:

@media screen and (min-width: 1024px){
.section-template--22711083729161__image_with_text_ejW6Nw-padding .page-width > .image-with-text {
    width: 1300px !important;
}
}

Here is the result:

DaisyVo_0-1737432489874.png
DaisyVo_0-1737432489874.png924×401 73 KB

Let me know if it works!

Best,

Daisy

1 Like
4

Hi CreatorTim

You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file base.css and add this code at the end of the file

@media screen and (min-width: 1024px){
  .image-with-text.image-with-text--no-overlap.isolate {
     width: 1300px;
  }
}

Best,
Esther

1 Like
5

Thank you man! Appreciate it