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

Issue with spacing in Dawn theme for header & footer which is not symmetric for mobile vs desktop

Issue with spacing in Dawn theme for header & footer which is not symmetric for mobile vs desktop

SweatFree
Shopify Partner
76 0 19

Hi,

My website is: Sweat Free Telecom (www.sweatfree.co)

I
 just have one product and I am trying to have symmetric spacing so the line that separates the header/menu at the top and the top of the featured product looks symmetric. Similarly I am trying to have symmetric spacing at the bottom so the line that separates the footer at the bottom and the bottom of the featured product looks symmetric. 

If I am able to make the spacing look symmetric for mobile then desktop looks not symmetric. If I am able to make it look symmetric for mobile then desktop looks non symmetric.

 

Is there a way to change the spacing differently for website and mobile, so I can make it look symmetric for both?

If you look at my website and look at it on mobile dimension vs desktop dimension then you'll realize what I mean.

 

Thank you!

Below are the 4 screenshots. I want all the red markings to be symmetric and spatially aligned. Right now the Dawn theme only allows you to change it for both Mobile and Desktop together. So if yo are able to align for Mobile then you look at it for Desktop and it is no longer aligned. 

header distance.pngfooter distance.pngheader distance mobile.pngfooter distance mobile.png

 

Chanakya Ramdev
Founder | Sweat Free (www.sweatfree.co)

https://www.SweatFree.co
Replies 4 (4)

AnneLuo
Shopify Partner
1381 240 281

Hi, @SweatFree 

Can you take a screenshot to describe your requirements? So that I can check it for you.

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   

Buy Me A Coffee

SweatFree
Shopify Partner
76 0 19

Hi @AnneLuo 

Below are the 4 screenshots. I want all the red markings to be symmetric and spatially aligned. Right now the Dawn theme only allows you to change it for both Mobile and Desktop together. So if yo are able to align for Mobile then you look at it for Desktop and it is no longer aligned. 
header distance.pngfooter distance.pngheader distance mobile.pngfooter distance mobile.png

Chanakya Ramdev
Founder | Sweat Free (www.sweatfree.co)

https://www.SweatFree.co
Bang_T_
Shopify Partner
18 2 7

Hi @SweatFree 

 

you will have to know about CSS and modify it to match your need. there is no settings to change separate for mobile and desktop

If helpful then please Like and Accept Solution.
Hire me for custom or add more features to your shopify store at johnnybang.wd@gmail.com

topnewyork
Astronaut
1552 192 253

Hello @SweatFree 

 

Navigate to Online Store > Themes > click on Edit code.
Locate and open the theme.css or base.css file. Scroll to the bottom and add the following CSS code:

 

/* Adjust the padding below as needed for desktop to maintain symmetry */
.section-template--15462062325842__featured_product_4MVycd-padding {
        padding-top: 56px;
}
.section-sections--15462062784594__footer-padding {
        padding-top: 43px;
}

/* Adjust the padding below as needed for mobile to maintain symmetry */
@media only screen and (max-width: 767px) {
  .section-sections--15462062784594__footer-padding {
    padding-top: 38px;
  }
}

 

Thanks!

Need a Shopify developer? Hire us at Top New York Web Design
Boost Your Store Sales with Volume/Tier Discount Try Big Bulk Discount
Create New Shopify Store For Just 1$/Month