how to make a division on html page responsive?
Question
http://ebullience-tech.com/services.html link to the website
this is my code and have two diferent section left with detail and right with index of the detail, and I want these to get aligned in straight coloumn when opened on mobile, but its not getting aligned, please help
<section id="tabs" class="element">
<div class="container">
<div class="element-sec">
<h3>Domains we have <i>EXPERTISE</i></h3>
<div class="theme-tabs2">
Software Development
</ul><!-- Selectors -->
<div id="myTabContent" class="tab-content aligned">
<div class="tab-pane fade active in" id="software_development">
<div class="col-md-3">
<img alt="" src="images/resource/aligned2.jpg" />
</div>
<div class="col-md-9">
<h3> Software Development</h3>
<h2 style="font-size: large">Softwares plays the key role in maintaining records, data, accounts, ledger, stocks
in a corporate or in an Industry with ease and accuracy. Holding and maintaining large data was a challenge for
human from years but after the evolution of technology its not a big deal now very complex calculations are
now solved in milli seconds. This evolution has increased the efficiency and accuracy of Industries and their
work.
We Provides software development for all types of business need list of softwares we are providing is:</h2>
<ul class="theme-list">
<li><i class=""><img></i>✓ Inventory and Stock Management</li>
<li><i class="icon-check-sign"></i>✓ Account Manager</li>
<li><i class="icon-check-sign"></i>✓ Billing Solution</li>
<li><i class="icon-check-sign"></i>✓ Invoice and Purchase Order</li>
<li><i class="icon-check-sign"></i>✓ Employee Management</li>
<li><i class="icon-check-sign"></i>✓ Payroll Manager</li>
<li><i class="icon-check-sign"></i>✓ Business Analytics</li>
<li><i class="icon-check-sign"></i>✓ ERP</li>
</ul>
</div>
</div>
<div class="tab-pane fade in" id="web_development">
<div class="col-md-4">
<div class="progress">
<div style="width: 85%;" class="progress-bar"><span><HTML /></span> <i>85%</i></div>
</div>
<div class="progress">
<div style="width: 45%;" class="progress-bar"><span><?PHP</span> <i>45%</i></div>
</div>
<div class="progress">
<div style="width: 90%;" class="progress-bar"><span>{CSS}</span> <i>90%</i></div>
</div>
<div class="progress">
<div style="width: 70%;" class="progress-bar"><span>DESIGN</span> <i>70%</i></div>
</div>
</div><!-- Progress Bars Simple -->
<div class="col-md-8">
<h3> Website Development</h3>
<p>Maintaining your presence globaly is a deed now a days in terms of business expansion in which a website gives you
the best result. Website can also be used as applications where you can maintain your data and make mathematical
operations to obtain results. Websites are mainly of two types <i>Static</i> and <i>Dynamic</i>. A static website is an informational website which
contains all the business and contact informations about the organizatoin or individual , no changes can be made in
run time on a static website. whereas a dynamic website contains more flexibility where you can intereact with database
and make changes to your profile and data on run time. Dynamic websites are widely used because they can
be used as a application which can be operated from anywhere in the world without any installation or specific
requirements. We are developing websites on all the major languages like .Net, Java, Php. and back end on SQL Server and MYSQL.</p>
</div>
</div>
<div class="tab-pane fade in" id="mobile_app">
<div class="col-md-3">
<img alt="" src="images/resource/mobile.png" />
</div>
<div class="col-md-9">
<h3>Mobile Apps Development </h3>
<h2 style="font-size: large">Softwares plays the key role in maintaing records, data, accounts, ledger, stocks
in a corporate or in an Industry with ease and accuracy. Holding and maintaining large data was a challenge for
humen from years but after the evolution of technology its not a big deal now very complex calculations are
now solved in mili seconds. This evolution has increased the efficiency and accuracy of Industries and their
work.
We Provides software development for all types of business need list of softwares we are providing is:</h2>
<ul class="theme-list">
<li><i class="icon-check-sign"></i>✓ Android Application</li>
<li><i class="icon-check-sign"></i>✓ Windows Phone Application</li>
<li><i class="icon-check-sign"></i>✓ IOS Application</li>
</ul>
</div>
</div>
<div class="tab-pane fade in" id="soft_web_testing">
<div class="aligned">
<div class="col-md-3">
<img src="images/resource/testing.png" alt="" />
</div>
<div class="col-md-9">
<h3>Testing</h3>
<h2>We evaluate an attribute or capability of a program or system and determine that it meets its required results.</h2>
<p>Testing is an important part of a successful running product, Without testing the development is not completed.
We provides testing services to companies which are working in development field. <i></i></p>
</div>
</div>
</div>
<div class="tab-pane fade in" id="seo">
<div class="aligned">
<div class="col-md-3">
<img src="images/resource/seo.jpg" alt="" />
</div>
<div class="col-md-9">
<h3>Search Engine Optimization</h3>
<h2>Help your site to get placed at good rank in a search engine.</h2>
<p>Positioning <i>your website on top rank</i> in search engine(Google, Yahoo, Bing) search result is termed as SEO.
SEO is one of the most useful service for anyone who is running web based business, products and services are mostly searched on Search engines so if you
have a good rank their you will have get a better response among all the other rival sites.<i></i></p>
</div>
</div>
</div>
<div class="tab-pane fade in" id="graphic_design">
<div class="aligned">
<div class="col-md-3">
<img src="images/resource/graphic.jpg" alt="" />
</div>
<div class="col-md-9">
<h3>Graphic Designing</h3>
<h2>We Believe in developing Best Graphics according to our client's need.</h2>
<p>Graphic design is the art of communication, stylizing, and problem-solving through the use of type, space and image.
Our graphic design include identity (logos and branding), publications (magazines, newspapers and books),
print advertisements, posters, billboards, website graphics and elements, signs and product packaging.<i></i></p>
</div>
</div>
</div>
<div class="tab-pane fade in" id="marketing">
<div class="aligned">
<div class="col-md-3">
<img src="images/resource/marketing.jpg" alt="" />
</div>
<div class="col-md-9">
<h3>Advertising & Marketing</h3>
<h2>Experience the Power of Advertising & Marketing</h2>
<p>Social Meadia has a great reach to people, it connects people and group of people, and marketing you product on social media means
marketing directly to the end user. Most visited websites now a days are social media websites like facebook, twitter, google+
they are connected to billions of people. We are providing social media marketing on Facebook and Google+.<i></i></p>
</div>
</div>
</div>
</div>
<div class="list-group nav-tabs" id="myTab">
Software Development Web Development Mobile Apps Development Software/Web Testing Graphic Designing Social Marketing & Advertising
</div>
</div>
</div>
</section>
1 answers
solution1
0 2014-09-11 12:30:33
It's not a problem of alignment of sections and divisions , your whole layout needs to be configured for mobile . You can use media tag in css3 :
@media (max-width: 1024px){}
for tablet layout
and :
@media (max-width: 770px){}
for mobile layout
And in those tags you can use the same classes and IDs to override your styles to fit mobile and tablet layouts. I also recommend you resizing then uploading the software development image (since it's original size "1200px*1179px" is really disturbing on mobile ) and to give to your containers :
width:100%;
max-width:1024px;
in order to get a better structured and responsive ready layout .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to make HTML page responsive?
How to make simple HTML page more responsive?
How to make my HTML page responsive?
How to make part of HTML page responsive?
Make division image responsive
Make a image in division responsive
Need to make html page responsive
how to make this html responsive
how to make this page responsive
How to make this page responsive?
Related Tags