How can I center a collapsible row and text on my product page?

[PhantomKicks]

Can anybody show me how to center my Collapsable row on my product page as well as the text in the dropbox included on my shopify store (theme Dawn)?

www.phantomkicks.store

[NomtechSolution]

To center the collapsible row and the text within the dropdown box on your Shopify store using the Dawn theme, you can apply CSS styling. Here's how you can achieve that:

1. Centering the Collapsible Row: Locate the HTML code for the collapsible row element on your product page. Typically, it would be represented by a <div> or <section> with a specific class or ID. Let's assume the class for the collapsible row is .collapsible-row.

   Add the following CSS code to your theme's stylesheet or within the <style> tags in the appropriate Liquid section:

.collapsible-row {
  display: flex;
  justify-content: center;
}

1. This CSS code sets the display of the .collapsible-row element to flex and centers its content horizontally using justify-content: center.

2. Centering the Dropdown Text: Locate the HTML code for the dropdown box containing the text. This is typically represented by an <select> element or a custom dropdown component. You may need to inspect the element using your browser's developer tools to identify its specific class or ID. Let's assume the class for the dropdown box is .dropdown-box.

   Add the following CSS code to your theme's stylesheet or within the <style> tags:

.dropdown-box {
  text-align: center;
}

[PhantomKicks]

This makes absolutely 0 sense, can you please tell me in more simple terms?

[UCU-Admin]

LMAO!