Apologies in advance for the lengthy post, but I welcome any suggestions and ideas. Thank you!
I'm facing an issue with my layout breaking when the screen size is below 1200px (images and text drop down). I don't mind if they stack vertically on smaller browsers, as long as each item is correctly positioned under the corresponding heading.
Heading 1
8:00am
Lorem ispum
Lorem ispum
Lorem ispum
8:30am
Lorem ispum
Lorem ispum
Lorem ispum
Heading 2
9:00am
Lorem ispum
Lorem ispum
Lorem isum
And so forth...
My question is, what would be the optimal way to make this layout work effectively on mobile devices and smaller screens? I've tried using Bootstrap's img-responsive class, but I haven't seen a noticeable change in the image - it's possible that I'm not using it correctly. I expected it to resize the image.
Additionally, in the provided screenshot, there are 3 headings with 4 associated times. What is the best approach to align each heading with its respective time slot (Heading 1 having two times)? Currently, the associated times of "Heading 2" and "Heading 3" seem slightly off to the left. I attempted adding padding/margin to adjust this, but it didn't resolve the issue.
<div class='tours-information'>
<div class='container'>
<div class='row'>
<div class='col-md-9'>
<div id='schedule'>
<h2>Schedule</h2>
<!--- wrapper for each day -->
<div class='clearfix'>
<h3 class='rounded-heading'>Main heading</h3>
</div>
<div class="media">
<h5 class="media-heading pull-left ">Heading 1</h5>
<img class="media-object pull-left img-responsive" src="img/long_blue_arrow.png" alt="..." />
<h5 class="media-heading pull-left">Heading 2</h5>
<img class="media-object pull-left img-responsive" src="img/short_blue_arrow.png" alt="..." />
<h5 class="media-heading pull-left">Heading 3</h5>
</div>
<div class='schedule-location'>
<div class='col-md-3'>
<h4>8:00am</h4>
<div class='schedule-address'>
<address>
Lorem ispum<br>
Lorem ispum<br>
<span class='schedule-location-name'>(Lorem ispum)</span>
</address>
</div>
</div>
</div>
<div class='schedule-location'>
<div class='col-md-3'>
<h4>8:30am</h4>
<div class='schedule-address'>
<address>
Lorem ispum<br>
Lorem ispum<br>
<span class='schedule-location-name'>(Lorem ispum)</span>
</address>
</div>
</div>
</div>
<div class='schedule-location'>
<div class='col-md-3'>
<h4>9:00am</h4>
<div class='schedule-address'>
<address>
Lorem ispum<br>
Lorem ispum<br>
<span class='schedule-location-name'>(Lorem ispum)</span>
</address>
</div>
</div>
</div>
<div class='schedule-location'>
<div class='col-md-3'>
<h4>10:00am</h4>
<div class='schedule-address'>
<address>
Lorem ispum<br>
Lorem ispum<br>
<span class='schedule-location-name'>(Lorem ispum)</span>
</address>
</div>
</div>
</div>
#schedule {
background-color: #fff;
float: left;
padding: 2px 25px 25px;
}
#schedule img {
margin-top: 3px;
}
#schedule h2 {
font-size: 35px;
margin-bottom: 0px;
}
#schedule h3 {
font-size: 28px;
}
#schedule h4 {
font-size: 30px;
}
.rounded-heading {
display:block;
clear:right;
float:left;
padding: 1.5%;
width:auto;
height:auto;
border-radius:10%;
-moz-border-radius:10%;
-webkit-border-radius:10%;
-khtml-border-radius: 10%;
background:#eee;
text-align:center;
}