How to make this responsive card be mostly bigger?

I need to create a very simple design:

Now requirement is to make sure it renders great on most popular modern devices (iPhone, iPad, Androids but also if opened on PC)

This is what I did so far:

div.cardContainer
position:absolute;
max-width:60%;
max-height:60%;
top:45%;
left:55%;
overflow:visible;

div.card
width: 100%;
height: 100%;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
position:relative;
max-width:80%;
max-height:100%;
margin-top:-50%;
margin-left:-50%;

.card-img
position:relative;
max-width:100%;
max-height:100%;

.card-title
padding-left: 16px;

.card-text
padding-left: 16px;

.buttonContainer
display: block;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 40px;


<div class="cardContainer">
<div class="card">
<img class="card-img" src="http://placehold.it/560x560">
<div class="card-body">
<h4 class="card-title">Title</h4>
<p class="card-text">Nullam id dolor id nibh ultricies vehicula utasdasdasdasdas dasdas asdasd asdasd asd as id elit.</p>
</div>
</div>
</div>
<button class="buttonContainer" type="button">Button</button>

It sort of works but a I can not resolve the following:

on mobile devices (where width is smaller than height) - the card is too small, I need it to be "spreaded" around a bit more, so that it tried to occupy most of the space but was still always centered both vertically and horizontally.

This is supposed to be a "walkthrough" intro card and I can't figure how to make it look good on majority of devices. Any advice?

1 Answer
1

OK this is what I wanted and it worked great across all devices (using devtools). I did not optimize this for horizonal (16:9) type of layout. This looks good though for all portrait layouts.

div.cardContainer
position:absolute;
top: 5%;
left: 5%;
right: 5%;
bottom: 10%;
overflow:hidden;
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);

div.card
position: relative;
height: 90%;
width: 80%;
display: flex;
align-items: center;
flex-direction: column;
justify-content: space-around;
margin: auto;

.card-img
padding-top: 16px;
max-width:100%;
max-height:560px;

.card-body
position: relative;

.card-title
padding-left: 16px;

.card-text
padding-left: 16px;
padding-right: 16px;
padding-bottom: 16px;

.introNextButton
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 40px;


<div class="cardContainer">
<div class="card">
<img class="card-img" src="http://placehold.it/560x560">
<div class="card-body">
<h4 class="card-title">Title</h4>
<p class="card-text">Nullam id dolor id nibh ultricies vehicula utasdasdasdasdas dasdas asdasd asdasd asd as id elit.</p>
</div>
</div>
</div>
<button class="introNextButton" type="button">Button</button>

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.