Shopify themes, liquid, logos, and UX
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
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.
Hi, @SweatFree
Can you take a screenshot to describe your requirements? So that I can check it for you.
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.
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
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!