Having some difficulty with Bootstrap and making a page responsive. On a regular browser screen (on my desktop), all is well. The difficulty lies in the fact that I have a table that is the width of the page (code snippets below), the table row in question may contain two images on the right. The next row of the table contains a nested table, and on a smaller screen (like my iPhone), the nested table ends up displaying text on top of the images. I have tried working with the "clearfix" class, but that does not seem to do much good. I am trying to just find a way to force the page to display the table below the images, rather than having the text flow over them.
This is going to take some work, but here's what my HTML looks like for the some of the code (this is streamed out from PHP, but the resulting HTML is what I am displaying here) (the whole thing is too large to post here):
<tr class='row_with_images' style='vertical-align: top;'>
<td>
<span class='WhoHeading'>Last Known Location:</span> Mists (Teufelberg)
</td>
<td align='center' style='vertical-align: top;' width='20%' rowspan='4'>
<center>
<img class='profile_image_thumbnail'
data-toggle='popover'
data-trigger='hover'
data-placement='left'
data-html='true'
data-content='<img class="profile_image_big img-fluid" src="http://history.westkingdom.org/Who/HeadShotPhotos/Ken_JuneCrown_2017_Megan.jpg" />'
src='http://history.westkingdom.org/Who/HeadShotPhotos/Ken_JuneCrown_2017_Megan.jpg' alt='' />
</center>
<p style='font-size: 1rem;'><i>Photographer: Megan nic Alister of Thornwood <a href='http://history.westkingdom.org/Who/individual.php?namecode=917' data-toggle='tooltip' data-placement='bottom' title='View Whos Who Entry' target=_blank><img src='http://history.westkingdom.org/SiteImages/information.png' /></a>,<br />Contributor: Hirsch von Henford <a href='http://history.westkingdom.org/Who/individual.php?namecode=9683' data-toggle='tooltip' data-placement='bottom' title='View Whos Who Entry' target=_blank><img src='http://history.westkingdom.org/SiteImages/information.png' /></a></i></p>
</td>
<!-- end of photo -->
<td align='center' style='vertical-align: top;' width='20%' rowspan='4'>
<center>
<img class='arms_image_thumbnail img-fluid'
data-toggle='popover'
data-trigger='hover'
data-placement='left'
data-html='true'
data-content='<img class="arms_image_big img-fluid" src="http://heralds.westkingdom.org/Awards/ArmsImages/HirschVonHenford.gif" />'
src='http://heralds.westkingdom.org/Awards/ArmsImages/HirschVonHenford.gif' alt='' />
</center>
<br clear='all' />
<p style='font-size: 1rem;'><i>Per pale Or and vert, two stag's heads erased respectant counterchanged.</i></p>
</td>
</tr>
<!-- this row (above) is the problem ... -->
<tr style='vertical-align: top;'>
<td colspan='3' style='border:none;'>
<span class='WhoHeading'>Awards Only <i>(maximum of 10)</i>:</span>
<!-- Inner table for the awards themselves -->
<table class='table-striped' style='border:none;'>
<tr>
<td>
<abbr title="Excellence in the Arts and/or Sciences">Laurel [Magnifico]</abbr>, Jan 8, AS XVII (1983), Paul & Rowena (West)
</td>
</tr>
<tr>
<td>
<abbr title="Great service to the Kingdom/SCA [Italian title]">Pelican [Magnifico]</abbr>, Jan 4, AS XXVI (1992), Radnor & Ysabeau (West)
</td>
</tr>
<tr>
<td>
<abbr title="Grant-Level -- actions/contributions have helped shape/define the Kingdom.">Writ of Endorsement</abbr>, Jan 7, AS XLVI (2012), Rolf & Aurora (West)
</td>
</tr>
</table>
</td></tr></table>
I truncated the nested table, but you should get the idea ... On a larger screen all is well. On my phone the text of the nested table displays over the images.
I have tried using clearfix (as noted above), to no avail. I have tried adding a row under the one with the images like:
<tr><td><br clear='all' /></td></tr>
Which does no good.
The css in the media query includes (again, truncated a bit):
@media( max-width: 575.98px)
{
.profile_image_thumbnail, .arms_image_thumbnail
{
background: white;
/*margin-bottom: 0.5rem; /* 5px; */
max-width: 10rem !important; /* 100px small size */
max-height: 15rem !important; /* 150px; */
margin: 0 !important;
}
.popover
{
font-size: 1.0rem !important; /*10px !important;*/
max-width: 30rem !important; /* 300px */
margin: 0 !important; /*2px !important;*/ /* doesn't seem to do anything */
padding: 0 !important;
text-align: center !important;
}
.profile_image_outer, .arms_image_outer /* This is the outer div ... */
{
/* if screen is up to 575.98px (57.598rem;) wide ... */
float: left !important;
max-width: 20rem; /* 200px; */
text-align: center;
margin: 0 !important;
}
.profile_image_big, .arms_image_big
{
max-width: 20.0rem; /* 200px; */
max-height: 30.0rem; /* 300px; */
position: relative;
margin: 0 !important; /* doesn't seem to do anything */
}
}
I am hoping someone has some inkling what to do here. The Bootstrap site gives no useful information, and I've done a lot of looking around the web. I tried to define a class "row_with_images" to use in the media query:
.row_with_images
{
height: auto; /* room for text -- how to make this optional? */
}
This is the latest attempt (using auto, which does no good), setting it to a specific height is not really useful, as some rows that are generated will have no images, and I'll just end up with lots of blank space, and determining the correct height is ... difficult, to put it mildly ... having the extra text under the images throws things off, because that can be short or fairly lengthy on a case-by-case basis. I really need the row to be flexible in height so the row under it doesn't appear over the images on smaller screens. I've spent hours on this and am stumped.
