Center Collection List Header- Ride Theme

[LAL]

can someone please help me center the collection list titles on top of the section.  thank you.   

https://3ubymh-9u.myshopify.com/password

test123

[tim]

Add this code to the sections "Custom CSS" setting:

.title-wrapper-with-link {
  justify-content: center;
}

[LAL]

Thank you so much! it worked. any way you can help me with  centering the logo on mobile only?  icons may need to be moved. thank you!!

[tim]

Undo whatever "Custom CSS" you have in header section (also padding on header elements) and add this instead:

@media (max-width: 749px) {
  .header-wrapper .header {
    grid-template-columns: 6rem auto 6rem;
    padding:0 1.5rem;
  }
  .header__icons {
    padding-right: 0;
  }
}

There is also a bunch of header-related CSS added into layouts/theme.liquid above </html> -- it should also be deleted.

[LAL]

not sure which css codes I should delete in theme.liquid could you point them out? thank you. the problem I am having is the codes  mentioned above work to center everything but then the screen wiggles from side to side afterwards. scroll bar appears at the bottom. ???  

[tim]

This is not needed:

<style>
  @media (max-width: 749px) {
    .header-wrapper .header {
      grid-template-columns: 1fr auto 1fr;
    }

    .header__heading-logo {
      transform: scale(1.1);
      margin-left: 1.2rem;
    }
  }

  .header__icon span {
    margin-left: 1.2rem;
  }

  .header__search {
    margin-right: -1.2rem;
  }

  .header__icon--cart {
    margin-right: -1rem !important;
    /*it was 0 */
  }

  header.header.header--top-center.header--mobile-center.page-width.header--has-menu.header--has-account {
    margin: 0rem;
    max-width: 100%;
    padding: 0.9rem;
  }
</style>

[LAL]

I had removed everything and only used your code and it didn't look right the logo was very small, I tweaked a few codes together and finally found something that works for me. Thank you.

[DaisyVo]

Hi @LAL 

You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file base.css and add this code at the end of the file

@media (max-width: 749px) {
    header.header.header--top-center.header--mobile-center.page-width.drawer-menu.header--has-menu.header--has-account {
    padding-right: 0 !important;
}
}

Result 

Best,

DaisyVo