@NoaBo I just found out this is only on desktop, if you open it on mobile dawn has a very nice product slider.
80% of traffic is mobile (ish) it’s not ideal but at least it works well on mobile
Can you check this Section-collection-list.css? What number to change for when less than 3 products from the collection list? Thank in advance!!!
@media screen and (max-width: 749px) {
.collage-section + .collection-list-section .no-heading.no-mobile-link {
margin-top: -7rem;
}
.collage-section + .collection-list-section .no-heading:not(.no-mobile-link) {
margin-top: -1rem;
}
}
@media screen and (min-width: 749px) {
.collage-section + .collection-list-section .no-heading {
margin-top: -4rem;
}
}
.collection-list-title {
margin: 0;
}
@media screen and (max-width: 749px) {
.collection-list-wrapper.page-width {
padding: 0;
}
.collection-list:not(.slider) {
padding-left: 0;
padding-right: 0;
}
.collection-list-section .collection-list:not(.slider) {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
}
@media screen and (max-width: 749px) {
.collection-list-wrapper:not(.no-heading) .title-wrapper-with-link {
margin-top: -1rem;
}
}
@media screen and (min-width: 750px) {
.collection-list-wrapper.no-heading {
margin-top: 6rem;
}
}
.collection-list__item:only-child {
max-width: 100%;
width: 100%;
}
.collection-list__item .card–light-border:hover {
border: 0.1rem solid rgba(var(–color-foreground), 0.04);
}
.collection-list__item:only-child .media {
height: 35rem;
}
@media screen and (max-width: 749px) {
.collection-list .collection-list__item {
width: calc(100% - 3rem);
}
.collection-list__item.grid__item {
padding-bottom: 1rem;
}
.slider.collection-list–1-items {
padding-bottom: 0;
}
}
.collection-list.negative-margin–small {
margin-bottom: -1rem;
}
@media screen and (min-width: 750px) and (max-width: 989px) {
.slider.collection-list–1-items,
.slider.collection-list–2-items,
.slider.collection-list–3-items,
.slider.collection-list–4-items {
padding-bottom: 0;
}
}
@media screen and (min-width: 750px) {
.collection-list__item:only-child > *:not(.card–media) {
height: 320px;
}
.collection-list__item:only-child .media {
height: 47rem;
}
.collection-list__item a:hover {
box-shadow: none;
}
.collection-list.grid–3-col-tablet .grid__item {
max-width: 33.33%;
}
.collection-list–4-items .grid__item,
.collection-list–7-items .grid__item:nth-child(n + 4),
.collection-list–10-items .grid__item:nth-child(n + 7) {
width: 50%;
}
}
@media screen and (max-width: 989px) {
.collection-list.slider .collection-list__item {
max-width: 100%;
}
}
.collection-list__item .card__text,
.collection-list__item .card-colored {
position: relative;
}
hello,
can you please advise how to re-centre the product area as resizing shifts it left.
Thank you
1 Like
Hi,
I tackle the problem of large image in Dawn, also added more. Transform you Dawn Theme in Debut theme product page for free.
Enjoy this features.
Product slider working.
Zoom feature working.
Variant buttons connected to the large image and the product slider.
Resize your thumbnail images.
No more massive images in the product page.
Check the code here for free. No app needed.
5 Likes
Good job! @made4Uo
2 Likes
Hello @made4Uo .
I would like my images in Dawn theme to look like they where in debut theme before with the Zoom function and not huge and blurry like they are in Dawn. I do not require the slider function can i just copy some of the code then? or is it best to copy everything across even if slider isn’t required. Will your code solve this and make them look more like they where in Debut previously?
Thanks
1 Like
@J55ni it would be hard to separate the slider since I have those connected in the radio buttons / variant buttons. It will show an error if you delete them. Regarding the pictures, it really depends on your image size
@made4Uo the images are totally fine in the debut theme but on the dawn theme they are blury unfortunately. Would adding your code make them appear the same as debut theme?
I am not sure. You can also adjust the src-set of the image actually. The Dawn theme has this src-set so it pulls out an specific size of an image that corresponds to your screen size. You can adjust those instead
could you kindly tell me what code to adjust for this please?
On debut my images are clear and fine but on dawn they are blurry 
@J55ni are you able to try to add the code? Let me know if you have problems then we can adjust your image
thanks!
Great help, thanks!
@wallcraft did it work well?
Yes, worked as it should
@HamishDavisonIC - The solution you provided is great but is there a solution whereby we can reduce the size of secondary images and let the product image remain the way it is?
this is not working for me? the image sizes are not changing
oh sorry for that issue can you please send store url
I am pretty happy with the home page sizing and the collection pages. It is just when you click on an individual product. also my thumbnails are different sizes. you can look at the most new arrival, it is a set of rings to see. they are off on desktop and mobile
also, the sizing right now is from me trying the tips I found on here previously
1 Like