I have designed a website, but when it is viewed on devices like iPad or iPhone, the layout does not adjust to fit the screen properly. The text box containing my name and social media buttons appears on the left side, while the background image is positioned on the right side with whitespace in between these elements. I want the website to be responsive and work seamlessly in both portrait and landscape modes on mobile devices as well as desktop browsers, resizing accordingly.
How can I integrate this functionality into my code?
HTML:
<head>
<meta charset="UTF-8">
<title>My site!</title>
<link href="background.css" rel="stylesheet" type="text/css">
</head>
<body>
<section class="background">
<div class="foreground">
<div class="name-tag">MY SITE!
</div>
<ul class="social-media-list">
<li class="social-media-link">
<a href="https://twitter.com/" target=_blank"><img src="https://cdn3.iconfinder.com/data/icons/capsocial-round/500/twitter-128.png"></a>
</li>
<li class="social-media-link">
<a href="https://www.youtube.com/"><img src="https://cdn4.iconfinder.com/data/icons/social-media-icons-the-circle-set/48/youtube_circle-128.png"></a>
</li>
<li class="social-media-link">
<a href="https://www.linkedin.com/in/" target=_blank"><img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/linkedin_circle_color-512.png"></a>
</li>
<li class="social-media-link">
<a href="https://www.instagram.com/" target=_blank"><img src="https://cdn2.iconfinder.com/data/icons/black-white-social-media/32/instagram_online_social_media-128.png"></a>
</li>
</ul>
</div>
</section>
</body>
</html>
CSS:
/* Body Margin*/
body {
margin: 0;
}
/* Font family avenir-light*/
@font-face {
font-family: 'avenir-light';
src: url('fonts/avenir-light.eot') format('eot'), url('fonts/avenir-light.woff') format('woff'), url('fonts/avenir-light.ttf') format('ttf');
}
/* Background Div*/
.background {
position: relative;
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
}
/* Background Div: after*/
.background:after {
position: absolute;
width: 100vw;
height: 100vh;
content: '';
background-image: url("bkgd.jpg");
background-repeat: no-repeat;
background-size: cover;
-webkit-animation: fadein 3s;
/* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 3s;
/* Firefox < 16 */
-ms-animation: fadein 3s;
/* Internet Explorer */
-o-animation: fadein 3s;
/* Opera < 12.1 */
animation: fadein 3s;
/*Fade In Animation*/
}
/* Fade in animations */
@keyframes fadein {
from {
opacity: 0.2;
}
to {
opacity: 1;
}
}
/* Firefox < 16 */
@-moz-keyframes fadein {
from {
opacity: 0.2;
}
to {
opacity: 1;
}
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
from {
opacity: 0.2;
}
to {
opacity: 1;
}
}
/* Internet Explorer */
@-ms-keyframes fadein {
from {
opacity: 0.2;
}
to {
opacity: 1;
}
}
/* Opera < 12.1 */
@-o-keyframes fadein {
opacity: 0.2;
}
to {
opacity: 1;
}
/* Foreground div */
.foreground {
margin-top: 20px;
position: relative;
width: 400px;
height: 100px;
background-color: #eaeaea;
padding: 20px;
border: 1px solid #555;
border-radius: 10px;
/*Fade In Animation*/
-webkit-animation: fadein 5s;
/* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 5s;
/* Firefox < 16 */
-ms-animation: fadein 5s;
/* Internet Explorer */
-o-animation: fadein 5s;
/* Opera < 12.1 */
animation: fadein 5s;
z-index: 1;
}
/* Name Tag */
.name-tag {
font-family: 'avenir-light';
text-align: center;
font-size: 24px;
}
/* Social Media List*/
.social-media-list {
list-style: none;
display: flex;
justify-content: space-around;
padding: 0;
}
/* Social Media Item*/
.social-media-link img {
height: 50px;
width: 50px;
transition:all 0.5s ease;
}
.social-media-link img:hover {
-ms-transform: scale(1.2);
/* IE 9 */
-webkit-transform: scale(1.2);
/* Safari */
transform: scale(1.2);
/* Standard syntax */
}