Hey i want to make my product image on my product page full width for mobile and desktop. Could anybody help me with coding like this? An example is shown underneath:
Theme: Taste
Topic summary
A user seeks CSS code to make product page images display at full width on both mobile and desktop for the Taste theme. They provided example images and store credentials for assistance.
Initial Solutions Attempted:
- Dan-From-Ryviu suggested adding CSS code to theme.liquid targeting the product template, later correcting a missing colon in the padding property
- PageFly-Oliver provided alternative CSS code to be inserted at the bottom of theme.liquid
Current Issue:
The provided solutions made the entire product page full width, not just the product image as intended. The user clarified they only want the product image itself to be full width, while keeping other page elements at their normal width.
Status: The discussion remains open with PageFly-Oliver beginning to offer another solution attempt. The core problem of isolating full-width styling to only the product image (rather than the whole page) is unresolved.
Go to your Online store > Themes > Edit code, open theme.liquid add this code below before tag
{%- if template.name == 'product' -%}
{%- endif -%}
Hey man thanks for your help but it did not work. Do you maybe have another code?
hi, @PRETTYFRIDAYS
Please share URL and password
Missing : in padding code. Please update code to this
{%- if template.name == 'product' -%}
{%- endif -%}
Hi @PRETTYFRIDAYS ,
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file theme.liquid
Step 3: Paste the below code at the bottom of the file → Save
Hope my solution works perfectly for you!
Best regards,
Oliver | PageFly
Hey, thanks for your help, it dit in fact work, but i have one issue. The entire page is now full width and that is not what i meant. I only meant the product image. Do you know how to change this?
Kind regards
Daan
It did not work, the whole page is not full width. I only want the product image to be full width
You can try