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

PhantomKicks
Visitor
2 0 1

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

Replies 3 (3)

NomtechSolution
Astronaut
1245 113 149

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
Visitor
2 0 1

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

UCU-Admin
Visitor
1 0 0

LMAO!