We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more

How to edit margin sizes between blocks, Dawn

Solved

How to edit margin sizes between blocks, Dawn

SeaSideATH
Tourist
7 0 1

IMG_1318.jpeg

IMG_1316.jpeg

Hello,

 

I am trying to figure out how to reduce margin sizes between various blocks on my Shopify store, Dawn Theme.

 

I have included screenshots on margins I would like to change.

 

my store is 

https://seasideathletic.com

and password is 

0223

 

Accepted Solutions (2)

CodeCrafter11
Shopify Partner
3 3 3

This is an accepted solution.

Hello @SeaSideATH 
I would like to inform you that you need to reduce margins only in footer blocks, the margin in product details block is already fine and no need to change it.
Here is the CSS rules  you need to apply for reduce margin in footer

@media (max-width: 768px){
  .footer-block.grid__item,
  .footer-block__details-content
  {
    margin-bottom: 10px;
  }
}

View solution in original post

PageFly-Oliver
Shopify Partner
878 190 191

This is an accepted solution.

Hi @SeaSideATH ,

 

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: Paste the below code at the bottom of the file -> Save

 

<style>
.product__info-container>*+*{
margin: 0.5rem 0;
}
</style>

 

 

I see your store looks very nice, warm, and elegant, but in my opinion, you should consider adding a heading banner + CTA button on your main banner. it will help the customer easily purchase the product bestseller and increase traffic product page. and you can use the image banner with the image high quality to help create a good impression for the customer

PageFlyOliver_0-1714637917854.png

 

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

Replies 3 (3)

CodeCrafter11
Shopify Partner
3 3 3

This is an accepted solution.

Hello @SeaSideATH 
I would like to inform you that you need to reduce margins only in footer blocks, the margin in product details block is already fine and no need to change it.
Here is the CSS rules  you need to apply for reduce margin in footer

@media (max-width: 768px){
  .footer-block.grid__item,
  .footer-block__details-content
  {
    margin-bottom: 10px;
  }
}

PageFly-Oliver
Shopify Partner
878 190 191

This is an accepted solution.

Hi @SeaSideATH ,

 

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: Paste the below code at the bottom of the file -> Save

 

<style>
.product__info-container>*+*{
margin: 0.5rem 0;
}
</style>

 

 

I see your store looks very nice, warm, and elegant, but in my opinion, you should consider adding a heading banner + CTA button on your main banner. it will help the customer easily purchase the product bestseller and increase traffic product page. and you can use the image banner with the image high quality to help create a good impression for the customer

PageFlyOliver_0-1714637917854.png

 

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

SeaSideATH
Tourist
7 0 1

Hey,

 

Thank you for the solution, and the advice I really appreciate that. I will definitely take your feedback into consideration.