How can I center text and reduce spacing in the Motion theme?

Store Design
1

Hi all,

I am using the motion theme and wanting to know how to center text with some sections? In particular the ‘sustainable’ sections as there is no option to center text and once it is viewed on mobile it does not sit right.

Screen Shot 2021-03-20 at 10.24.18 pm.png
Screen Shot 2021-03-20 at 10.24.18 pm.png401×709 47.1 KB

Is there also a way to bring the text closer to the image as it quite spaced.

Screen Shot 2021-03-20 at 10.24.36 pm.png
Screen Shot 2021-03-20 at 10.24.36 pm.png1173×1485 110 KB

Shop: mintwear.co

PW: mintman2021

Thanks,

2

@Bayonnaise

Sorry for facing this issue, it’s my pleasure to help us.

Welcome to the Shopify community!
and Thanks for your Good question. :blush:

sorry i can’t see at the home page this section can you please show me on give me particular page url so i will guide you

3

Hi @KetanKumar

My apologies the url is: https://mintwear.co/pages/our-process

Thanks,

Bayon

4

@Bayonnaise

thanks for URL

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css ->paste below code at the bottom of the file.
    this code apply for after 5 - 6 second
#shopify-section-page-sections-template-3 .index-section {
    margin: 30px 0 0px;
}
5

Use below css for mobile device

@media only screen and (max-width: 640px){
  .feature-row__text {
    text-align: center !important;
  }
}
6

Thank you Ketan this is perfect!

Would you be able to tell me how I would then be able to do the same for the other two pages within this section:

https://mintwear.co/pages/bamboo-benefits

https://mintwear.co/pages/upcycling

Thank you once again!

7

Hi @AnishDua

This is amazing and worked a treat!

Thanks so much for the solution.

8

@Bayonnaise

thanks for you update

yes please add this code

#shopify-section-page-sections-template-4 .index-section, #shopify-section-page-sections-template-5 .index-section {
    margin: 30px 0 0px;
}
9

@KetanKumar

Thank you very much!

10
Show More

Hi @AnishDua

Could you please tell me how to center the mobile text for these pages as well:

https://mintwear.co/pages/about-us

https://mintwear.co/pages/upcycling

Thank you again for your help!

11

@Bayonnaise

thanks for details

yes, please add this code to the mobile center

@media only screen and (max-width: 640px) {
#shopify-section-page-sections-template-4 .index-section .text-left, #shopify-section-page-sections-template-5 .index-section .text-left {
    text-align: center !important;
}
}