How can I align a center list with its title in HTML?

Hi All!

Please can someone assist me.

I have a center aligned list and I would like to align the list with the title above it (see screenshot below).

Here is my current code:

HTML:

## What's in the Box?

- D21

- Charger

- Adapter

- Pedals

- Open ended spanner

- Allen keys

- Fenders

CSS:

.list-center-justify { 
  display: grid; 
  place-items: center; 
}

Thanks in advance!

https://electricrideco.com/products/fiido-d21-36v-250w-folding-electric-bike?_pos=1&_sid=cccee76af&_ss=r

1 Like

@guyv can you try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss.liquid->paste below code at the bottom of the file
.list-center-justify ul {
    margin-left: -80px;
}

sorry for that issue can you try this code

1 Like

@KetanKumar

Thanks for your reply!

This code works but if possible I would like code that will align the list for different title lengths, not just the “What’s In The Box?” title but also shorter and longer titles.

Can you help with this?

Thanks!

Hi @guyv ,

You want to look like this:

It will display automatically according to the length of the heading.

You just need to change the HTML according to the following structure, it will display fine.

## What's in the Box?

  

    - D21

    - Charger

    - Adapter

    - Pedals

    - Open ended spanner

    - Allen keys

    - Fenders
  

=>


  ## What's in the Box?
  
    - D21

    - Charger

    - Adapter

    - Pedals

    - Open ended spanner

    - Allen keys

    - Fenders
  

Hope it helps!

1 Like

@LitCommerce

Hi and thanks for your reply.

I’ve made the change but it doesn’t seem to work.

https://electricrideco.com/products/fiido-d2s-36v-250w-folding-electric-bike

Hi @guyv ,

I checked and its still not changed. Can you send me the screenshot where you changed the code.

I will check it. Because I tried adding it and everything works fine:

1 Like

@LitCommerce

Apologies, I sent the wrong webpage.

Here is the correct webpage and a screenshot of the code which doesn’t seem to be working:

https://electricrideco.com/products/fiido-d21-36v-250w-folding-electric-bike

Hi @guyv ,

I checked and it changed itself to span.

so you just need to change the code here, it will work fine:


=>


Hope it helps!

1 Like

@LitCommerce

Perfect! Thanks a lot for your help.

1 Like