Exactly, I want the title to display higher on the mobile.
Topic summary
A user seeks to move a title higher on mobile devices for their Shopify store.
Two solutions provided:
Solution 1 (BSSCommerce-HDL):
- Navigate to Shopify Admin → Online Store → Theme → Edit code
- Locate the
theme.liquidfile - Insert custom CSS code above the
</head>tag - Includes a screenshot showing the result
Solution 2 (BSS-TekLabs):
- Access the same theme editor
- Find the
base.cssfile - Add CSS media query targeting screens max-width 768px:
@media only screen and (max-width: 768px) { .banner__heading inline-richtext { margin-bottom: 100px !important; } } - Adjust the
100pxvalue to increase/decrease spacing as needed - Save the changes
Status: Both responders provided working solutions with visual examples. The discussion appears resolved, awaiting the original poster to confirm which approach worked.
Hi @MiguelMaya ,
Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code
Step 2: Search file theme.liquid
Step 3: Insert this code above tag:
Here is result:
Hope this can help you,
If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 
2 Likes
- Here is the solution for you @MiguelMaya
- Please follow these steps:
- Then find the base.css file.
- Then add the following code at the end of the file and press ‘Save’ to save it.
@media only screen and (max-width: 768px) {
.banner__heading inline-richtext {
margin-bottom: 100px !important;
}
}
-
You can increase the 100px to a higher number if you want to increase the spacing. And vice versa.
-
Here is the result you will achieve:
- Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.