Solved

How can I center a banner in the Motion theme?

jacqueee
Shopify Partner
3 0 0

Hello! I need help because we want this banner to be on center. how to do that? i check on the settings its on center but its not on center here. what code should i use?

this is the website: https://staygoldenhi.com/collections/my-gems

 

jacqueee_1-1710921670231.png

 

 

2nd. when you view https://staygoldenhi.com/collections/my-gems

this will suddenly appear for 1- 2 sec and we want to get rid of that. pls help

jacqueee_3-1710921840395.png

 

 

jacqueee_2-1710921779646.png

 

 

 

 

Accepted Solution (1)

Ihor-Sh
Shopify Partner
55 7 15

This is an accepted solution.

Hello @jacqueee if you want it to look as on screenshot
- add such styling in dev_style.css:

 

.template-collection .section-header {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    float: none;
}

 

2. You see this weird thing because of boost app. If you want to get rid of this - you need to abandon this app.

IhorSh_0-1710931569227.png

 

 
 
 
Shopify troubleshootibility 😉

View solution in original post

Replies 4 (4)

kazi
Shopify Partner
571 87 109

Assets > dev_style.css >  go to line #944 and remove  "float:left"  from this css 

 

.template-collection .section-header {
padding-top: 0;
 float: left; 
}

▶️ If you need more help with your Shopify store
Speed Optimization | Theme Customization ? ☎️ WhatsApp ✉️Email Skype: kof.bd

BrainStation23
Shopify Partner
308 50 49

HI @jacqueee  We have gone through your problem and found a solution. 
Solution:
You can follow these steps to achieve your result
Go to online store->Edit code->dev_style.css  file
And pest bellow code 

 

.template-collection .section-header {
padding-top: 0;
 float: left !important; 
}

 

Brain Station 23 PLC
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
Email: js.team@brainstation-23.com

arraynex
Shopify Partner
25 2 2

Hello @jacqueee,

 

It's ArrayNex support team and glad to support you today.

 

I checked your website and found that the cause of this issue.

 

Your Solution:
You can follow these steps to achieve your result
Go to online store->Edit code->dev_style.css  file
And pest bellow code 

 

.template-collection .section-header {
padding-top: 0;
 float: left !important; 
}

 

 

If you require any further information, feel free to contact me.

 

Best regards,
ArrayNex Support Team

Arraynex- Shopify Partner- Helping eCommerce Stores


Was my reply helpful? Accept it as a solution   Buy me a coffee


Replace apps with copy/paste code snippets. save money - click here.


Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


Ihor-Sh
Shopify Partner
55 7 15

This is an accepted solution.

Hello @jacqueee if you want it to look as on screenshot
- add such styling in dev_style.css:

 

.template-collection .section-header {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    float: none;
}

 

2. You see this weird thing because of boost app. If you want to get rid of this - you need to abandon this app.

IhorSh_0-1710931569227.png

 

 
 
 
Shopify troubleshootibility 😉