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.
If so, find the code i mark here and remove it
And add this code
@media only screen and (min-width: 990px) {
.image-with-text__media-item > .image-with-text__media {
background: linear-gradient(to bottom, transparent 15%, #ccc 15%, #ccc 15%, transparent 15%) !important;
background-size: 1px 100% !important;
background-position: right center !important;
background-repeat: no-repeat !important;
}
}