Custom HTML Layout

Jlawal · ‎Aug 11, 2017

Hello,

I'm trying to create two collapsible sections on this webpage (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

Jsum · ‎Aug 14, 2017

@Jlawal,

I see quite a few issues here.

1. you are doubling up on your css and js calls. This can have a lot of different effects, all of them negative, such as canceling of styles and functions that are needed.

1. both of these section have their own head section. You should only have one head section per page, and you page already has one. It can be edited by clicking edit -> edit head. You can place your link tags there.

2. You don't need the meta viewport tag. It's already included on your site.

3. You don't need the jQuery script, it is already included in hubspot pages by default.

4. Your bootstrap.js link should go in the footer.

2. You are already in the body tag by default. A document should only have 1 body tag. Essentially what you have done is put two different html documents inside of a third html document.

put this in the head of your page (edit -> edit head) once:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

put this in the footer of your page (in a custom html module at the bottom of the page for instance) once:

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

strip your code of the heads and the body tags:

<!-- The following is for the Quick Start guide: -->

<div class="container">
	<a href="#demo" data-toggle="collapse">
		<div style="text-align: center;">
			<img src="https://www.groupcall.com/hubfs/Quick-Start-3.png" alt="" title="Quick-Start-3.png" width="150" height="150">
		</div>
         	<div style="text-align: center;">
             		<span style="font-size: 30px;">
                 		Quick Start Guides
             		</span>
         	</div>
	</a>
        <div id="demo" class="collapse">
        	<br>
        	<div style="text-align: center;">
        		<span style="font-size: 20px;">
                      		Voice Messages<br>
                      		Data Quality Reports<br>
                      		Tweeting<br>
                      		MIS Compatibility<br>
                      		Notifications from Groupcall<br>
                      		Status Page<br>
                      		Authorise Messages<br>
                      		Metrics<br>
                      		Schedule Messages<br>
                      		Export Data<br>
                      		Managing Contacts<br>
                      		Managing Saved Messages & Templates<br>
                      		Request SMS credits<br>
                      		Send Feedback to Groupcall
			</span>
		</div>
        </div>
</div>

 
 
<!-- This code is for the FAQs section: -->

 
<div class="container">
	<a href="#demo" data-toggle="collapse">
		<div style="text-align: center;">
			<img src="https://www.groupcall.com/hubfs/FAQ.png" alt="" title="FAQ.png" width="150" height="150" style="display: block; margin-left: auto; margin-right: auto;">
		</div>
		<div style="text-align: center;">
			<span style="font-size: 30px;">
				Frequently Asked Questions
			</span>
		</div>
	</a>
 
	<div id="demo" class="collapse">
		<br>
		<div style="text-align: center;">
			<span style="font-size: 20px;">
				Question 1<br>
				Question 2<br>
				Question 3<br>
				Question 4<br>
				Question 5<br>
				Question 6<br>
				Question 7<br>
				Question 8<br>
				Question 9<br>
				Question 10<br>
				Question 11<br>
				Question 12<br>
				Question 13<br>
				Question 14
			</span>
  		</div>
	</div>
</div>

Do this and let me know when it's updated.

View solution in original post

Jsum · ‎Aug 11, 2017

@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.

Jlawal · ‎Aug 14, 2017

Hi @Jsum,

Thanks for replying.

I've added the sections to the page which can be found here.

Many thanks,

Jamila

Jsum · ‎Aug 14, 2017

@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.

Jlawal · ‎Aug 14, 2017

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:

<head>

</head>

<body>

<a href="#demo" data-toggle="collapse"><div style="text-align: center;"><span style="font-size: 30px;">Quick Start Guides</span></div>

<br><div style="text-align: center;"><span style="font-size: 20px;">Voice Messages<br>

Data Quality Reports<br>

Tweeting<br>

MIS Compatibility<br>

Notifications from Groupcall<br>

Status Page<br>

Authorise Messages<br>

Metrics<br>

Schedule Messages<br>

Export Data<br>

Managing Contacts<br>

Managing Saved Messages & Templates<br>

Request SMS credits<br>

Send Feedback to Groupcall

</div>

</body>

