responsive mode, the photos inserted into each other [solved]

[newbie20]

hi friends ,

i have my shop on prestashop 1.7.8.2 multi language.

in responsive mode  by persian language,  the photos are inserted into each other but by english language is ok .

how should i solve this problem by persian language ?

 

Thank you in advance

Edited January 6, 2024 by newbie20 (see edit history)

[PrestaServicePro]

Hello,

To analyze the problem further, we’ll need some additional information:

1) Product Page Example: Can you share a link to a specific product page where the photo overlap occurs in Persian language? This will allow us to see the layout and styling directly.

2) Customizations: Have you made any custom CSS modifications to your theme's styles, particularly related to product images or responsive layouts?

3) CSS Styling: Analyze the CSS styles applied to product images in the responsive mode for both English and Persian languages. Look for differences in styling that might be causing the overlap in Persian.

4) Navigate to Console Tab: Load the product page in Persian language with responsive mode enabled.
Interact with the page elements that showcase the overlapping photos.
Watch the console log for any new errors or warnings that appear.

5) Module Conflicts: If you have any modules installed that affect product image display or responsive layouts, try disabling them temporarily to see if the issue persists. This can help identify if a specific module is causing the conflict.

Feel free to share any errors you find, and we'll do our best to assist you further.

Good day
 

[newbie20]

1 hour ago, PrestaServicePro said:

Hello,

To analyze the problem further, we’ll need some additional information:

1) Product Page Example: Can you share a link to a specific product page where the photo overlap occurs in Persian language? This will allow us to see the layout and styling directly.

2) Customizations: Have you made any custom CSS modifications to your theme's styles, particularly related to product images or responsive layouts?

3) CSS Styling: Analyze the CSS styles applied to product images in the responsive mode for both English and Persian languages. Look for differences in styling that might be causing the overlap in Persian.

4) Navigate to Console Tab: Load the product page in Persian language with responsive mode enabled.
Interact with the page elements that showcase the overlapping photos.
Watch the console log for any new errors or warnings that appear.

5) Module Conflicts: If you have any modules installed that affect product image display or responsive layouts, try disabling them temporarily to see if the issue persists. This can help identify if a specific module is causing the conflict.

Feel free to share any errors you find, and we'll do our best to assist you further.

Good day
 

hi ,

I am very thankful for your answer. I didn't do any customization and didn't install any extra modules  and 

I didn't manipulate any CSS code that I remember.

i send you the link in your pv

thanks alot

Edited January 3, 2024 by newbie20
information (see edit history)

[newbie20]

3 hours ago, Scofeild618 said:

To address the issue of overlapping photos on your PrestaShop 1.7.8.2 website in responsive mode, specifically in the Persian language, follow these steps: First, provide a link to a product page exhibiting the problem for a direct assessment. Check for custom CSS modifications related to product images or responsive layouts and adjust as needed. Analyze CSS styles for both English and Persian languages, focusing on any disparities causing the overlap. When loading the Persian product page in responsive mode, monitor the console log for errors or warnings that may shed light on the issue. Additionally, consider temporarily disabling modules that affect image display or responsive layouts to identify and resolve conflicts. By following these steps, you can diagnose and rectify the problem with overlapping photos in responsive mode for the Persian language on your PrestaShop site. If further assistance is needed, seek support from the PrestaShop community or relevant forums.

i am very thankful for your answer .

the problem is now solved.

[PrestaServicePro]

On 1/3/2024 at 5:04 PM, newbie20 said:

i am very thankful for your answer .

the problem is now solved.

Glad we could get your issue figured out!

could you please mark the forum topic as "solved"?

Solution:

@media (max-width: 576px) {
    .featured-products .products .product{
        width: 100% !important;
    }
    .featured-products .products .product article.product-miniature{
        display: flex;
        justify-content: center;
        width: 100%;
    }
    #products .thumbnail-container, .featured-products .thumbnail-container, .product-accessories .thumbnail-container {
    width: 100%;
    }
    #products .thumbnail-container .product-description, .featured-products .thumbnail-container .product-description, .product-accessories .thumbnail-container .product-description {
    width: 100%;
    }
}

This will allow users searching for related questions to benefit from your experience and the solution discovered.

Happy sales!

[newbie20]

12 minutes ago, PrestaServicePro said:

Glad we could get your issue figured out!

could you please mark the forum topic as "solved"?

Solution:

@media (max-width: 576px) {
    .featured-products .products .product{
        width: 100% !important;
    }
    .featured-products .products .product article.product-miniature{
        display: flex;
        justify-content: center;
        width: 100%;
    }
    #products .thumbnail-container, .featured-products .thumbnail-container, .product-accessories .thumbnail-container {
    width: 100%;
    }
    #products .thumbnail-container .product-description, .featured-products .thumbnail-container .product-description, .product-accessories .thumbnail-container .product-description {
    width: 100%;
    }
}

This will allow users searching for related questions to benefit from your experience and the solution discovered.

Happy sales!

I am very, very thankful to the user @PrestaServicePro.

His solution helped resolve the problem.

 

(I didn't find the option to mark this topic as solved.)

 

 

[PrestaServicePro]

5 minutes ago, newbie20 said:

I am very, very thankful to the user @PrestaServicePro.

His solution helped resolve the problem.

 

(I didn't find the option to mark this topic as solved.)

 

 

If you edit the first post of the thread you can manually add "[solved]" to the subject line.