Hello,
I’m trying to create two collapsible sections on [this webpage](https://www.groupcall.com/-temporary-slug-48456d05-7f2c-4de2-a3f1-7352cfe5226b?hs_preview=OSsCibzf-5294173596) (Under Popular Content). They will house links to other sections and are supposed to sit next to each other in the same row.
I have put coode into two Custom HTML modules. They don’t work as they are supposed to and they stack vertically rather than horizontaly.
Could anyone help me with this issue?
Many thanks,
Jamila
---
@Jlawal,
I’m not seeing the drop downs on the page. Could you provide your markup and css for us to take a look at, or better add the sections onto the page so we could get a full view of whats going on? I believe you could share a preview link so you wouldn’t have to publish.
---
Hi @Jsum,
Thanks for replying.
I’ve added the sections to the page which can be found [here](https://www.groupcall.com/-temporary-slug-48456d05-7f2c-4de2-a3f1-7352cfe5226b?hs_preview=OSsCibzf-5294173596).
Many thanks,
Jamila
---
@Jlawal,
Your code is all kinds of out of wack. Could you post the html, css, javascript, and hubl you are using for that section? maybe I can sort it out.
---
That would be great! I pasted the code directly into two Custom HTML modules within HS @Jsum.
The following is for the **Quick Start** guide:
\
\
\
\`
strip your code of the heads and the body tags:
```auto
Thank you @Jsum!
I’ve updated the page with the information. Thank you for taking the time out to explain what was wrong with the code as well!
Many thanks,
Jamila
---
@Jlawal,
Not a problem.
Ok so this looks better. now the issue is with your CSS. Both of your drop downs have a wrapper with the class “container”. I don’t particularly like this because it is so generic that it is almost guaranteed that it is used in other places, particularly in hubspots default framework css (it’s based off of bootstrap2 and bootstrap uses “container” as a class). This is fine if you are going to use it inline with bootstraps css rules, the issue that i’m seeing is that you have fixed widths applied to it. This is why you the sections are misaligned and hanging off the page.
are each of these placed in there own custom html module in your module? If not you should place two custom html modules next to each other (half and half) and put these each in there own to separate them.
The css causing the alignment issues is this:
```auto
@media (min-width: 1200px)
grid.less:10
.container {
width: 1170px;
}
@media (min-width: 992px)
grid.less:85
.container {
/* width: 970px; */
}
@media (min-width: 768px)
grid.less:85
.container {
/* width: 750px; */
}
```
Bascally a less file (preprocessed css) has static width rules for a class of “container”. Turn these off and your sections will snap into place.
probably the best way to do this would be for you to change the class name “container” to something like “pop\_container” in your html. This would break your html from that css and any other css applied to the “container” class.
---
I’ve edited the class as recommended but i’m still having issues with alignment and the ‘Frequently Asked Questions’ collapsible menu. Clicking on it seems to open and collapse the Quick Start Guides. Is this an effect of the alignment do you think? @Jsum
The code is placed in the seperate custom HTMLs:
CH
---
