How can I adjust my product page layout for better text spacing?

Store Design

Topic summary

A user seeks to modify their product page layout to increase text spacing (moving it further left) while reducing image space. Two solutions are proposed:

Solution 1 (PageFly-Victor):

  • Navigate to Online Store → Theme → Edit code
  • Open theme.liquid file
  • Add custom markup code before the closing tag

Solution 2 (Denishamakwana):

  • Add CSS code to assets/base.css file
  • Uses media query targeting screens 990px+ width
  • Adjusts product media wrapper to 50% max-width with calculated spacing

A follow-up question asks about achieving a similar layout where the right-side description matches the height of product images, referencing the taneraskin website as an example. The inquiry involves either increasing right-side description space or allowing content blocks to move below images.

Status: Solutions provided but implementation results not confirmed; additional layout question remains open.

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

Hi there,

How can I change the layout of my individual product page so that the text has more space (is further to the left) and the pictures have less space?

https://taneraskin.com/products/keratosis-pilaris-body-cream

Best,

Isa

2

Hi @isabellemaria ,

This is Victor from PageFly - Landing page builder, I’d like to suggest this idea for solution:

Step 1. Go to Online Store → Theme → Edit code
Step 2. Open your theme.liquid theme file
Step 3. Paste below code before :

PageFlyVictor_0-1681076892592.png
PageFlyVictor_0-1681076892592.png1857Ă—849 166 KB

Hope my answer will help you.

Best regards,

Victor | PageFly

1 Like
3

Please add below css code at bottom of assets/babse.css file

@media screen and (min-width: 990px)
.product–large:not(.product–no-media) .product__media-wrapper {
max-width: 50%;
width: calc(50% - var(–grid-desktop-horizontal-spacing) / 2);
}
@media screen and (min-width: 990px)
.product–large:not(.product–no-media) .product__info-wrapper {
max-width: 50%;
width: calc(50% - var(–grid-desktop-horizontal-spacing) / 2);
}

Thank you.

1 Like
4

Hi,

I would like to have same layout. currently my descripcion on the right is longer than the pictures side. I like how it looks on taneraskin website.

Funda Nordica y Sábana de seda de bambú - B-ESS – B-ESS (bessessentials.com)

Not sure if increasing the space for the right side description will help or just allow to move some of the blocks to the space below the pics.