Product Images- Impulse theme

Product Images- Impulse theme

Josh_01
Tourist
33 0 3

I am using Impulse theme latest version , And I want to show products images like  :https://www.glamuse.com/uk/en/antigel-ballerine-des-ondes-underwire-bra-p-633745.html?color=633745 

in two columns on desktop and noting changes for mobile devices .only want changes for desktop devices . I wan to use mobile view of impulse theme but desktop devices view link above shared site.  

 

Replies 8 (8)

ranazain2626
Excursionist
39 0 11

To accomplish the design you're depicting, where the item pictures are shown in two segments on the work area while keeping up with the current portable perspective on the Motivation subject (without altering it for versatile), you can execute this utilizing CSS media questions. Since you're utilizing the Drive subject (which is a famous Shopify topic), it will probably have pre-characterized styling for item pictures on the work area and be versatile. We will supersede these styles just for work area gadgets, leaving the Mobile view immaculate.

open the site on Brosewr then go to inspect and find the class name
after finding the class go to edit code in your theme dashboard 
CSS code for Desktop view

/* Apply to desktop screens only */
@media (min-width: 1025px) {
  /* Assuming the product images are inside a container like .product-gallery or .product-images */
  .product-gallery,
  .product-images {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Create two columns */
    gap: 20px; /* Space between the images */
  }

  /* Ensure the images scale properly within the grid */
  .product-gallery img,
  .product-images img {
    width: 100%; /* Make images fill their grid cells */
    height: auto;
    object-fit: cover; /* Ensure images cover the space without distortion */
  }
}



Chat on WhatsApp: +923017663583
Need a Shopify developer? Hire us at ranazain2626@gmail.com
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Josh_01
Tourist
33 0 3

Not effecting 

ranazain2626
Excursionist
39 0 11

find the exact class file and change the code on the exact file it will work

Chat on WhatsApp: +923017663583
Need a Shopify developer? Hire us at ranazain2626@gmail.com
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications

websensepro
Shopify Partner
1746 198 235

@Josh_01  Url is not working

Need a Shopify developer? Hire us at WebSensePro For Shopify Design Changes/Coding
For Free Tutorials Subscribe to our youtube
Get More Sales Using Big Bulk Discount APP
Create Your Shopify Store For Just 1$/Month
Get More Sales Using Big Bulk Discount APP
Josh_01
Tourist
33 0 3

I think link is only for Europe side countries.  

websensepro
Shopify Partner
1746 198 235

Then please share the URL of your website.

Need a Shopify developer? Hire us at WebSensePro For Shopify Design Changes/Coding
For Free Tutorials Subscribe to our youtube
Get More Sales Using Big Bulk Discount APP
Create Your Shopify Store For Just 1$/Month
Get More Sales Using Big Bulk Discount APP
Josh_01
Tourist
33 0 3

I am using impulse new version

Josh_01
Tourist
33 0 3

save it now..png