Hello, Shopify Community it’s me, again. I just need to decrease the padding above and below the text but only on mobile.
Topic summary
Reducing mobile spacing around text in a Shopify theme. The store owner wants less padding above and below text only on mobile and shared a site link and a screenshot illustrating the issue.
Proposed fix: add a CSS media query targeting screens under 729px. It sets .lh-title margin to 0, .cont padding to 0px 0 20px with !important, and div > h1 margin to 0. This aims to tighten vertical space on mobile.
Implementation guidance: one reply requests site access to apply the changes. Another provides steps to add the code in Online Store → Theme → Edit code → assets/styles.css at the bottom.
Notes: a minor typo in one snippet (“0 px”) could prevent the padding from applying; use “0px” instead. The screenshot is central to understanding the spacing problem on mobile.
Status: no confirmation from the original poster that the change worked; no definitive resolution yet. Key terms: CSS (styling language) and media query (rules that apply at specified screen sizes).
1 Like
Hi, @diydesigners
@media only screen and (max-width: 729px){
#shopify-section-lh-section-hiojz9j1cgk .lh-title{
margin: 0;
}
#shopify-section-1623487814a2da2155 .cont{
padding: 0px 0 20px !important;
}
#shopify-section-1623487814a2da2155 .cont div >h1{
margin: 0;
}
}
,
Please give me your site access so i can resolve your problem. and add this code.
Thank You!
hello @diydesigners
please Go to Online Store->Theme->Edit code then go to assets/styles.css ->paste below code at the bottom of the file.
@media only screen and (max-width: 729px){
#shopify-section-lh-section-hiojz9j1cgk .lh-title{
margin: 0;
}
#shopify-section-1623487814a2da2155 .cont{
padding: 0px 0 20px !important;
}
#shopify-section-1623487814a2da2155 .cont div >h1{
margin: 0;
}
}
1 Like