How to decrease width of collage images in Dawn

How to decrease width of collage images in Dawn

coffeegal24
Visitor
3 0 0

Hi,

I have a page in Dawn theme with 3 sections where I use an image collage. I am only using a single image (custom graphic) in two of the collage sections, and the image is taking up the width of the whole page in desktop view. This makes the image/graphic look huge. How can I decrease the overall width of the graphic/image (s) on the screen to 50% (or maybe 75%) of the page width so that it matches the width of the rest of the text and contact form on the page? And will this still look okay on mobile view? I have included some screen shots of the three collage sections (in desktop view) as they compare to the rest of the text on the page.

 

Thanks for any help!

 

 

Screen Shot 2024-09-23 at 9.57.58 PM.png

 

Screen Shot 2024-09-23 at 9.58.18 PM.png

 

Screen Shot 2024-09-23 at 9.58.46 PM.png

 

Replies 5 (5)

Arif_Shopidevs
Shopify Partner
263 37 36

@coffeegal24 
Can you share the site URL where you used this? Do you want the image in the left column and the contact form in the right area, or do you prefer the last images?

Found it helpful? Please like and mark the solution that helped you.
Slider Revolution - Create sliders, theme sections, banners, videos, pages, advanced animation, and social feeds.
Essential Grid Gallery - Create photo galleries, video galleries, portfolio galleries, product gallery, collection gallery and more.
EasyDisplay: Product Showcase - Easily display collections, related products, discounts, recently viewed items, and best sellers
coffeegal24
Visitor
3 0 0

The URL is: https://0a74d2-2.myshopify.com/

Password: ubowyu

Page I need help with: Wholesale

 

For the top two graphic images, I need them to be single images centered on the page (but at 50-75% of their current width). For the collage of images at the bottom of the page, I would also like the overall collage to be 50-75% of it's current page width. The contact form doesn't need to be moved.

Arif_Shopidevs
Shopify Partner
263 37 36

@coffeegal24 
You can add this css in your elements custom CSS are  like my screen shot

@media (min-width: 1024px) {
    .collage-card .media {
        margin: 0 auto; /* Centers the media element */
        max-width: 50%; /* Sets the maximum width to 50% */
    }
}

 

Arif_Shopidevs_1-1727156890663.png

 

Let me inform it solved your issue or not.

Found it helpful? Please like and mark the solution that helped you.
Slider Revolution - Create sliders, theme sections, banners, videos, pages, advanced animation, and social feeds.
Essential Grid Gallery - Create photo galleries, video galleries, portfolio galleries, product gallery, collection gallery and more.
EasyDisplay: Product Showcase - Easily display collections, related products, discounts, recently viewed items, and best sellers
coffeegal24
Visitor
3 0 0

Sadly it didn't change anything.

Arif_Shopidevs
Shopify Partner
263 37 36

Hello, It must work, if you insert in the current elements custom css area.If you want we can check and implement in your site. If you send me collaboration code in your store in personal message, I will request collaboration access . It will help you to solve.

 

There is no class elements that is why need to insert element wise.  
thank you

Found it helpful? Please like and mark the solution that helped you.
Slider Revolution - Create sliders, theme sections, banners, videos, pages, advanced animation, and social feeds.
Essential Grid Gallery - Create photo galleries, video galleries, portfolio galleries, product gallery, collection gallery and more.
EasyDisplay: Product Showcase - Easily display collections, related products, discounts, recently viewed items, and best sellers