banner text alignment for mobile

siemonLumier
Tourist
39 0 4

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?

siemonLumier_0-1714991480030.png

 

Replies 6 (6)

sahilsharma9515
Shopify Partner
995 124 189

Hi @siemonLumier 

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

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️


siemonLumier
Tourist
39 0 4

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,

sahilsharma9515
Shopify Partner
995 124 189

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

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️


siemonLumier
Tourist
39 0 4

needs to be possible Lumiér (lumiertherapy.nl)

password = raotwe

sahilsharma9515
Shopify Partner
995 124 189

Hi @siemonLumier I can't find the option here to enter the password:

 

sahilsharma9515_0-1714995672223.png

 

Best Regards

Sahil

- Your

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️


swym
Explorer
42 2 17

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. 

swym_0-1715012806785.png

 

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:

swym_1-1715013156157.png

 

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:

 

swym_0-1715013030850.png

 

I hope this helps!

Regards,
Abhishek from Swym

 

- Appreciate the assistance. Show your approval with a Like! And when your question finds its answer, seal the deal by marking it as an Accepted Solution!
- Our Solutions: Wishlist Plus | Swym Back in Stock Alerts | Swym Gift Lists and Registries