Help, I want to make all images in the product description responsive

Solved
AhmedGhaziii
Excursionist
13 0 6

Hello Shopify Community,

 

My website mobile friendly in all pages except the product page

 

this is how it looks when I enter products from mobile - the page will expand more than the mobile screen because of the product description contains a large picture 

Here I cant view the cart on my menu left side - I have to zoom out to see it
WhatsApp Image 2021-07-23 at 8.33.21 PM (1).jpeg

 

this is when i zoom out

WhatsApp Image 2021-07-23 at 8.33.21 PM.jpeg

I need to put a code that force all pictures on product description to be responsive and not expand my page

or at least any solution that solve this 

 

Product page link:

https://www.ebarza.com/collections/sofas/products/copy-of-pre-order-60-days-delivery-dali-4-seater-s... 

  

dmwwebartisan
Shopify Partner
8428 1977 2658

This is an accepted solution.

@AhmedGhaziii 

Please add this code at the bottom of   theme -> edit code -> assets -> styles.css file.

.product_section table {
    width: 100% !important;
}

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
AhmedGhaziii
Excursionist
13 0 6

Update ...

 

The problem its not from the images only the ( table ) is the main issue

   
   

 

check this example there is no image on the description but still the page expanded

WhatsApp Image 2021-07-23 at 8.44.42 PM.jpeg

WhatsApp Image 2021-07-23 at 8.44.42 PM (1).jpeg




and this is how pages must look like ( perfect product page )

 

WhatsApp Image 2021-07-23 at 8.44.42 PM (2).jpeg

dmwwebartisan
Shopify Partner
8428 1977 2658

This is an accepted solution.

please try this css 

.product_section table {
    width: 100% !important;
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
AhmedGhaziii
Excursionist
13 0 6

@dmwwebartisan THANKSS

You got it before i even explain correctly

Thanks soo much i wasted a lot of time and gave up :')

simple and clear solution

0 Likes
AhmedGhaziii
Excursionist
13 0 6

 @dmwwebartisan 
but still 

some of the products still have the problem
it's reduced but still existing 

WhatsApp Image 2021-07-23 at 8.58.06 PM.jpeg


 I'm using

Huwawi mate 20 pro

and Samsung Note 20


product link:

https://www.ebarza.com/products/copy-of-pre-order-60-days-delivery-havana-corner-sofa-hav001




A
lso the collection page has the same issue 

 

AhmedGhaziii_0-1627060763401.png

collection link:

 

https://www.ebarza.com/collections/lounge-chairs



0 Likes
dmwwebartisan
Shopify Partner
8428 1977 2658

This is an accepted solution.

@AhmedGhaziii 

Please add this css

@media only screen and (max-width: 798px){
table tr td, table tr th {
    width: auto !important;
}
.product_section table p {
    line-break: anywhere !important;
}
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
AhmedGhaziii
Excursionist
13 0 6

AMAZING.. WORKED !! THANKS

AhmedGhaziii
Excursionist
13 0 6

@dmwwebartisan 

dear thanks for the previous help 

now im facing this issue 
product example:

https://www.ebarza.com/products/copy-of-spring-2-heads-hemp-rope-pendant-lamp-xx0055xx

AhmedGhaziii_0-1627661586311.png
how can avoid this 

 

0 Likes