How to adjust CSS on a Dawn section?

Store Design
, , , , , , ,

Topic summary

Main issue: Adjust CSS for a product info section in the Shopify Dawn theme to control layout and width across desktop and mobile.

What’s been done:

  • An initial CSS snippet was provided to style the slide container (.swiper-slide) and left/right boxes, setting fixed width (534px), background, border radius, and padding.

New requirements:

  • Desktop: Make the section the same width as the collapsible row above.
  • Mobile: Stack image above text and center it; a reference screenshot was shared (image attachment central to the request).

Proposed solution:

  • A responsive @media (max-width: 768px) block was provided to switch to column layout and center alignment for mobile.

Current outcome:

  • The desktop width did not change (section still not wide enough).
  • On mobile, the section became too large.

Status: Unresolved. The mobile column/centering approach changed layout but not sizing as desired, and desktop width alignment still needs adjustment. Further CSS refinements are needed to control section width on desktop and constrain mobile sizing to match the intended design.

Summarized with AI on January 18. AI used: gpt-5.
1

Hi,

Could you help me for this image section that is on my product info?

Thank you for your help!

2

Hi, I think I can help you

.swiper-slide {
    display: flex;
    width: 534px;
    background: #F8F9FA;
    border-radius: 10px;
}

.product_slider_md_box_left_new {
    display: flex;
    align-items: center;
    mix-blend-mode: multiply;
    padding: 20px 20px;
}

.product_slider_md_box_right_new {
    padding-right: 20px;
}
1 Like
3

Thank you so much !

4

last thing @romartiny

on desktop I would like this section to be the same width than the collapsable row above.

on mobile I would like the image to be above the text, and in the center

Thank you in advance

like this on mobile

IMG_DB82F596C6EB-1.jpeg
IMG_DB82F596C6EB-1.jpeg1290×2796 213 KB

5 
@media only screen and (max-width : 768px) {
.swiper-slide {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.product_slider_md_box_right_new {
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
}
}

Enjoy

6

thank you @romartiny , I tested but removed the code there was problems:

  • On desktop it didn’t change anything, the section is still not large enough

  • On mobile, the section is too large

Thanks in advance for your help

Alex