product image for phone

Store Design
,

Topic summary

A user seeks to modify product image display on mobile devices for their Shopify store (dewority.com), wanting to remove blue spacing and achieve full-width images similar to a reference example.

Solutions Provided:

Two developers offered CSS code snippets to:

  • Make product images full-width on mobile (max-width: 768px/749px)
  • Remove padding and margins
  • Hide media toggle elements

Follow-up Issues:

  1. Image height: Additional CSS provided to increase product photo height using padding-top: 100% or height: 15vh

  2. Image slider behavior: User reports slider shows “5” when only 4 images exist, and wants continuous looping. Developer notes the back arrow can return to first image, but full customization would require 1-2 hours of custom coding

  3. Dot appearance: User asks about customizing navigation dots; developer confirms theme lacks built-in options and would require custom development

Status: Initial spacing issue resolved with CSS; additional customization requests identified as requiring more extensive custom coding work.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

I want the blue selected away .
I want the blue selected away .960×817 72 KB

this asl example.
this asl example.618×869 65.1 KB

this is how it is now .
this is how it is now .628×620 58.6 KB

Kan iemand mij helpen hoe ik dit kan wijzigen, zodat het uiterlijk van mijn productfoto wordt gewijzigd.

2

Hi @Daan7 , kindly provide your store URL please and if it is password protected, please share the password as well. Thanks

3

Hallo, dit is de url https://dewority.com/
Als het goed is moet het werken.

4

Hi @Daan7

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.css / based.css file and paste the code in the bottom of the file.
@media(max-width:768px){
.slider.slider--mobile li {
    width: 100% !important;
    margin-left: 0 !important;
}
}

Result:

websensepro_0-1735818611783.png
websensepro_0-1735818611783.png311×469 24.1 KB

If my reply is helpful, kindly click like and mark it as an accepted solution.
If you are happy with my help, you can help me buy a COFFEE
Thanks!

5

Hello @Daan7 ,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the bottom of the file:
@media (max-width: 749px) {
    body .product__media-list .product__media-item {
        width: 100%;
        padding: 0 !important;
    }
    
    body main product-info {
        padding-top: 0 !important;
    }
    
    body .grid--peek.slider .grid__item:first-of-type {
        margin-left: 0;
    }
    
    .product__media-toggle:after {
        display: none;
    }
    
    .global-media-settings:after {
        display: none;
    }
    
    body .product__media-list .product__media-item .product-media-container {
        max-width: 100% !important;
        border: none !important;
    }
}
1 Like
6

Heel erg bedankt dus deze 2 codes onder elkaar? zo ja, dan heb ik het goed gedaan. Nog 2 vragen hoe kan ik de beeldhoogte van de productfoto groter maken ? trouwens, als ik nu glijd, stopt het aan het einde, hoe kan ik dan blijven glijden? Dat je terugkomt op de eerste.

7

Heel erg bedankt Nog 2 vragen hoe kan ik de beeldhoogte van de productfoto groter maken ? trouwens, als ik nu glijd, stopt het aan het einde, hoe kan ik dan blijven glijden? Dat je terugkomt op de eerste.

8

To increase the height of the product image, you can adjust the following CSS code:

@media (max-width: 749px) {
    body .product-media-container.constrain-height .media {
        padding-top: 100%;
    }
}

To keep the slider looping, you can use the back arrow to return to the first image. Here’s a screenshot for reference: Screenshot.

1 Like
9

@Daan7

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.css / based.css file and paste the code in the bottom of the file.
@media(max-width:768px){
.product__media.media.media--transparent.pl-parent img {
    object-fit: fill !important;
}
.product__media.media.media--transparent.pl-parent {
    height: 15vh !important;
}
}

Result:

websensepro_0-1735823810855.png
websensepro_0-1735823810855.png318×474 26.3 KB

If my reply is helpful, kindly click like and mark it as an accepted solution.

If you are happy with my help, you can help me buy a COFFEE

Thanks!

1 Like
10

zoals dit
zoals dit614×201 17 KB

Bedankt, maar nu staat er bijvoorbeeld 5 terwijl ik 4 afbeeldingen heb.
Kan ik ook iets doen aan het uiterlijk van de stippen?

11

Yes, this is possible with custom code and will take approximately 1-2 hours. Additionally, your theme does not have an option to modify the appearance of the dots.

1 Like