On a large screen, my widget looks perfect, but when I switch to mobile view, it becomes problematic.
The widget consists of a title section with two additional fields that need to be floated to the right and occupy only as much width as the text inside them. The title-text, on the left, should take up the remaining space.
You can see what it currently looks like here.
Here's a snippet of my HTML:
<div class="widget">
<div class="section-title">
<div class="title-info">
<div class="info-2">Info 2</div>
<div class="info-1">Info 1</div>
</div>
<div class="title-text">Title</div>
</div>
</div>
And here's the CSS:
.section-title {
height: 100%;
font-size: 1.3em;
color: white;
}
.section-title .title-text {
background-color: #3261AD;
padding: 20px;
}
.section-title .title-info {
display: inline-block;
float: right;
}
.section-title .info-1{
background-color: #264D8C;
padding: 20px;
display: inline-block;
float: right;
}
.section-title .info-2{
background-color: #5BB75B;
padding: 20px;
display: inline-block;
float: right;
}
@media (max-width: 420px) {
.section-title .title-text {
/* ??? */
display: block;
width: 100%;
float: left;
}
.section-title .title-info {
/* ??? */
display: block;
width: 100%;
}
}
When I resize the screen width, the layout gets messed up. How can I get the title-info to stack below the title-text without rearranging the divs? I want it to look like the image here without compromising the full-width design or creating a separate markup for mobile.