How to add a frame to every question on the Q&A on Focal Theme

Deutsch Diskussion Shopify Design

Topic summary

A user seeks help adding borders/frames around individual questions in a Q&A section on the Focal Shopify theme.

Initial Solution:

  • CSS code provided targeting .collapsible-toggle with a 1px solid black border and 5px bottom margin
  • Successfully works on desktop view only

Mobile Issue & Fix:

  • The desktop CSS doesn’t position correctly on mobile devices
  • Additional media query code provided for screens up to 740px width, targeting .faq__item with !important flag to ensure proper rendering

Resolution:

  • User confirms the mobile CSS solution works
  • Thread appears resolved with working code for both desktop and mobile views
Summarized with AI on November 13. AI used: claude-sonnet-4-5-20250929.
1

Hey guys, I want to add a frame to every question on the Q&A. I would be happy if someone could solve this problem for me.

Thats the state right now:

Bildschirmfoto 2024-01-07 um 13.57.24.png
Bildschirmfoto 2024-01-07 um 13.57.24.png682×720 57.1 KB

The reference:

MSEcom2024_0-1704632309330.png
MSEcom2024_0-1704632309330.png698×1052 102 KB

2

@MS-Ecom2024 you can the following code to the theme’s or section custom css:

.collapsible-toggle{
border:1px solid #000000;
margin-bottom:5px;
}

The margin value is for the spacing between the questions.

3

Unfortunately it just works on desktop view. On mobile view it hasn’t the right position.

Thanks

4

@MS-Ecom2024 so my first reply was 50% right or 50% wrong? :joy:

for mobile, you’ll have to use the following code:

@media screen and (max-width: 740px){
.faq__item {
    border: 1px solid #000!important;
    margin-bottom: 5px;
}
}
5

Danke dir, ich habe aus Versehen im deutschen Forum gepostet. Sollte passen der Code! :wink: