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>
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 .
Related
So I've been using bootstrap for a while, I've got a super simple grid setup that's working perfectly fine on Chrome/Firefox, but is stacking improperly in Safari:
Here's the markup, which I really can't see anything wrong with! Also visible live at www.inspiringtravelcompany.co.uk in case you're looking at any containing divs.
<div class="w-100 pb-5" style="background-color:#f7f7f7">
<div class="container">
<div class="row">
<div class="col-12 col-md-6 order-2 order-md-1">
<p class="fs-20 mb-2 ChronicleDeckSemiBold" style="line-height:1.3;">
You may have seen us recently during your favourite television programmes – and if not we’d love to share our brand new video with you.
</p>
<p class="fs-14 mb-2 ChronicleDeck">
Take a look, and you’ll spot some of our most popular destinations and favourite bucket list spots around the world.
</p>
<p class="fs-14 mb-2 ChronicleDeck">
Here at the Inspiring Travel Company we specialise in bespoke, personalised and tailor-made holidays around the world to the most amazing places; so whether you’re after a relaxing ‘fly and flop’ break or an intrepid tour, a bucket list safari or a trip to catch the world’s premier sporting events, our Travel Specialists are ready and waiting to offer first-hand insight.
</p>
</div>
<div class="col-12 col-md-6 order-1 order-md-2 mb-4 mb-md-0">
<iframe class="w-100" width="640" height="385" src="https://www.youtube.com/embed/x5sqxiO_muk">
</iframe>
</div>
</div>
</div>
</div>
I just don't get what the problem is!
Hopefully what I am looking to do makes some sense.
I am working on a project that will hopefully simplify an existing tool that is used on a regular basis. It is highly outdated both in style and language. What I have done so far as designed a sample layout to test the functionality of this tool. The HTML and CSS code is here for view as it does not display well as embedded html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
</head>
<body>
<div class="w3-container w3-black w3-center">
<h2 class="w3-text-red">Tool</h2>
</div>
<div class="w3-row-padding w3-margin-top">
<div class="w3-col" style="width:20%;">
<div class="w3-container">
<button onclick="document.getElementById('id01').style.display='block'" class="w3-btn">A***0</button>
<div id="id01" class="w3-modal">
<div class="w3-modal-content">
<div class="w3-container w3-card-8">
<span onclick="document.getElementById('id01').style.display='none'" class="w3-closebtn">×</span>
<p>Name:</p>
<p>Service 1:</p>
<p>Service 2:</p>
<p>Service 3:</p>
<p>Service 4:</p>
<p>Devices:</p>
<div class="w3-row-padding w3-margin-top">
<div class="w3-col" style="width:20%;">
<a target="_blank" href="#"><img src="" alt="Device 1"></a>
</div>
</div>
<div class="w3-row-padding w3-margin-top">
<div class="w3-col" style="width:20%;">
<img src="" alt="Device 2">
</div>
</div>
<div class="w3-row-padding w3-margin-top">
<div class="w3-col" style="width:20%;">
<img src="" alt="Device 3">
</div>
</div>
<div class="w3-row-padding w3-margin-top">
<div class="w3-col" style="width:20%;">
<img src="" alt="Device 4">
</div>
</div>
<div class="w3-row-padding w3-margin-top">
<div class="w3-col" style="width:20%;">
<a target="_blank" href="#"><img src="" alt="Device 5"></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
When this is run in Chrome (used as corporate settings for IE block some code) you get a very small sample of the page (again simple testing purpose here).
This is using straight HTML/CSS3 to bring up a page with buttons. When the buttons are clicked the bring up a MODAL that will display specific information. As of now all the tags are very generic as this is for work and certain info is proprietary. What I am looking to do (again simple, needed only for testing) is when the button is clicked to bring up the MODAL that info will be passed from a database to fill in the info for that specific listing in the MODAL.
Example: Service 1 in MODAL needs to pull info from a database for a specific client/customer.
I am looking for the easiest way to do this on a local machine. I am not looking for building the entire database or deploying on corporate servers at that is way above my pay-grade and experience.
I currently have very limited experience in asp.net MVC4 and SQL (Meaning I have just started learning both and have completed the MVC Music Store Tutorial) So I think that I could build something with that but wanted to know if there was an easier way to do so with just html/css and possibly MSACCESS as I have access to that while working.
I am currently building the DB in ACCESS and that should be done in the next day or so depending on how busy I am with my other job functions.
Any assistance would be greatly appreciated. Thank you all for you time.
Edit: Is this possible using JavaScript and a Database file or would i definitively need to be running some type of server (even IIS) to make this possible. I am very limited in the tools I have on my work system.
HTML and CSS deal with presentation and layout, comprising the front-end. Your database and application language of choice (C#, PHP, etc) comprise the back-end.
It sounds like you would want to either develop this as an MVC project or use JavaScript to perform AJAX requests. The AJAX request would receive data from some sort of controller action or application page and display it where you want.
There are lots of different ways of getting and manipulating data; it's all very subjective and depends on your requirements. This is a question that you will need to answer on your own.
I have two bootstrap items one col-md-5 and one col-md-4. But i want to centered these two items in the middle of the page, both of them. Now my col-md-4 is at the left side of the page and the col-md-5 is at the middle of the page. Has anyone an idea how to centered these two items without use only margin.
<div class="col-md-4">
<div class="klantcases">
<h2>Company</h2>
<li>Over ons</li>
<li>Kernwaarden</li>
<li>Missie en visie</li>
<li>Nieuws</li>
<li>Blog</li>
<li>Development Blog</li>
<li>Marketing Blog</li>
<li>Development</li>
<li>Marketing</li>
<li><a href="#">Werken bij ons></li>
</div>
<div class="col-md-5">
<div class="blogpreview">
<img src="img/kan.png" alt="kan" /><h1>The latest from our</br>
DEVELOPMENT BLOG</h1>
<img src="img/bloglaptop.jpg" alt="bloglaptopcode" />
<div class="bloginfo"><h2>Woensdag 15 april 2015 - 12:05</h2></br></br>
<h1>CSS styleable, vector based icons on every device (even IE8)</h1>
<p>Icons have always been an important part of an interface. They allow the user to recognize certain actions with only a glance. In this blog, we will look for a complete and closing solution to render css-styleable icons that are supported by older browsers while still looking great on modern retina displays.</p>
<h3 class="leesmeer">LEES MEER</h3>
</div>
<div class="meer">
<h2>Maandag 13 april 2015 - 13:19</h2>
<h1>Inline video on the iPhone</h2>
<p>video has come a long way. We went from nitrate film, tape and VHS to digital video. From black and white tubes to full color 4k flatscreen televisions. And from static desktop environments to video more and more being something that you take with you by watching it on your mobile device. </p>
<h3 class="leesmeer">LEES MEER</h3>
</div>
<div class="meer">
<h2>Maandag 30 maart 2015 - 18:30</h2>
<h1>Video in email: today or tomorrow?</h2>
<p>You can and should be using video in email today! Video in email often is "the" missing link in business to consumer email communication. We did a lot of technical research and development and want to share some of the results with you today. </p>
<h3 class="leesmeer">LEES MEER</h3>
</div>
<img src="img/pfoon.png" alt="pfoon" /> <h1>The latest from our</br>
MARKETING BLOG</h1>
<img src="img/iphone.jpg" alt="iphonehand" />
<div class="bloginfo2"><h2>Woensdag 15 april 2015 - 12:05</h2></br></br>
<h1>CSS styleable, vector based icons on every device (even IE8)</h1>
<p>Icons have always been an important part of an interface. They allow the user to recognize certain actions with only a glance. In this blog, we will look for a complete and closing solution to render css-styleable icons that are supported by older browsers while still looking great on modern retina displays.</p>
<h3 class="leesmeer">LEES MEER</h3>
</div>
<div class="meer">
<h2>Maandag 13 april 2015 - 13:19</h2>
<h1>Inline video on the iPhone</h2>
<p>video has come a long way. We went from nitrate film, tape and VHS to digital video. From black and white tubes to full color 4k flatscreen televisions. And from static desktop environments to video more and more being something that you take with you by watching it on your mobile device. </p>
<h3 class="leesmeer">LEES MEER</h3>
</div>
<div class="meer">
<h2>Maandag 30 maart 2015 - 18:30</h2>
<h1>Video in email: today or tomorrow?</h2>
<p>You can and should be using video in email today! Video in email often is "the" missing link in business to consumer email communication. We did a lot of technical research and development and want to share some of the results with you today. </p>
<h3 class="leesmeer">LEES MEER</h3>
</div>
</div>
You can offset columns in bootstrap. See Docs.
By using a class such as, col-md-offset-4 you can push your columns across the page.
In your case you would need to adjust your columns to make up an even total, e.g. col-md-4 and col-md-6, and then add col-md-offset-1 to offset the first column by 1 column.
Since the Bootstrap default grid has 12 columns, you cannot center the 9 columns grid with the default Bootstrap offsets. So all you need to do is create a custom 1.5 offset (which left margin would be equal to 1.5/12*100% = 12.5%) and apply it to the .col-md-4 container:
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-custom">...</div>
<div class="col-md-5">...</div>
</div>
<!-- / .row -->
</div>
<!-- / .container -->
#media(min-width: 992px && max-width: 1199px) {
.col-md-offset-custom {
margin-left: 12.5%;
}
}
JSFiddle: http://jsfiddle.net/Lq06L4hb/2/
I installed a bootstrap theme for Wordpress but I'm experiencing an issue with grid alignment.
See: Click Here in Products&Services.
'Seed' should be on the left and 'Other Products' on the right aligned with the second element 'LeafLine'.
What could that be?
You can also just add a clearfix element after the leafline div to fix this layout.
<div class="clearfix"></div>
More information can be found here: http://getbootstrap.com/css/#grid-responsive-resets
This is an easy fix. You just need to put the content into either two rows, or two columns. Because there is more text on the first left-side block, the Seed block is getting pushed out. You will just need to increase padding below the rows.
Example with rows: http://www.bootply.com/PjWnLEAOMT
<div class="row">
<div class="col-sm-6">
<div class="media services">
<div class="media-body">
<h3 class="media-heading">Primo</h3>
This is Leaf Space main project. A super lightweight two-stage launch vehicle able to bring up to 50 kg to Low Earth Orbit. The use of composite materials and hybrid proprulsive technology make Primo extremely safe, reliable and enviromental friendly, ensuring precise orbit inserction and extremely low risk of failure. All the components are designed with reusability in mind for future implementation of a reusable launch vehicle. </div>
</div>
</div>
<div class="col-sm-6">
<div class="media services">
<div class="media-body">
<h3 class="media-heading">LeafLine</h3>
A ground stations network exclusively dedicated to nano, micro and smallsats is under development. LeafLine can support several orbits and different transmission protocols. A direct encrypted online link ensures simple and safe data collection and control transmissions to satellite operators. </div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="media services">
<div class="media-body">
<h3 class="media-heading">Seed</h3>
Thanks to its great versatility and reliability, hybrid propulsion can be used for several applications. Leaf Space is developing Seed, a next generation hybrid rocket motor designed for in space applications such as:
<ul>
<li>orbital maneuvers</li>
<li>re-orbiting</li>
<li>de-orbiting</li>
</ul>
The first design is dedicated to nano and microsats, other future improved versions will serve also heavier satellites. </div>
</div>
</div>
<div class="col-sm-6">
<div class="media services">
<div class="media-body">
<h3 class="media-heading">Other Services</h3>
Other Services
To complete the offer of Leaf Space, a series of services dedicated to nano and microsatellites will be available, also in collaboration with other companies. Among them:
<ul>
<li>transportations</li>
<li>technical advice</li>
<li>satellite integration in the payload vain</li>
<li>safety and law issues</li>
</ul> </div>
</div>
</div>
</div>
Example with two columns: http://www.bootply.com/bms2sLZ1ZJ
<div class="row">
<div class="col-sm-6">
<div class="media services">
<div class="media-body">
<h3 class="media-heading">Primo</h3>
This is Leaf Space main project. A super lightweight two-stage launch vehicle able to bring up to 50 kg to Low Earth Orbit. The use of composite materials and hybrid proprulsive technology make Primo extremely safe, reliable and enviromental friendly, ensuring precise orbit inserction and extremely low risk of failure. All the components are designed with reusability in mind for future implementation of a reusable launch vehicle. </div>
</div>
<div class="media services">
<div class="media-body">
<h3 class="media-heading">Seed</h3>
Thanks to its great versatility and reliability, hybrid propulsion can be used for several applications. Leaf Space is developing Seed, a next generation hybrid rocket motor designed for in space applications such as:
<ul>
<li>orbital maneuvers</li>
<li>re-orbiting</li>
<li>de-orbiting</li>
</ul>
The first design is dedicated to nano and microsats, other future improved versions will serve also heavier satellites. </div>
</div></div>
<div class="col-sm-6">
<div class="media services">
<div class="media-body">
<h3 class="media-heading">LeafLine</h3>
A ground stations network exclusively dedicated to nano, micro and smallsats is under development. LeafLine can support several orbits and different transmission protocols. A direct encrypted online link ensures simple and safe data collection and control transmissions to satellite operators. </div>
</div><div class="media services">
<div class="media-body">
<h3 class="media-heading">Other Services</h3>
Other Services
To complete the offer of Leaf Space, a series of services dedicated to nano and microsatellites will be available, also in collaboration with other companies. Among them:
<ul>
<li>transportations</li>
<li>technical advice</li>
<li>satellite integration in the payload vain</li>
<li>safety and law issues</li>
</ul> </div>
</div></div>
</div>
Obviously the second produces a cleaner result as far as padding goes.
I have a multi page document and the home page links to other pages without a hitch however if I try to link to another page from the content of a page it does nothing, the link is just dead. same on mobile and desktop. Here is the code for the whole of page 4 (the page where I am trying to insert these links) My document has 7 pages in total. The first issue is on line 16, my link is:
<a href="#webdesign">
however this does nothing even though I have a page called 'webdesign'
<!-- Start of fourth page -->
<script>
$(document).on('click', 'a.webdesign', function () { $.mobile.changePage('#webdesign'); });
</script>
<div data-role="page" id="services">
<div data-role="header1">
<div align="center"><img src="http://www.magnetikmedia.co.uk/m/images/magnetikmedia_header.png" width="90%"></div>
</div>
<div>
<div align="center"><img src="http://www.magnetikmedia.co.uk/m/images/services_banner.png" width="100%"></div>
</div><!-- /header -->
<div data-role="content">
<div data-role="collapsible-set">
<div data-role="collapsible" data-collapsed="true">
<h3>Website Design</h3>
<p>We offer a full website design service whether you are looking for a basic, low maintenance site to create your online presence, a responsive site to attract more mobile browsers or an advanced, dynamic e-commerce site to power your business to the next level. We also offer a website content management service so whether you need any information editing or amending your current site or would like a page or two adding then we can do this for you. Read more about our website design services</p>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>facebook Development</h3>
<p>The most striking part of any facebook business page is the cover image. This, along with your profile, can make or break a facebook page. We design custom cover images perfectly suited to your industry and business to really enable you to stand out and make visitors want to 'like' you! Read more about facebook timeline design</p>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>twitter Design</h3>
<p>We can create custom backgrounds for your Twitter pages that can incorporate your logo, contact details or, in fact, anything you like. This helps you move one step closer to catching the eye of potential customers who will be passing by (and there will be a lot based on the fact there are over 140 million active users!) Read more about twitter design</p>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>Email Marketing</h3>
<p>Our dynamic e-mail campaign service means we can create a custom newsletter, an advert for a special offer or just a courtesy message to your customer base that is professionally designed and can be mailed out to as many customers as you wish. Not only that but it will be fully trackable so you can keep tabs on who has read the email or who has yet to open it. We can even add a secure, online subscription form to your website or facebook page where potential new customers can sign up to your mailing campaigns which are then integrated automatically so they are ready to be included in your next mailout. Read more about email marketing</p>
</div>
<div data-role="collapsible" data-collapsed="true">
<h3>Animation</h3>
<p>From animated email footers to full promotional videos, flash animation can be a useful tool to showcase your product or services to the world in an attractive and fun way. Read more about our animation services</p>
</div>
</div>
<div align="center"><!-- /content -->
<div id="footer1">
<div id="footer_left">
<div align="center"><img src="http://www.magnetikmedia.co.uk/m/images/fbook_foot.png" width="30" height="30" style="margin-right:10px;" ><img src="http://www.magnetikmedia.co.uk/m/images/twitter_foot.png" width="30" height="30" style="margin-right:10px;" ><img src="http://www.magnetikmedia.co.uk/m/images/blogger_foot.png" width="30" height: "30" style="margin-right:10px;" ><img src="http://www.magnetikmedia.co.uk/m/images/linkedin_foot.png" width="113" height="30" style="margin-right:10px;" ></div>
</div>
<div style="clear:both;"></div>
</div>
</div>
<div align="center"><!-- /footer -->
There was one closing div missing, added that and all fixed.