Canvas Support

Feature Box - Spacing in the box

9 replies·opened Apr 7, 2021
S
sian314Apr 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;
S
SemiColonWebSTAFFApr 7, 2021

Hello,

Adding the .align-items-stretch Class to the .row DIV should work fine:

<div class=”row justify-content-center align-items-stretch mt-4 col-mb-50 “>

Hope this Helps!

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

S
sian314Apr 8, 2021

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

S
sian314Apr 8, 2021

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

S
sian314Apr 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?

S
SemiColonWebSTAFFApr 8, 2021

Hello,

Please consider using the following code:

<style>
.fbox-bg .fbox-content {
	margin-bottom: -2rem;
}
</style>

<div class="row justify-content-center align-items-stretch col-mb-50 mb-5">
	<div class="col-sm-6 col-lg-4">
		<div class="grid-inner h-100 overflow-visible">
			<div class="feature-box fbox-center fbox-bg fbox-light fbox-effect h-100 mx-0">
				<div class="fbox-icon">
					<a href="#"><i class="i-alt">1</i></a>
				</div>
				<div class="fbox-content">
					<h3>Choose a Product<span class="subtitle">Step 1</span></h3>
					<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium, optio.</p>
				</div>
			</div>
		</div>
	</div>

	<div class="col-sm-6 col-lg-4">
		<div class="grid-inner h-100 overflow-visible">
			<div class="feature-box fbox-center fbox-bg fbox-border fbox-effect h-100 mx-0">
				<div class="fbox-icon">
					<a href="#"><i>2</i></a>
				</div>
				<div class="fbox-content">
					<h3>Enter Billing Info<span class="subtitle">Step 2</span></h3>
				</div>
			</div>
		</div>
	</div>

	<div class="col-sm-6 col-lg-4">
		<div class="grid-inner h-100 overflow-visible">
			<div class="feature-box fbox-center fbox-bg fbox-outline fbox-dark fbox-effect h-100 mx-0">
				<div class="fbox-icon">
					<a href="#"><i class="i-alt">3</i></a>
				</div>
				<div class="fbox-content">
					<h3>Complete your Payment<span class="subtitle">Step 3</span></h3>
				</div>
			</div>
		</div>
	</div>
</div>

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.

S
sian314Apr 8, 2021

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

S
SemiColonWebSTAFFApr 8, 2021

Hello,

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

<div class="col-sm-6 col-lg-4" style="height: 400px;">

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.

S
sian314Apr 8, 2021

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

S
SemiColonWebSTAFFApr 9, 2021

Hello,

You will need to do this manually. Consider using the following CSS Code:

.fbox-bg.fbox-center {
	border: 1px solid #E5E5E5;
}

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