Adjust the width of 2 column section (text and image) into small and big columns (Be Yours Theme)

Store Design
, , ,

Topic summary

A user is attempting to modify a two-column ‘text and image’ section in the Be Yours Shopify theme to create asymmetric column widths—specifically 1/3 and 2/3 instead of the current 50/50 split.

Technical approach identified:

  • The user has inspected the CSS and found grid item widths currently use calc(50% - var(--grid-horizontal-spacing) / 2)
  • They believe modifying this calc function could achieve the desired layout but are unsure of the exact implementation

Current status:

  • A support representative responded requesting additional details (page name, section name, location) as they couldn’t locate the specific section on the provided site
  • The discussion remains open with the user awaiting guidance on the CSS modification needed
Summarized with AI on November 9. AI used: claude-sonnet-4-5-20250929.
1

Hi Coders,

I’m trying to adjust the width of a ‘text and image’ section that is currently 2 equal columns, into columns of varying sizes. for example, the first column should be smaller (about 1/3 of the page width on desktop) and the second column larger (about 2/3)

Screenshot 2024-05-04 at 21.16.37.jpg
Screenshot 2024-05-04 at 21.16.37.jpg2915×838 107 KB

Screenshot 2024-05-04 at 21.17.05.jpg
Screenshot 2024-05-04 at 21.17.05.jpg2930×1008 124 KB

I believe you can use ‘calc’ - for instance I see that grid item width for each column currently uses – calc(50% - var(–grid-horizontal-spacing) / 2)… etc But, I’m not sure how to write what I want in CSS.

My site is: https://706707-15.myshopify.com/?_ab=0&_fd=0&_sc=1

2

Hi @CJames ,

We checked the site but could not find the section you mention above. Can you give us more info on the location of the section on the page?

The info can be page name, section name, etc.

Thank you!