How do I make the Featured Collection, and Product Images on desktop like mobile (Dawn)

NoahThatsWack
New Member
2 0 0

Hello!

I'm trying to make desktop style of the featured collection, and product images identical to the mobile version of Dawn. The mobile version of dawn uses slideshow gallery's, while the desktop version sadly has no option for this.

Example of featured collections: Desktop left, Mobile Right

Mobile Featured Collection With 4 ProductsMobile Featured Collection With 4 Products

Desktop with 5 products, extremely oversized :(Desktop with 5 products, extremely oversized :(

 

As you can see above in the images, the desktop featured collection isn't the greatest. The mobile design is way better, the product images are about the same.

Example of product images: Desktop left, Mobile Right

NoahThatsWack_2-1637642944992.png

NoahThatsWack_3-1637642975606.png

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

You can see that the product images in mobile are also a slideshow. Since the code is already in existence I'm assuming there is a somewhat easy way to do this? Please help!

 

Also I apologies for any potential formatting issues!

Replies 2 (2)
NoahThatsWack
New Member
2 0 0

It took me almost all day but I managed to change the existing parameter's so now the desktop version has mobile sliders!

Desktop Featured GalleryDesktop Featured GalleryDesktop Product Page (Image Gallery :D)Desktop Product Page (Image Gallery :D)

The time and effort was worth it, all I had to do was inspect the page elements. After figuring out what .css code affects what I adjusted the mobile version of the specific page elements (featured collections, and product image gallery) to never leave the mobile design even when transitioning to desktop!

Basically just setting everything instead of being at 750px or 990/989px to some massive value lol. Probably not the best way but it works!

georgef
Tourist
5 0 0

Hi there, do you mind sharing which css files/snippets you changed for this? Thanks!