Sense theme: how to full width product description images on mobile

[Shroud]

How do I make images in product description to take the full width of the screen?

On mobile view

[Hermit_the_Log]

Hi Shroud, do you have a link to your site so that we can take a look? Should hopefully be attainable with some style or class attributes.

[Shroud]

Here’s the site Luxandluxy .com

[Hermit_the_Log]

Hi Shroud,

This may be a bit tricky since your site on mobile has a padding of -1.5rem applied to the left and right of the entire section which contains the product photos, info, and description.

You could set the padding for this section to 0, then go through and apply padding to each element besides the photos in the product description. This would be the way to ultimately remove the padding, but would pretty laborious and leaves too much room for error if you miss reapplying the padding to any element.

Instead, as a work around, you could add this code to your product page template to apply a margin, size, and border radius adjustment to make the images full screen width. This won’t be a perfect fix, but it will get you more of the look you’re after.

• Access your liquid files by going to Online Store > Live Theme > Actions > Edit Code
• Navigate to and expand the Snippets folder, then click “Add a new snippet”
• Name the Snippet “padding-fix”
• Within the new Snippet, add the code below and then save the Snippet:

​

• Navigate to and open your product.liquid file within your Templates folder
• At the top of the code, insert {%- render ‘padding-fix’ -%} above any other code and click Save. This will render the custom padding code on each product page.

Let me know how this works for you and if you have any questions about the process. Again, this won’t be a perfect fix, but should manipulate the images enough to get them looking more full screen for you.

[Shroud]

The effect isn’t what I’m looking for. Forget the images. I need this black

element to take on the full screen

https://luxandluxy.com/products/magnetic-anti-peep-tempered-glass-privacy-metal-iphone-case

[Hermit_the_Log]

Set the margin of that div to -1.5rem, and set the margin of the photo at the top with the degrees demonstration to auto. This should expand the black background and center that photo

[Shroud]

Ok first of all there is no “product.liquid file within Templates folder” in Sense theme.

So I instead pasted the code in “main-product.liquid” within Sections folder

Also I changed up your code to get the effect I wanted.

I put this instead:

@media screen and (max-width: 768px){ .product__description div{ margin-left: -1.5rem; margin-right: -1.5rem; border-radius: 0px !important; max-width: 108% !important; } } ​

So far so good. But I’ll check for if there are any errors around my store

[Hermit_the_Log]

Sounds good. Apologies for any confusion regarding the liquid file names. It’s hard to tell what some theme files will be called, so outside looking in I have to make some generalities about what the file names will be, but it sounds like you stuck the code in the right spot. Let me know if it continues to give you issues.