When creating a style sheet for mobile devices, I encountered an issue where the text was displayed in two columns instead of one column like on desktop.
I'm questioning whether the positioning applied to the divs is causing this problem.
Please refer to this fiddle http://jsfiddle.net/vtdo8vc0/
#col1 {
position: relative;
display: inline;
float: left;
width: 94%;
padding-right: 3%;
padding-left: 3%;
}
#col2 {
position: relative;
display: inline;
float: left;
width: 94%;
padding-right: 3%;
padding-left: 3%;
}
.col {
font-family: 'Avenir-Book';
font-size: 12px;
line-height: 16px;
font-weight: 500;
}
#main_content {
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
}
#main_content img {
width: 100%;
height: auto;
padding-bottom: 30px;
}
#header {
position: relative;
padding-top: 3%;
padding-left: 3%;
padding-right: 3%;
padding-bottom: 3%;
}
.header {
font-family: 'Avenir-Book';
font-size: 26px;
line-height: 26px;
text-transform: uppercase;
font-weight: 900;
}<div id="container">
<div id="header">
<div class="header">
food
</div>
</div>
<div id="col1">
<div class="col">
At Danny’s we believe food is very important! Kevin our Head Chef has a wealth of experience and a passion to rival that experience. Wherever possible our food is created using the very best locally sourced ingredients. Whether you are
</div>
</div>
<div id="col2">
<div class="col">
popping in for a lunchtime wrap or a full blown Danny's Burger you can expect the same level of service and attention to detail.
<br>
<br>Check out our menu below.
</div>
</div>
<div id="main_content">
<img src="http://placehold.it/350x150" />
</div>
</div>