Canvas Support

Align text

3 replies · opened Apr 7, 2021

Ssian314Apr 7, 2021

Hi, am using the index.html template to showcase an app. Under the features with the mockup phone in the middle, it's very hard to get the text on both left and right to align due to the number of text. Is there a way to fix it to allow both sides to look align? Below is my code. Thank you.

<div id="features" class="container clearfix">

				&lt;div class="heading-block topmargin-lg center"&gt;
					&lt;h2&gt;Awesome Features&lt;/h2&gt;
					&lt;span class="mx-auto"&gt;We listen to your feedbacks and constantly improve to provide you the best experience.&lt;/span&gt;
				&lt;/div&gt;

				&lt;div class="row col-mb-50 mb-4"&gt;
					&lt;div class="col-lg-4 col-md-6"&gt;

						&lt;div class="feature-box flex-md-row-reverse text-md-right" data-animate="fadeIn"&gt;
							&lt;div class="fbox-icon"&gt;
								[](#)
							&lt;/div&gt;
							&lt;div class="fbox-content"&gt;
								&lt;h3&gt;Free Unlimited Scans&lt;/h3&gt;
								&lt;p&gt;Scan unlimited documents for free.&lt;/p&gt;
							&lt;/div&gt;
						&lt;/div&gt;

						&lt;div class="feature-box flex-md-row-reverse text-md-right mt-5" data-animate="fadeIn" data-delay="200"&gt;
							&lt;div class="fbox-icon"&gt;
								[](#)
							&lt;/div&gt;
							&lt;div class="fbox-content"&gt;
								&lt;h3&gt;Works offline&lt;/h3&gt;
								&lt;p&gt;Works offline to protect your privacy. We don't store any of the scan images. &lt;/p&gt;
							&lt;/div&gt;
						&lt;/div&gt;

						&lt;div class="feature-box flex-md-row-reverse text-md-right mt-5" data-animate="fadeIn" data-delay="400"&gt;
							&lt;div class="fbox-icon"&gt;
								[](#)
							&lt;/div&gt;
							&lt;div class="fbox-content"&gt;
								&lt;h3&gt;Text-to-Speech&lt;/h3&gt;
								&lt;p&gt;Read text out loud when you don't have the time to read.&lt;/p&gt;
							&lt;/div&gt;
						&lt;/div&gt;

					&lt;/div&gt;

					&lt;div class="col-lg-4 d-md-none d-lg-block text-center"&gt;

attachment

					&lt;/div&gt;

					&lt;div class="col-lg-4 col-md-6"&gt;

						&lt;div class="feature-box" data-animate="fadeIn"&gt;
							&lt;div class="fbox-icon"&gt;
								[](#)
							&lt;/div&gt;
							&lt;div class="fbox-content"&gt;
								&lt;h3&gt;Supports 110 languages&lt;/h3&gt;
								&lt;p&gt;Recognizes printed text from more than 110 languages.&lt;/p&gt;
							&lt;/div&gt;
						&lt;/div&gt;

						&lt;div class="feature-box mt-5" data-animate="fadeIn" data-delay="200"&gt;
							&lt;div class="fbox-icon"&gt;
								[](#)
							&lt;/div&gt;
							&lt;div class="fbox-content"&gt;
								&lt;h3&gt;Multiple languages documents&lt;/h3&gt;
								&lt;p&gt;Easily extract text with more than 2 languages in a document.&lt;/p&gt;
							&lt;/div&gt;
						&lt;/div&gt;

						&lt;div class="feature-box mt-5" data-animate="fadeIn" data-delay="400"&gt;
							&lt;div class="fbox-icon"&gt;
								[](#)
							&lt;/div&gt;
							&lt;div class="fbox-content"&gt;
								&lt;h3&gt;Translate&lt;/h3&gt;
								&lt;p&gt;Translate your documents to other languages.&lt;/p&gt;
							&lt;/div&gt;
						&lt;/div&gt;

					&lt;/div&gt;
				&lt;/div&gt;

			&lt;/div&gt;
SSemicolon WebSTAFFApr 7, 2021

Hello,

Can you please provide us with a Screenshot of what you are seeing and an explanation of what you are expecting to see, so that we can check these out and provide you with more assistance on this. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

Ssian314Apr 8, 2021

Hi

Please find the screenshot which I've highlighted the lines in red. You can see that the left side is not aligned with the right side because of the number of text. Is there a way to make it both aligned somehow so it doesn't look awkward?

SSemicolon WebSTAFFApr 8, 2021

Hello,

Unfortunately, this is not supported as they are both different grid structures and use different .row's. The Equal Heights can only be applied to the Columns in the Same Grid. You will need to manually set a Height (ex: min-height: 110px;) for the Columns to make it look equal.

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