Footer item's alignment

akhilkhemaniNov 20, 2021

Hi ,

I am using the footer in my website from this page - demo-app-landing.html.

I want to align the footer items such that -
in mobile devices, all the text, icons and images in the footer are center aligned.

However in the desktop and larger devices, the footer elements can be as is implemented in - demo-app-landing.html

Im able to center align the text elements using text-md-start text-center.
But dont know how to do this with the other elements - (image icon, the social icons and the ul elements)

SemiColonWebSTAFFNov 22, 2021

Hello,

You can consider using the following code:

<!-- Footer Widgets
============================================= -->
<div class="footer-widgets-wrap">
	<div class="row text-center text-md-start">

		<div class="col-lg-5">

			<div class="widget clearfix">
				<div class="row">
					<div class="col-lg-8 bottommargin-sm clearfix" style="color:#888;">
						<img src="demos/app-landing/images/footer-logo.png" alt="Canvas Logo" style="display: block;" class="bottommargin-sm mx-auto mx-md-0">
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio, consequatur facere molestiae iusto atque.</p>

						<a href="#" class="social-icon d-inline-block d-md-block float-none float-md-start si-small si-borderless si-colored si-rounded si-facebook">
							<i class="icon-facebook"></i>
							<i class="icon-facebook"></i>
						</a>

						<a href="#" class="social-icon d-inline-block d-md-block float-none float-md-start si-small si-borderless si-colored si-rounded si-twitter">
							<i class="icon-twitter"></i>
							<i class="icon-twitter"></i>
						</a>

						<a href="#" class="social-icon d-inline-block d-md-block float-none float-md-start si-small si-borderless si-colored si-rounded si-gplus">
							<i class="icon-gplus"></i>
							<i class="icon-gplus"></i>
						</a>

						<a href="#" class="social-icon d-inline-block d-md-block float-none float-md-start si-small si-borderless si-colored si-rounded si-pinterest">
							<i class="icon-pinterest"></i>
							<i class="icon-pinterest"></i>
						</a>

						<a href="#" class="social-icon d-inline-block d-md-block float-none float-md-start si-small si-borderless si-colored si-rounded si-vimeo">
							<i class="icon-vimeo"></i>
							<i class="icon-vimeo"></i>
						</a>

					</div>
				</div>
			</div>

		</div>

		<div class="col-lg-7">
			<div class="row col-mb-30">

				<div class="col-lg-4">
					<div class="widget widget_links widget-li-noicon app_landing_widget_link clearfix">
						<h4>In News</h4>

						<ul>
							<li class="justify-content-center justify-content-md-start"><a href="https://codex.wordpress.org/">Documentation</a></li>
							<li class="justify-content-center justify-content-md-start"><a href="https://wordpress.org/support/forum/requests-and-feedback">Feedback</a></li>
							<li class="justify-content-center justify-content-md-start"><a href="https://wordpress.org/extend/plugins/">Plugins</a></li>
							<li class="justify-content-center justify-content-md-start"><a href="https://wordpress.org/support/">Support Forums</a></li>
							<li class="justify-content-center justify-content-md-start"><a href="https://wordpress.org/extend/themes/">Themes</a></li>
						</ul>
					</div>
				</div>
				<div class="col-lg-4">
					<div class="widget widget_links widget-li-noicon app_landing_widget_link clearfix">
						<h4>About Us</h4>

						<ul>
							<li class="justify-content-center justify-content-md-start"><a href="https://codex.wordpress.org/">Documentation</a></li>
							<li class="justify-content-center justify-content-md-start"><a href="https://wordpress.org/support/forum/requests-and-feedback">Feedback</a></li>
							<li class="justify-content-center justify-content-md-start"><a href="https://wordpress.org/extend/plugins/">Plugins</a></li>
							<li class="justify-content-center justify-content-md-start"><a href="https://wordpress.org/support/">Support Forums</a></li>
							<li class="justify-content-center justify-content-md-start"><a href="https://wordpress.org/extend/themes/">Themes</a></li>
						</ul>
					</div>
				</div>
				<div class="col-lg-4">
					<div class="widget widget_links widget-li-noicon app_landing_widget_link clearfix">
						<h4>Support</h4>

						<ul>
							<li class="justify-content-center justify-content-md-start"><a href="https://codex.wordpress.org/">Documentation</a></li>
							<li class="justify-content-center justify-content-md-start"><a href="https://wordpress.org/support/forum/requests-and-feedback">Feedback</a></li>
							<li class="justify-content-center justify-content-md-start"><a href="https://wordpress.org/extend/plugins/">Plugins</a></li>
							<li class="justify-content-center justify-content-md-start"><a href="https://wordpress.org/support/">Support Forums</a></li>
							<li class="justify-content-center justify-content-md-start"><a href="https://wordpress.org/extend/themes/">Themes</a></li>
						</ul>
					</div>
				</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.