hi, i am using dawn theme. i want to add space between image and heading (padding) only on mobile view please help
https://4b1e5b-36.myshopify.com/?_ab=0&_fd=0&_sc=1
password: “niecum”
Topic summary
Goal: Add vertical space between the image and heading in Dawn’s Image with Text sections, but only on mobile.
Context: The store link and password were provided. Screenshots show the mobile layout and code editor.
Proposed solutions:
- Add a mobile-only CSS rule in base.css using a media query:
@media screen and (max-width: 750px) { h2.image-with-text__heading.inline-richtext.h1 { margin-top: 14px; } }
This targets the heading inside Image with Text on small screens. - Add .image-with-text__grid { gap: 20px; } in base.css or theme.css. This changes the grid spacing globally and was not scoped to mobile.
- Another step-by-step guide suggested adding a similar media query and increasing margin-top to 20px for the heading selector.
User feedback: The grid gap approach “is not working.” The user reiterated the need for mobile-only changes across all Image with Text sections.
Status: Unconfirmed resolution. Next steps include ensuring the selector matches Dawn’s markup and that styles are inside a @media (max-width: 750px) query so changes apply only on mobile.
Hi @mehwish-ali ,
Add below css to base.css file.
@media screen and (max-width: 750px) {
h2.image-with-text__heading.inline-richtext.h1 {
margin-top: 14px;
}
}
Please don’t hesitate to reach out if you need further help optimizing or customizing your store. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!
Best Regards,
LuffyOnePiece
Hello @mehwish-ali
This is Amelia at PageFly - Shopify Advanced Page Builder app.
You can try the following steps I have provided to help you solve the problem you are facing:
Step 1: Online Stores > Themes > Edit code
Step 2: Choose file base.css or theme.css
Step 3: Add code
.image-with-text__grid {
gap: 20px; /* You can change the value of 20px to the value you want */
}
Hoping my solution helps you solve your problem.
Best regards,
Amelia | PageFly
it is not working. i want to change on mobile view for all image with text sections
Hi @mehwish-ali ,
You can try the following steps:
Step 1: Go to Shopify Admin and click “Edit Code”
Step 2: Search for the file base.css
Step 3: Add the code below to the file base.css.
@media screen and (max-width: 750px) {
image-with-text__heading.inline-richtext.h1 {
margin-top: 20px;
}
}
I hope this helps! If it works for you, please mark it as a solution. I am very happy about that. Have a great day!