[Resolved] How Can I Make Lists Centered But Still Left Aligned While Being Responsive?

[Madison]

I have a grid that contains a list. Right now this list is split into three divs with each containing its own UL and LI elements inside of the grid. These three child divs that contain the list are nested inside of the grid element, and the grid element also has its own parent container.

I am trying to make the list elements align to the edge of the bullet points, instead of to the indentation. I can remove the indentation with CSS but its hacky and doesn’t really work 100% since the right edge of the list would now be unaligned with its parent container. It’s also not responsive since I’m using absolute px. Some theoretical options to solve it include: 1) somehow not separating the list, but using flex, overflow, box-sizing box, and media queries to make the LI elements wrap naturally but remain centered using flex, OR 2) keeping the list split into three parts, but somehow removing the indentation and forcing the container to only be as big as the LI elements, and then align the list however I want to now that the list elements are fitted to their container, OR 3) I take the elements out of the grid, and align the individual containers by hand.

I have added temporary credentials to the private info field if anyone wants to take a look. I apologize if the custom CSS is messy in the “Additional CSS” tab, I haven’t cleaned it up yet. The part I am referencing is the services area on the home page. If you resize the list on desktop, tablet, and mobile you will see what I mean. I want it to span the full container on desktop and still be centered (centered using the edge of the bullet points and text, not centered using the lists parent container to the edge of the bullet points). And then on mobile I want it to split into smaller containers spanning 50% width, so it can fit into a smaller area, but still be centered using the bullet points and not the space around the list.

Thank you to anyone who wants to help! I really appreciate it! I know I may have described it confusingly, let me know if anything need clarified.

[Madison]

nevermind, figured out how to solve it!

[Author]

Posts