My code currently places the profile card in the center of the screen regardless of screen size, but it often appears too small. How can I adjust the positioning of the profile card to almost fill the screen?
@import url("https://fonts.googleapis.com/css?family=Montserrat");
@import url("https://fonts.googleapis.com/css?family=Open+Sans");
body, html {
/*
Custom CSS styling here
*/
}
/*
More CSS code for styling elements like links, content wrappers, images, and user information
*/
<div class="content-wrapper">
<div class="user">
<div class="shots">
<div class="shot"><img src="image1.jpg"></div>
<div class="shot"><img src="image2.jpg"></div>
<div class="shot"><img src="image3.jpg"></div>
<!-- More image elements here -->
</div>
<div class="profile--info"><span class="username">Username</span><span>Description</span></div>
<div class="user-social-wrapper">
<div class="user-info user-posts"><span>Posts</span><span>Shots</span></div>
<!-- More user info here -->
</div>
</div>
</div>
I am looking to enhance the appearance of the profile card on different screen sizes. How can I modify the design to achieve a larger, more appealing display as shown in this example?