This code is for the FAQs section:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<a href="#demo" data-toggle="collapse"><div style="text-align: center;"><span style="font-size: 30px;">Frequently Asked Questions</span></div>

<br><div style="text-align: center;"><span style="font-size: 20px;">Question 1<br>

Question 2<br>

Question 3<br>

Question 4<br>

Question 5<br>

Question 6<br>

Question 7<br>

Question 8<br>

Question 9<br>

Question 10<br>

Question 11<br>

Question 12<br>

Question 13<br>

Question 14

</div>

</body>

</html>

Jsum · ‎Aug 14, 2017

@Jlawal,

I see quite a few issues here.

1. you are doubling up on your css and js calls. This can have a lot of different effects, all of them negative, such as canceling of styles and functions that are needed.

1. both of these section have their own head section. You should only have one head section per page, and you page already has one. It can be edited by clicking edit -> edit head. You can place your link tags there.

2. You don't need the meta viewport tag. It's already included on your site.

3. You don't need the jQuery script, it is already included in hubspot pages by default.

4. Your bootstrap.js link should go in the footer.

2. You are already in the body tag by default. A document should only have 1 body tag. Essentially what you have done is put two different html documents inside of a third html document.

put this in the head of your page (edit -> edit head) once:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

put this in the footer of your page (in a custom html module at the bottom of the page for instance) once:

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

strip your code of the heads and the body tags:

<!-- The following is for the Quick Start guide: -->

<div class="container">
	<a href="#demo" data-toggle="collapse">
		<div style="text-align: center;">
			<img src="https://www.groupcall.com/hubfs/Quick-Start-3.png" alt="" title="Quick-Start-3.png" width="150" height="150">
		</div>
         	<div style="text-align: center;">
             		<span style="font-size: 30px;">
                 		Quick Start Guides
             		</span>
         	</div>
	</a>
        <div id="demo" class="collapse">
        	<br>
        	<div style="text-align: center;">
        		<span style="font-size: 20px;">
                      		Voice Messages<br>
                      		Data Quality Reports<br>
                      		Tweeting<br>
                      		MIS Compatibility<br>
                      		Notifications from Groupcall<br>
                      		Status Page<br>
                      		Authorise Messages<br>
                      		Metrics<br>
                      		Schedule Messages<br>
                      		Export Data<br>
                      		Managing Contacts<br>
                      		Managing Saved Messages & Templates<br>
                      		Request SMS credits<br>
                      		Send Feedback to Groupcall
			</span>
		</div>
        </div>
</div>

 
 
<!-- This code is for the FAQs section: -->

 
<div class="container">
	<a href="#demo" data-toggle="collapse">
		<div style="text-align: center;">
			<img src="https://www.groupcall.com/hubfs/FAQ.png" alt="" title="FAQ.png" width="150" height="150" style="display: block; margin-left: auto; margin-right: auto;">
		</div>
		<div style="text-align: center;">
			<span style="font-size: 30px;">
				Frequently Asked Questions
			</span>
		</div>
	</a>
 
	<div id="demo" class="collapse">
		<br>
		<div style="text-align: center;">
			<span style="font-size: 20px;">
				Question 1<br>
				Question 2<br>
				Question 3<br>
				Question 4<br>
				Question 5<br>
				Question 6<br>
				Question 7<br>
				Question 8<br>
				Question 9<br>
				Question 10<br>
				Question 11<br>
				Question 12<br>
				Question 13<br>
				Question 14
			</span>
  		</div>
	</div>
</div>

Do this and let me know when it's updated.

Jlawal · ‎Aug 15, 2017

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

Jsum · ‎Aug 15, 2017

@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:

@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.

Jsum · ‎Aug 15, 2017

@Jlawal,

The class is still "container".

<div class="container">
    <a href="#demo" data-toggle="collapse">
....

You added pop_container to the module when you should have replaced "container" within the actual code.

Jlawal · ‎Aug 15, 2017

Sorry i didn't realise you meant within the custom html.

I've replaced this now but am still having the same issues @Jsum

Jsum · ‎Aug 15, 2017

@Jlawal,

The class still hasn't changed. did you publish the template?

Jlawal · ‎Aug 15, 2017

Yes. This is how i've done it @Jsum:

Jlawal · ‎Aug 15, 2017

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

CMS Development