I am using DAWN THEME and facing problem regarding un-necessary spacing/padding on right side of landing page as well as product page as shown in picture. Can anyone help me to fix this issue?
Topic summary
A user encountered unwanted spacing/padding on the right side of their landing and product pages in mobile view using the Dawn theme. An image was shared showing the issue.
Resolution:
- The mobile spacing issue was resolved (method not detailed in thread)
- A new issue emerged: excessive side margins in desktop view
Current Problem:
The user wants to:
- Reduce side margins on desktop
- Increase spacing between product cards
Proposed Solution:
A CSS code snippet was provided to add to the base.css file:
- Targets desktop view (min-width: 990px)
- Adjusts grid spacing for product collections
- Sets max-width and grid spacing values
The thread includes the user’s website URL (thread-theory.pk) for troubleshooting purposes.
can you please share solution here so anyone facing same issue can get help from this thread.
Hi @Thread-Theory ,
Please send the website link, I will check it for you
the issue has been resolved but i am facing another issue regarding side margins in desktop view as i want to reduce side margins in desktop view and increase spacing between product cards. can you please help me to solve this issue. i am sharing link of my website.
thread-theory.pk
Hi @Thread-Theory ,
Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:
@media screen and (min-width: 990px) {
.collection .page-width-desktop {
max-width: 140rem !important;
}
.collection .product-grid.grid {
--grid-desktop-vertical-spacing: 16px;
--grid-desktop-horizontal-spacing: 32px;
}
}