Shopify themes, liquid, logos, and UX
my text of the banner for mobile isnt aligned nicely.
i want the text to be on the left side in the above left corner but i cant fix this.
somebody knows how to do this?
Can you please provide your store URL and password as well if applicable, so that I can provide you solution that can work for your store.
Best regards
Sahil
- Your
store: Lumiér (lumiertherapy.nl)
pasword= raotwe
for desktop the banner text and header title is okay but for mobile it doesnt look great it needs to be in left top corner,
Hi @siemonLumier have you hidden the enter password link in the store? Because I am unable to find it, if yes then can you remove it so that I can enter the password and provide you the solution.
Best Regards
Sahil
- Your
Hi @siemonLumier I can't find the option here to enter the password:
Best Regards
Sahil
- Your
Hello @siemonLumier,
It's good practice to create a copy of your theme and work on that to preview the changes before applying, especially if you are editing the raw code. Alternatively, you can also use the Shopify theme editor’s versions to revert to previous versions, but it is not recommended if you are making multiple changes.
Now, to address your specific question about aligning the layout of the banner content on the mobile device to top left, you can follow the steps below:
1. Open the code editor, as shown in the screenshot below.
2. Create a snippet called ‘custom-banner-styles’ and add the below code:
<style>
@media only screen and (max-width: 767px){
.banner .banner__content--top-left .banner__box.content-container {
top: 0;
left: 0;
position: absolute;
}
}
</style>
3. Include the ‘custom-banner-styles.liquid’ file in your “theme.liquid” file.
Add the following include code to your theme.liquid file.
{% render 'custom-banner-styles' %}
It would look something like below:
Done? Now save the file, and try previewing to confirm if the changes work for you. In the reference above, it looks something like below:
I hope this helps!
Regards,
Abhishek from Swym
Find Global Growth Opportunities For Your Business with Shopify AcademyLearn how to exp...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025