Fill out product picture and change error to points

Store Design
, , , ,

Topic summary

A Shopify store owner using the Dawn theme (v0.0.51) wanted to:

  1. Fill out product pictures to eliminate white space on mobile view
  2. Change error messages to bullet points

The issue centered on excess spacing around product images on mobile devices, visible at the top and sides.

Attempted Solutions:

  • BSS-TekLabs provided CSS code to modify base.css or theme.css targeting mobile slider elements
  • Multiple code iterations were tested, including adjustments to .slider__slide, .product-info, padding, and width properties
  • Initial CSS solutions didn’t resolve the spacing issue completely

Resolution:
The store owner discovered a built-in Dawn theme setting that addressed the problem. Once this native setting was enabled, the previously provided CSS code worked successfully, eliminating the unwanted white space around product images on mobile view.

The discussion demonstrates a common scenario where theme-specific settings can complement or replace custom CSS modifications.

Summarized with AI on November 6. AI used: claude-sonnet-4-5-20250929.
2
  • Here is the solution for you @store095
  • Please follow these steps:

z5686811214059_e66de1953f1db631f9134af5cdb796ad.jpg
z5686811214059_e66de1953f1db631f9134af5cdb796ad.jpg1865×854 94.6 KB

  • Then find the base.css or theme.css file.
  • Then add the following code at the end of the file and press ‘Save’ to save it.
@media screen and (max-width: 749px) {
    .slider.slider--mobile .slider__slide {
        width: 100% !important;
        margin: 0 !important;
    }
product-info {
    padding-top: 0 !important;
}
}
  • Here is the result you will achieve:

BSSTekLabs_0-1724246374436.png
BSSTekLabs_0-1724246374436.png379×827 171 KB

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
1 Like