Re: Side-by-side collapsible content width and responsiveness

Re: Side-by-side collapsible content width and responsiveness

mOONbOOTS
Explorer
60 6 7

Hello,

 

I am trying to get collapsible content on the stock Dawn theme to be side-by-side, responsive on mobile, and be the same width as the rest of my sections. I have the theme set to 1600px. Any help without having to share my store URL would be greatly appreciated. It's the stock Dawn theme with collapsible content.

 

As you can see, I have been able to get the collapsible content side-by-side using the following code, but they're much wider than the 1600px page width, and on mobile, the text within the collapsible content overlaps.

 

Screenshot_28-9-2024_104647_admin.shopify.com.jpegScreenshot_28-9-2024_105040_admin.shopify.com.jpeg

 

This code is in the base.css file:

 

@media screen and (min-width: 750px) {
  #shopify-section-template--23520319766840__collapsible_content_yaxwQX {
    display: inline-block;
    width: 50%;
  }
  
  #shopify-section-template--23520319766840__collapsible_content_9chWn7 {
    display: inline-block;
    width: 50%;
  }
}

 

 

I feel like there is a better way of doing this.

Replies 0 (0)