I need help designing a page that functions like a business card, displaying a picture and some details about the person. I have achieved a fluid width for the card, but now I want to make the height fluid as well so that it adjusts to different screen sizes. Any suggestions on how to achieve this? Here is the HTML code I am using:
<div data-role="page" id="my-page">
<div data-role="header">
<h1>Page Title</h1>
</div>
<div data-role="content" id="busCard">
<div class="ui-grid-solo">
<div class="ui-block-a"><div style="text-align:center" id="personName">John Doe</div></div>
<div class="ui-block-a"><img id="personPic" alt="alt..." src="http://static0.therichestimages.com/wp-content/uploads/jack-nicholson-classical_160255-1920x1200.jpg" /></div>
<div class="ui-block-a"><div id="personCat" style="text-align: center">CEO</div></div>
</div>
<ul id="my-listview" class="my-breakpoint" data-role="listview" data-inset="true" data-icon="false">
// list items here
</ul>
</div>
<div data-role="footer">
<h1>footer</h1>
</div>
</div>
Below is my CSS:
@media all and (max-width: 35em) {
.ui-grid-solo img{
width: 100%;
float: none;
}
}
// more CSS styles here
You can view a working example on Fiddle
Thank you!