DUBET theme image full width in product descritpion MOBILE VIEW

Solved
Highlighted
Tourist
8 0 1

Can anyone help me? How can i make my image in full width in product description?

full width.JPG

0 Likes
Highlighted
New Member
4 0 0

@juzada wrote:

Can anyone help me? How can i make my image in full width in product description?

full width.JPG


You can change it in css, and set image width to 100%

0 Likes
Highlighted
Hello juzada,
As I can see your page full width is given to image so you have to increase page width.
So image will automatically be Full width.
Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
1 Like
Highlighted
Tourist
8 0 1

@oscprofessional wrote:
Hello juzada,
As I can see your page full width is given to image so you have to increase page width.
So image will automatically be Full width.

Ow I see. Thank you for the fast reply. But how can I increase the page with in the product description of my debut theme? Your reply is very much appreciated

0 Likes
Highlighted
Excursionist
18 7 10

This is an accepted solution.

Hello juzada,
You can add a class to your description images
By going to your product description then Show Html from here:

step1.PNG

then press control  f
and search for "img" which is the tag of images
to get the code of the image then add this line just after the img tag :

 

class="product-description-images"

 

step2.PNG

then save 

go to your theme dashboard and choose edit code:

step3.PNG

then scroll down to the assets folder and choose theme.scss.liquid

step4.PNG 

just scroll down to the bottom of this code file
and paste this code at the bottom and press save

@media only screen and (max-width: 749px){
     .product-description-images {
         min-width: 100vw;
         max-width: 100vw;
         margin: 0 -22px;
      }
}

 step5.PNG

that should make your description images has the full width on mobiles

step6.PNG

 

Please tell me if you have any question about the steps

 

Best regards,

Shimaa

 

1 Like
Highlighted
Tourist
8 0 1

Hey It worked thanks! So every image that I want to full width i have to paste a class code right?

 

worked.JPG

0 Likes
Highlighted
Excursionist
18 7 10

You are welcome

yes, you are right, just add this class to any product description image you want to display with full width on mobile.

1 Like
Highlighted
Tourist
8 0 1

Thank you so much! <3

0 Likes
Highlighted
New Member
4 0 0

@Shimaa wrote:

You are welcome

yes, you are right, just add this class to any product description image you want to display with full width on mobile.


Can we set width in percentage instead of pixel??

0 Likes