Image with text resize image - Dawn theme

Topic summary

Main topic: Adjusting Dawn theme “Image with text” sizing and layout, ensuring desktop/mobile compatibility, and exploring a wishlist icon on collection items.

  • Image resizing: Implemented CSS scaling (transform: scale) targeting specific section selectors to reduce image size. User confirmed results looked good.

  • Mobile compatibility: Added media queries—desktop scales images; mobile uses object-fit: contain to prevent cropping. A white background for the media area was applied; both views validated via screenshots.

  • Logo on mobile: Increased logo size by scaling .header__heading within a mobile media query; user confirmed success.

  • Section styling: Suggested a right-side border using a CSS linear-gradient background; user instead reordered sections and was satisfied with the layout.

  • Wishlist icon on collection items: User wants a heart icon; helper noted app-level support is needed for full functionality. CSS could place an icon visually but wouldn’t integrate with the app’s features; user uses “Swishlist” and will contact the app developer.

Notes: Multiple screenshots illustrate issues and outcomes. CSS and media queries (rules that apply by screen size), transform (scale images), and object-fit (controls image fit) are central.

Status: Design changes resolved; wishlist enhancement pending app support.

Summarized with AI on December 22. AI used: gpt-5.

If you want this

here the code

#shopify-section-template--21636163502354__7d276f64-0f8b-4d45-9869-7de5bb75cdf6 .image-with-text__media {
  background: white!important;
}
#shopify-section-template--21636163502354__7d276f64-0f8b-4d45-9869-7de5bb75cdf6 .image-with-text__media img {
  transform: scale(0.7)!important
}
1 Like