I'm trying to do layout like the image but i failed to do .
My code:
<div>
<div style="float: left; width: 70%">I'm on the left</div>
<div style="float: left; width: 30%"><img src="https://i.ibb.co/C7SNdjk/cimb-foundation-image.png" width="100%"></div>
</div>
<div>
<div style="float: left; width: 30%"><img src="https://i.ibb.co/C7SNdjk/cimb-foundation-image.png" width="100%"></div>
<div style="float: left; width: 70%">I'm on the second on the left</div>
</div>
<div>
<div style="float: left; width: 70%">I'm on the left</div>
<div style="float: left; width: 30%"><img src="https://i.ibb.co/C7SNdjk/cimb-foundation-image.png" width="100%"></div>
</div>
Any ways that i could achieve the layout i need?
add width: 100%; float:left; to parent divs like below
<div style="width: 100%; float:left; margin-bottom: 30px;">
<div style="float: left; width: 70%; background: green">I'm on the left</div>
<div style="float: left; width: 30%; background: red"><img src="https://i.ibb.co/C7SNdjk/cimb-foundation-image.png" width="100%"></div>
</div>
<div style="width: 100%; float:left; margin-bottom: 2px">
<div style="float: left; width: 30%; background: green"><img src="https://i.ibb.co/C7SNdjk/cimb-foundation-image.png" width="100%"></div>
<div style="float: left; width: 70%; background: red">I'm on the second on the left</div>
</div>
<div style="width: 100%; float:left;">
<div style="float: left; width: 70%; background: green">I'm on the left</div>
<div style="float: left; width: 30%; background: red"><img src="https://i.ibb.co/C7SNdjk/cimb-foundation-image.png" width="100%"></div>
</div>
When you float items, they lose their height. When you add a minimum height to the parent divs, the problems will be fixed.
<div style="min-height: 150px;">
<div style="float: left; width: 70%">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div style="float: left; width: 30%">
<img src="https://i.ibb.co/C7SNdjk/cimb-foundation-image.png" width="100%">
</div>
</div>
<div style="min-height: 150px;">
<div style="float: left; width: 30%"><img src="https://i.ibb.co/C7SNdjk/cimb-foundation-image.png" width="100%"></div>
<div style="float: left; width: 70%">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
<div style="min-height: 150px;">
<div style="float: left; width: 70%">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div style="float: left; width: 30%"><img src="https://i.ibb.co/C7SNdjk/cimb-foundation-image.png" width="100%"></div>
</div>
Many ways to achieve this
Can add direction:rtl to second parent div
Can change order of second div so div with image is after div with text.
Can float img right in second div
can use display:flex and flex-direction:row-reverse
You could go with flexbox and make use of flex-direction: row-reverse;. The flex property on the child elements (image and text) defines the ratio, in this case, the text with flex: 3 is three times bigger than the image.
Flexbox Browser support: https://caniuse.com/#search=flexbox
.section {
display: flex;
padding-bottom: 1rem;
}
.section--reversed {
flex-direction: row-reverse;
}
.section__text {
flex: 3;
border: 1px dashed tomato;
}
.section__image {
flex: 1;
border: 1px dashed tomato;
}
<div class="section">
<div class="section__text">Here is some text</div>
<div class="section__image">here is an image</div>
</div>
<div class="section section--reversed">
<div class="section__text">Here is some text</div>
<div class="section__image">here is an image</div>
</div>
padding and border are only for demo purposes
Related
Suppose I have some fixed-size container and I want all elements to fit inside, but I don't know all heights of inside elements. Some element has lots of text, so I set overflow: hidden. But this element ignores the height of container and just stretches to fit contents. How do I do it right?
Edit: if I set overflow on my container, overflowing text will be hidden, but bottom padding will be ignored (see 2nd snippet). How do I cut text 5px from the bottom border, so all sides look equal?
.outer {
width: 200px;
height: 200px;
}
.inner {
padding: 5px;
background-color: #ccc;
height: 150px;
border: 1px solid black;
}
.text {
overflow: hidden;
}
<div class="outer">
<div class="inner">
<span style="color: red">Some element so we can't make text 100% height</span>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
</div>
<div>Some other text</div>
</div>
.outer {
width: 200px;
height: 200px;
}
.inner {
padding: 5px;
overflow: hidden;
background-color: #ccc;
height: 150px;
border: 1px solid black;
}
.text {
overflow: hidden;
}
<div class="outer">
<div class="inner">
<span style="color: red">Some element so we can't make text 100% height</span>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
</div>
<div>Some other text</div>
</div>
You can nest an additional div inside of .inner (I used .inner2 in this example, you can come up with a more meaningful name! :) ).
Basically, you need to separate the background/border from the container that will control the overflow (as you're right, overflow goes to the edge of the element, it doesn't care about padding).
Just an example, but I added a second div (.inner2) inside of .inner and moved the the height and overflow rules to that one instead. The background/padding/border stay put.
Edit: Added a lime border to inner2 to better illustrate what's happening.
.outer {
width: 200px;
height: 200px;
}
.inner {
padding: 5px;
background-color: #ccc;
border: 1px solid black;
}
.inner2 {
height: 150px;
overflow: hidden;
border: 1px solid lime;
}
.text {
}
<div class="outer">
<div class="inner">
<div class="inner2">
<span style="color: red">Some element so we can't make text 100% height</span>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</div>
</div>
</div>
<div>Some other text</div>
</div>
I am having issues getting .gridSecBlock to expand with height:auto in my viewport < 640. If you click on the jsfiddle link below and modify the viewport to be less than 640 pixels, you will see that the .gridSecBlock for the content .gridText isn't expanding like it should with height: auto. I have a min-height set, but do not want to have to adjust this for so many media queries.
Then for some reason my total-center class isn't centering the .gridSecBlock vertically for the content blocks.
Does anyone see what I am doing wrong?
Jsfiddle link to see mobile viewport
.total-center {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
}
.left {
float: left;
}
.right {
float: right;
}
.gridSecCont {
display: block;
height: 70vh;
}
.gridSecWrap {
width: 100%;
position: relative;
}
.gridSecBlock {
width: 50%;
height: 100%;
display: inline-block;
vertical-align: top;
position: relative;
overflow: hidden;
}
.gridSecBlock img {
width: 100%;
height: 100%;
object-fit: cover;
}
.gridSecText {
text-align: left;
}
.gridSecBlockWrap {
width: 65%;
}
/*---------------------------------------------- MEDIA QUERY 640 --------------------------------------------*/
#media screen and (max-width:640px) {
/*--- Grid Section --*/
.gridSecCont {
display: block;
height: auto;
}
.gridSecBlock {
width: 100%;
height: auto;
display: block;
min-height: 270px;
}
.gridSecBlockWrap {
width: 75%;
height: auto;
padding: 10px 0;
}
}
<section id="gridSec">
<div class="gridSecWrap">
<div class="gridSecCont">
<div class="gridSecBlock left">
<img src="https://cdn-image.travelandleisure.com/sites/default/files/styles/1600x1000/public/1513398884/cacimba-do-padre-beach-brazil-365BEACHES1217B.jpg?itok=DUFLlpiW">
</div><div class="gridSecBlock right gridText">
<div class="total-center gridSecBlockWrap">
<p class="dG gridSecText">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>
</div>
</div>
</div>
<div class="gridSecCont">
<div class="gridSecBlock right">
<img src="https://cdn-image.travelandleisure.com/sites/default/files/styles/1600x1000/public/1513398884/cacimba-do-padre-beach-brazil-365BEACHES1217B.jpg?itok=DUFLlpiW">
</div><div class="gridSecBlock left gridText">
<div class="total-center gridSecBlockWrap">
<p class="dG gridSecText">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>
</div>
</div>
</div>
</div>
</section>
I think you can achieve what you are going for much easier with flexbox. I cleaned it up a bit and got rid of seemingly unnecessary divs and other styles.
Threw it into a codepen as well: https://codepen.io/samandalso/pen/MXbYNz
.gridSecCont {
display: flex;
justify-content: center;
align-items: center;
height: 70vh;
}
.gridSecWrap {
width: 100%;
position: relative;
}
.gridSecBlock {
overflow: hidden;
flex-basis: 50%;
}
.gridSecBlock img {
width: 100%;
height: 100%;
object-fit: cover;
}
.gridSecText {
text-align: left;
flex-basis: 50%;
padding: 3rem;
}
/*---------------------------------------------- MEDIA QUERY 640 --------------------------------------------*/
#media screen and (max-width:640px) {
/*--- Grid Section --*/
.gridSecCont {
display: block;
height: auto;
}
.gridSecBlock {
width: 100%;
height: auto;
display: block;
min-height: 270px;
}
.gridSecBlockWrap {
width: 75%;
height: auto;
padding: 10px 0;
}
}
<section id="gridSec">
<div class="gridSecWrap">
<div class="gridSecCont">
<div class="gridSecBlock left">
<img src="https://cdn-image.travelandleisure.com/sites/default/files/styles/1600x1000/public/1513398884/cacimba-do-padre-beach-brazil-365BEACHES1217B.jpg?itok=DUFLlpiW">
</div>
<div class="gridSecBlock right gridText">
<p class="dG gridSecText">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>
</div>
</div>
<div class="gridSecCont">
<div class="gridSecBlock right">
<img src="https://cdn-image.travelandleisure.com/sites/default/files/styles/1600x1000/public/1513398884/cacimba-do-padre-beach-brazil-365BEACHES1217B.jpg?itok=DUFLlpiW">
</div>
<div class="gridSecBlock left gridText">
<div class="total-center gridSecBlockWrap">
<p class="dG gridSecText">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>
</div>
</div>
</div>
</div>
</section>
I have encountered a problem when I am using html to develop a website. Basically, I have two div tags align side by side. However, when the content of the first div tag is too long, the content may take more than one line to be displayed. Since the content in the second div is quite short, it only need one line to be displayed.
<div style="float:left;width:80%;">XXX ... XXX</div>
<div align="right" style="float:right;width:20%;">YYY</div>
In this case, the end of the content does not align with each other. When I add one more (the third) div tag, the content will go after the first tag rather than start a new line. I have attached two images to show the problem and what I want from the solution.
Use style="clear:both" on the third div.
<div style="float:left; width: 80%">text 1<br>text 1</div>
<div style="float:right; width: 20%">text 2</div>
<div style="clear:both">text 3</div>
you can add an extra <div>, and apply the style clear both to it
.one {
width: 48%;
margin-right:2%;
float: left;
height: 150px;
background-color: red;
}
.two {
width: 48%;
float: left;
height: 100px;
background-color: blue;
}
.clear {
clear: both;
}
.three {
width: 100%;
margin-top: 10px;
background-color: green;
height: 50px;
}
<div class="one"> div 1 </div>
<div class="two"> div 2 </div>
<div class="clear"></div>
<div class="three"> div 3 </div>
Please, try use this:
#container .col-1 {width: 20%;}
#container .col-2 {width: 40%;}
#container .col-3 {width: 60%;}
#container .col-4 {width: 80%;}
#container {
width: 100%;
display: inline-block;
font-size: 75%;
}
#container > div {
float: left;
width: 100%;
padding: 0 15px;
box-sizing: border-box;
}
<div id="container">
<div class="tag-1 col-4">
<h1>Tag 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="tag-2 col-1">
<h1>Tag 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
</div>
<div class="tag-3">
<h1>Tag 3</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
Floated elements, effect their siblings and this floated behaviors needs to remove otherwise it might leads to many issues as you mentioned. Also parent of floated element doesn't take height until unless floating behavior is cleared.
Modern browser handles it for us but still we should write a clean code.
We can clear floated effect as:
.clearfix:after {
content: "";
display: table;
clear: both;
}
<div class="clearfix">
<div style="float:left;width:80%;">XXX ... XXX</div>
<div align="right" style="float:right;width:20%;">YYY</div>
</div>
How can i make a div grow max size to the bottom. and stop when it reaches a absolute positioned div at the bottom. I right now have this:
div {
position: relative;
display: block;
border: 1px solid black;
}
.wrap {
clear: both;
width: 60%;
display: block;
heigth: 150px;
}
.img {
float: left;
width: 150px;
height: 150px;
margin-right: 15px;
}
.right {
height: 150px;
overflow: hidden;
}
.details {
position: absolute;
bottom: 0;
}
.title {
display: block;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
<div class="wrap">
<div class="img">
img
</div>
<div class="right">
<div class="hover">
<div class="title">
<h5>lots of text</h5>
</div>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
<div class="details">
<span>some link and detail</span>
</div>
</div>
</div>
<div class="wrap">
<div class="img">
img
</div>
<div class="right">
<div class="hover">
<div class="title">
<h5>litle text</h5>
</div>
<div class="text">
lorum ipsum
</div>
</div>
<div class="details">
<span>some link and detail</span>
</div>
</div>
</div>
<div class="wrap">
<div class="img">
img
</div>
<div class="right">
<div class="hover">
<div class="title">
<h5>Very long title that does not fit on one line with all these words and so on on on on on</h5>
</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<div class="details">
<span>some link and detail</span>
</div>
</div>
</div>
<div class="wrap">
<div class="img">
img
</div>
<div class="right">
<div class="hover">
<div class="title">
<h5>large detail text</h5>
</div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<div class="details">
<span>allot of details that don't fit on one line and so on on on on on on on on</span>
</div>
</div>
</div>
I want .text to grow maximum in height while .title and .detail can be dynamic in height because of the content.
Have you tried using Materialize CSS for this design? The way you'd like to design your sections are similar to "cards". This answer on stackoverflow contains the original code from my example, https://stackoverflow.com/a/32271807/5914723
Example jsFiddle
HTML
Card Title
I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.
This is a link
<hr>
CSS
.card-image {
float: left;
width: 40%;
height: 150px;
}
.card-image img {
height: 100%;
}
.right-content {
width: 60%;
float: left;
height: 250px;
}
.card-title {
padding-left: 20px;
height: 10%;
}
.card-action {
height: 10%;
}
hr {
display: block;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: auto;
margin-right: auto;
border-style: inset;
border-width: 1px;
}
Does any one know why my text keeps pushing my 1 block element down? When i remove the text, the block elements are perfectly inline with each other.
<div class="item-0" align="center">
<div class="row">
<div class="col-lg-12">
<div class="body-0">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div><!-- body-0 -->
<div class="image-0">
<img src="images/ios_android_devices2.png" class="img-responsive" alt="ios_android" id="ios_android">
</div><!-- image-0 -->
</div><!-- col12 -->
</div><!-- row -->
</div><!-- item-0 -->
CSS is as follows
.item-0 {
background-color: green;
}
.body-0{
display: inline-block;
background-color: red;
max-width: 100;
width: 400px;
height: 250px;
}
.image-0 {
display: inline-block;
height: 250px;
max-width: 100;
width: 300px;
background-color: #ccc;
}
Use vertical-align:top;:
.image-0 {
display: inline-block;
height: 250px;
max-width: 100;
width: 300px;
background-color: #ccc;
vertical-align:top;
}
.body-0{
display: inline-block;
background-color: red;
max-width: 100;
width: 400px;
height: 250px;
vertical-align:top;
}
Codepen
Use vertical-align:top to align the inline blocks with each other (note: use the "Full page" option in the demo to see the effect):
.item-0 {
background-color: green;
}
.body-0{
display: inline-block;
vertical-align:top;
background-color: red;
max-width: 100;
width: 400px;
height: 250px;
}
.image-0 {
display: inline-block;
vertical-align:top;
height: 250px;
max-width: 100;
width: 300px;
background-color: #ccc;
}
<div class="item-0" align="center">
<div class="row">
<div class="col-lg-12">
<div class="body-0">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div><!-- body-0 -->
<div class="image-0">
<img src="images/ios_android_devices2.png" class="img-responsive" alt="ios_android" id="ios_android">
</div><!-- image-0 -->
</div><!-- col12 -->
</div><!-- row -->
</div><!-- item-0 -->