Canvas Support

Feature Box - Spacing in the box

9 replies · opened Apr 7, 2021

Ssian314Apr 7, 2021

Hi, am using the feature box but I would the box all to have the same size. Can you help me please?

<div class="row justify-content-center mt-4 col-mb-50 ">
<div class="col-sm-6 col-lg-4">
<div class="feature-box fbox-center fbox-bg fbox-border fbox-effect">
<div class="fbox-icon" style="background-color:#f9f9f9">
1
</div>
<div class="fbox-content">
<h3>Scan<span class="subtitle">Place phone over an image to scan or load the document from gallery</span></h3>
</div>
</div>
</div>

					&lt;div class="col-sm-6 col-lg-4"&gt;
						&lt;div class="feature-box fbox-center fbox-bg fbox-border fbox-effect"&gt;
							&lt;div class="fbox-icon" style="background-color:#f9f9f9"&gt;
								[_2_](#)
							&lt;/div&gt;
							&lt;div class="fbox-content"&gt;
								&lt;h3&gt;Text Language&lt;span class="subtitle"&gt;Select the text language of the image.                  &lt;/span&gt;&lt;/h3&gt;
							&lt;/div&gt;
						&lt;/div&gt;
					&lt;/div&gt;

					&lt;div class="col-sm-6 col-lg-4"&gt;
						&lt;div class="feature-box fbox-center fbox-bg fbox-border fbox-effect"&gt;
							&lt;div class="fbox-icon" style="background-color:#f9f9f9"&gt;
								[3](#)
							&lt;/div&gt;
							&lt;div class="fbox-content"&gt;
								&lt;h3&gt;Edit & Share&lt;span class="subtitle"&gt;Edit the documents and share it with friends. You can also use Text-to-speech or translate the text directly. &lt;/span&gt;&lt;/h3&gt;
							&lt;/div&gt;
						&lt;/div&gt;
					&lt;/div&gt;
				&lt;/div&gt;
SSemicolon WebSTAFFApr 7, 2021

Hello,

Adding the .align-items-stretch Class to the .row DIV should work fine:
[ch_pre][/ch_pre]

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Ssian314Apr 8, 2021

Do I add this new code to all the 3 individual feature boxes or just the top of it?

Ssian314Apr 8, 2021

Sorry, but can you explain what is this mt-4 col-mb-50? You are defining the size of the box?

Ssian314Apr 8, 2021

Please ignore the above. I've added the "align-items-stretch" in the code <div class="row justify-content-center align-items-stretch mt-4 col-mb-50"> but the box still remain the same. Please see attached the screenshot. Did I miss out on something?

SSemicolon WebSTAFFApr 8, 2021

Hello,

Please consider using the following code:
[ch_pre]
.fbox-bg .fbox-content {
margin-bottom: -2rem;
}

				[1](#)
			
			
				Choose a ProductStep 1

Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium, optio.

				[2](#)
			
			
				Enter Billing InfoStep 2
			
		
	



	
		
			
				[3](#)
			
			
				Complete your PaymentStep 3

[/ch_pre]

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Ssian314Apr 8, 2021

Is it possible to define the height of the box instead?

SSemicolon WebSTAFFApr 8, 2021

Hello,

You can simply add a Custom Height to the .col-* DIV. Example:
[ch_pre][/ch_pre]

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Ssian314Apr 8, 2021

Thank you so much!! Is there a way to change the color of the outline box or define the thickness?

SSemicolon WebSTAFFApr 9, 2021

Hello,

You will need to do this manually. Consider using the following CSS Code:
[ch_pre type="css"].fbox-bg.fbox-center {
border: 1px solid #E5E5E5;
}[/ch_pre]

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard