Hi!
I’m making a simple application that is giving me a problem when I adjust the browser size with columns.
When I adjust the above to the following screen size below, the column drops down below the card in the middle:
My code snippet is as follows:
<div class="row responsive-sm"> <div class="col col-10"></div> <div class="col col-20"> <img class="big_image" src="{{global_data.home_logo_path}}"> </div> <div class="col card"> <div class="row"> <div class="col" align="left"> <h1>{{global_data.home_score}}</h1> </div> <div class="col" align="center"> <h2>{{global_data.quarter}}</h2> <h3>{{global_data.time_left}}</h3> </div> <div class="col" align="right"> <h1>{{global_data.away_score}}</h1> </div> </div> </div> <div class="col col-20"> <img class="big_image" style="float: right;" src="{{global_data.away_logo_path}}"> </div> <div class="col col-10"></div> </div>
When I fix the code snippet, and move the second logo column to the same column as the first logo the Clemson logo is right next to the GT logo:
<div class="row responsive-sm"> <div class="col col-10"></div> <div class="col col-20"> <img class="big_image" src="{{global_data.home_logo_path}}"> <img class="big_image" style="float: right;" src="{{global_data.away_logo_path}}"> </div> <div class="col card"> <div class="row"> <div class="col" align="left"> <h1>{{global_data.home_score}}</h1> </div> <div class="col" align="center"> <h2>{{global_data.quarter}}</h2> <h3>{{global_data.time_left}}</h3> </div> <div class="col" align="right"> <h1>{{global_data.away_score}}</h1> </div> </div> </div> <div class="col col-20">
But it works correctly when I reduce the screen size:
I apologize for the multiple screenshots but that was the only way I could properly explain the problem.
Any help would be greatly appreciated!!