How can i make everything center in every device? [duplicate]











up vote
3
down vote

favorite













This question already has an answer here:




  • How to vertically center a div for all browsers?

    40 answers



  • CSS center text (horizontally and vertically) inside a div block

    24 answers



  • Flexbox: center horizontally and vertically

    10 answers



  • CSS: Responsive way to center a fluid div (without px width) while limiting the maximum width?

    6 answers



  • How to horizontally center a <div>?

    92 answers




I made a simple website,



However, not everything is centered in the middle on every device. I'm not sure is this is just happening to me or if I didn't do something correctly.



This is what it looks like on my pc



This is what it looks like on my phone



This is the snippet - try opening the website on your phone. Thanks






body{

    margin: 0;

    padding: 0;

    background: #262626;

    font-family: Futura, Futura-Medium, "Futura Medium", "Century Gothic", CenturyGothic, "Apple Gothic", AppleGothic, "URW Gothic L", "Avant Garde", sans-serif;

    font-style : italic;

    text-align: center; 

    -webkit-animation-direction: normal;

	-webkit-animation-duration: 22s;

	-webkit-animation-iteration-count: infinite;

	-webkit-animation-name: text;

	-webkit-animation-timing-function: ease;  

}

h1{

    font-size: 100px;

}

.main{

    position: absolute;

    left: 50%;

    top: 50%;

    transform: translate(-50%, -50%)

}

ul{

    display: flex;

    position: absolute;

    left: 50%;

    top: 70%;

    transform: translate(-50%, 0)

}

ul li{

    list-style: none;

}

ul li a{

    transition: .5s;

    width: 80px;

    height: 80px;

    text-align: center;

    line-height: 80px;

    font-size: 35px;

    display: block;

    -webkit-animation-direction: normal;

	-webkit-animation-duration: 22s;

	-webkit-animation-iteration-count: infinite;

	-webkit-animation-name: text;

    -webkit-animation-timing-function: ease;

}

ul li a:hover{

    font-size: 45px;

}



#particles-js{

    background-size: cover;

    height: 100%;

    width: 100%;

    position: fixed;

    z-index: -1;

}

#date{

    position: absolute;

    font-size: 25px;

}



@-webkit-keyframes text{

    0% {color: #39f;}

   15% {color: #8bc5d1;}

   30% {color: #f8cb4a;}

   45% {color: #95b850;}

   60% {color: #944893;}

   75% {color: #c71f00;}

   90% {color: #bdb280;}

  100% {color: #39f;}

}

<!doctype html>

<html>

    <head>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <meta http-equiv="X-UA-Compatible" content="ie=edge">

        

        <script src="https://code.jquery.com/jquery-3.3.1.js"></script>



        <link href="styles.css" rel="stylesheet" type="text/css">

        <link rel="import" href="particles.html">

        <link rel="import" href="title.html">

        <link rel="import" href="dateCount.html">

        <link rel="icon" href="logo.png">



        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">



    </head>



    <body>

        <div id="particles-js">

            <div class="main">

                <h1 id="date"></h1>

                <h1>kaszam</h1>

                <ul>

                    <li><a href="https://www.instagram.com/kaszamaksym/?hl=en" target="_blank"><i class="fab fa-instagram"></i></a></li>

                    <li><a href="https://www.snapchat.com/add/maksymkasza" target="_blank"><i class="fab fa-snapchat-ghost"></i></a></li>

                    <li><a href="https://www.facebook.com/maksym.kasza.1" target="_blank"><i class="fab fa-facebook-square"></i></a></li>

                    <li><a href="info.html"><i class="fas fa-info-circle"></i></a></li>

                </ul>

            </div>

        </div>

    </body>

</html>








html css







share|improve this question













marked as duplicate by Temani Afif css
Users with the  css badge can single-handedly close css questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
 Nov 18 at 21:54


This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.















  • I suggest that you use Bootstrap rather than trying to reinvent the wheels. You're referring to responsiveness of your site on various devices. So just try Bootstrap if you have not done that yet.
    – Aika
    Nov 18 at 20:47















up vote
3
down vote

favorite













This question already has an answer here:




  • How to vertically center a div for all browsers?

    40 answers



  • CSS center text (horizontally and vertically) inside a div block

    24 answers



  • Flexbox: center horizontally and vertically

    10 answers



  • CSS: Responsive way to center a fluid div (without px width) while limiting the maximum width?

    6 answers



  • How to horizontally center a <div>?

    92 answers




I made a simple website,



However, not everything is centered in the middle on every device. I'm not sure is this is just happening to me or if I didn't do something correctly.



This is what it looks like on my pc



This is what it looks like on my phone



This is the snippet - try opening the website on your phone. Thanks






body{

    margin: 0;

    padding: 0;

    background: #262626;

    font-family: Futura, Futura-Medium, "Futura Medium", "Century Gothic", CenturyGothic, "Apple Gothic", AppleGothic, "URW Gothic L", "Avant Garde", sans-serif;

    font-style : italic;

    text-align: center; 

    -webkit-animation-direction: normal;

	-webkit-animation-duration: 22s;

	-webkit-animation-iteration-count: infinite;

	-webkit-animation-name: text;

	-webkit-animation-timing-function: ease;  

}

h1{

    font-size: 100px;

}

.main{

    position: absolute;

    left: 50%;

    top: 50%;

    transform: translate(-50%, -50%)

}

ul{

    display: flex;

    position: absolute;

    left: 50%;

    top: 70%;

    transform: translate(-50%, 0)

}

ul li{

    list-style: none;

}

ul li a{

    transition: .5s;

    width: 80px;

    height: 80px;

    text-align: center;

    line-height: 80px;

    font-size: 35px;

    display: block;

    -webkit-animation-direction: normal;

	-webkit-animation-duration: 22s;

	-webkit-animation-iteration-count: infinite;

	-webkit-animation-name: text;

    -webkit-animation-timing-function: ease;

}

ul li a:hover{

    font-size: 45px;

}



#particles-js{

    background-size: cover;

    height: 100%;

    width: 100%;

    position: fixed;

    z-index: -1;

}

#date{

    position: absolute;

    font-size: 25px;

}



@-webkit-keyframes text{

    0% {color: #39f;}

   15% {color: #8bc5d1;}

   30% {color: #f8cb4a;}

   45% {color: #95b850;}

   60% {color: #944893;}

   75% {color: #c71f00;}

   90% {color: #bdb280;}

  100% {color: #39f;}

}

<!doctype html>

<html>

    <head>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <meta http-equiv="X-UA-Compatible" content="ie=edge">

        

        <script src="https://code.jquery.com/jquery-3.3.1.js"></script>



        <link href="styles.css" rel="stylesheet" type="text/css">

        <link rel="import" href="particles.html">

        <link rel="import" href="title.html">

        <link rel="import" href="dateCount.html">

        <link rel="icon" href="logo.png">



        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">



    </head>



    <body>

        <div id="particles-js">

            <div class="main">

                <h1 id="date"></h1>

                <h1>kaszam</h1>

                <ul>

                    <li><a href="https://www.instagram.com/kaszamaksym/?hl=en" target="_blank"><i class="fab fa-instagram"></i></a></li>

                    <li><a href="https://www.snapchat.com/add/maksymkasza" target="_blank"><i class="fab fa-snapchat-ghost"></i></a></li>

                    <li><a href="https://www.facebook.com/maksym.kasza.1" target="_blank"><i class="fab fa-facebook-square"></i></a></li>

                    <li><a href="info.html"><i class="fas fa-info-circle"></i></a></li>

                </ul>

            </div>

        </div>

    </body>

</html>








html css







share|improve this question













marked as duplicate by Temani Afif css
Users with the  css badge can single-handedly close css questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
 Nov 18 at 21:54


This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.















  • I suggest that you use Bootstrap rather than trying to reinvent the wheels. You're referring to responsiveness of your site on various devices. So just try Bootstrap if you have not done that yet.
    – Aika
    Nov 18 at 20:47













up vote
3
down vote

favorite









up vote
3
down vote

favorite












This question already has an answer here:




  • How to vertically center a div for all browsers?

    40 answers



  • CSS center text (horizontally and vertically) inside a div block

    24 answers



  • Flexbox: center horizontally and vertically

    10 answers



  • CSS: Responsive way to center a fluid div (without px width) while limiting the maximum width?

    6 answers



  • How to horizontally center a <div>?

    92 answers




I made a simple website,



However, not everything is centered in the middle on every device. I'm not sure is this is just happening to me or if I didn't do something correctly.



This is what it looks like on my pc



This is what it looks like on my phone



This is the snippet - try opening the website on your phone. Thanks






body{

    margin: 0;

    padding: 0;

    background: #262626;

    font-family: Futura, Futura-Medium, "Futura Medium", "Century Gothic", CenturyGothic, "Apple Gothic", AppleGothic, "URW Gothic L", "Avant Garde", sans-serif;

    font-style : italic;

    text-align: center; 

    -webkit-animation-direction: normal;

	-webkit-animation-duration: 22s;

	-webkit-animation-iteration-count: infinite;

	-webkit-animation-name: text;

	-webkit-animation-timing-function: ease;  

}

h1{

    font-size: 100px;

}

.main{

    position: absolute;

    left: 50%;

    top: 50%;

    transform: translate(-50%, -50%)

}

ul{

    display: flex;

    position: absolute;

    left: 50%;

    top: 70%;

    transform: translate(-50%, 0)

}

ul li{

    list-style: none;

}

ul li a{

    transition: .5s;

    width: 80px;

    height: 80px;

    text-align: center;

    line-height: 80px;

    font-size: 35px;

    display: block;

    -webkit-animation-direction: normal;

	-webkit-animation-duration: 22s;

	-webkit-animation-iteration-count: infinite;

	-webkit-animation-name: text;

    -webkit-animation-timing-function: ease;

}

ul li a:hover{

    font-size: 45px;

}



#particles-js{

    background-size: cover;

    height: 100%;

    width: 100%;

    position: fixed;

    z-index: -1;

}

#date{

    position: absolute;

    font-size: 25px;

}



@-webkit-keyframes text{

    0% {color: #39f;}

   15% {color: #8bc5d1;}

   30% {color: #f8cb4a;}

   45% {color: #95b850;}

   60% {color: #944893;}

   75% {color: #c71f00;}

   90% {color: #bdb280;}

  100% {color: #39f;}

}

<!doctype html>

<html>

    <head>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <meta http-equiv="X-UA-Compatible" content="ie=edge">

        

        <script src="https://code.jquery.com/jquery-3.3.1.js"></script>



        <link href="styles.css" rel="stylesheet" type="text/css">

        <link rel="import" href="particles.html">

        <link rel="import" href="title.html">

        <link rel="import" href="dateCount.html">

        <link rel="icon" href="logo.png">



        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">



    </head>



    <body>

        <div id="particles-js">

            <div class="main">

                <h1 id="date"></h1>

                <h1>kaszam</h1>

                <ul>

                    <li><a href="https://www.instagram.com/kaszamaksym/?hl=en" target="_blank"><i class="fab fa-instagram"></i></a></li>

                    <li><a href="https://www.snapchat.com/add/maksymkasza" target="_blank"><i class="fab fa-snapchat-ghost"></i></a></li>

                    <li><a href="https://www.facebook.com/maksym.kasza.1" target="_blank"><i class="fab fa-facebook-square"></i></a></li>

                    <li><a href="info.html"><i class="fas fa-info-circle"></i></a></li>

                </ul>

            </div>

        </div>

    </body>

</html>








html css







share|improve this question














This question already has an answer here:




  • How to vertically center a div for all browsers?

    40 answers



  • CSS center text (horizontally and vertically) inside a div block

    24 answers



  • Flexbox: center horizontally and vertically

    10 answers



  • CSS: Responsive way to center a fluid div (without px width) while limiting the maximum width?

    6 answers



  • How to horizontally center a <div>?

    92 answers




I made a simple website,



However, not everything is centered in the middle on every device. I'm not sure is this is just happening to me or if I didn't do something correctly.



This is what it looks like on my pc



This is what it looks like on my phone



This is the snippet - try opening the website on your phone. Thanks






body{

    margin: 0;

    padding: 0;

    background: #262626;

    font-family: Futura, Futura-Medium, "Futura Medium", "Century Gothic", CenturyGothic, "Apple Gothic", AppleGothic, "URW Gothic L", "Avant Garde", sans-serif;

    font-style : italic;

    text-align: center; 

    -webkit-animation-direction: normal;

	-webkit-animation-duration: 22s;

	-webkit-animation-iteration-count: infinite;

	-webkit-animation-name: text;

	-webkit-animation-timing-function: ease;  

}

h1{

    font-size: 100px;

}

.main{

    position: absolute;

    left: 50%;

    top: 50%;

    transform: translate(-50%, -50%)

}

ul{

    display: flex;

    position: absolute;

    left: 50%;

    top: 70%;

    transform: translate(-50%, 0)

}

ul li{

    list-style: none;

}

ul li a{

    transition: .5s;

    width: 80px;

    height: 80px;

    text-align: center;

    line-height: 80px;

    font-size: 35px;

    display: block;

    -webkit-animation-direction: normal;

	-webkit-animation-duration: 22s;

	-webkit-animation-iteration-count: infinite;

	-webkit-animation-name: text;

    -webkit-animation-timing-function: ease;

}

ul li a:hover{

    font-size: 45px;

}



#particles-js{

    background-size: cover;

    height: 100%;

    width: 100%;

    position: fixed;

    z-index: -1;

}

#date{

    position: absolute;

    font-size: 25px;

}



@-webkit-keyframes text{

    0% {color: #39f;}

   15% {color: #8bc5d1;}

   30% {color: #f8cb4a;}

   45% {color: #95b850;}

   60% {color: #944893;}

   75% {color: #c71f00;}

   90% {color: #bdb280;}

  100% {color: #39f;}

}

<!doctype html>

<html>

    <head>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <meta http-equiv="X-UA-Compatible" content="ie=edge">

        

        <script src="https://code.jquery.com/jquery-3.3.1.js"></script>



        <link href="styles.css" rel="stylesheet" type="text/css">

        <link rel="import" href="particles.html">

        <link rel="import" href="title.html">

        <link rel="import" href="dateCount.html">

        <link rel="icon" href="logo.png">



        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">



    </head>



    <body>

        <div id="particles-js">

            <div class="main">

                <h1 id="date"></h1>

                <h1>kaszam</h1>

                <ul>

                    <li><a href="https://www.instagram.com/kaszamaksym/?hl=en" target="_blank"><i class="fab fa-instagram"></i></a></li>

                    <li><a href="https://www.snapchat.com/add/maksymkasza" target="_blank"><i class="fab fa-snapchat-ghost"></i></a></li>

                    <li><a href="https://www.facebook.com/maksym.kasza.1" target="_blank"><i class="fab fa-facebook-square"></i></a></li>

                    <li><a href="info.html"><i class="fas fa-info-circle"></i></a></li>

                </ul>

            </div>

        </div>

    </body>

</html>







This question already has an answer here:




  • How to vertically center a div for all browsers?

    40 answers



  • CSS center text (horizontally and vertically) inside a div block

    24 answers



  • Flexbox: center horizontally and vertically

    10 answers



  • CSS: Responsive way to center a fluid div (without px width) while limiting the maximum width?

    6 answers



  • How to horizontally center a <div>?

    92 answers







body{

    margin: 0;

    padding: 0;

    background: #262626;

    font-family: Futura, Futura-Medium, "Futura Medium", "Century Gothic", CenturyGothic, "Apple Gothic", AppleGothic, "URW Gothic L", "Avant Garde", sans-serif;

    font-style : italic;

    text-align: center; 

    -webkit-animation-direction: normal;

	-webkit-animation-duration: 22s;

	-webkit-animation-iteration-count: infinite;

	-webkit-animation-name: text;

	-webkit-animation-timing-function: ease;  

}

h1{

    font-size: 100px;

}

.main{

    position: absolute;

    left: 50%;

    top: 50%;

    transform: translate(-50%, -50%)

}

ul{

    display: flex;

    position: absolute;

    left: 50%;

    top: 70%;

    transform: translate(-50%, 0)

}

ul li{

    list-style: none;

}

ul li a{

    transition: .5s;

    width: 80px;

    height: 80px;

    text-align: center;

    line-height: 80px;

    font-size: 35px;

    display: block;

    -webkit-animation-direction: normal;

	-webkit-animation-duration: 22s;

	-webkit-animation-iteration-count: infinite;

	-webkit-animation-name: text;

    -webkit-animation-timing-function: ease;

}

ul li a:hover{

    font-size: 45px;

}



#particles-js{

    background-size: cover;

    height: 100%;

    width: 100%;

    position: fixed;

    z-index: -1;

}

#date{

    position: absolute;

    font-size: 25px;

}



@-webkit-keyframes text{

    0% {color: #39f;}

   15% {color: #8bc5d1;}

   30% {color: #f8cb4a;}

   45% {color: #95b850;}

   60% {color: #944893;}

   75% {color: #c71f00;}

   90% {color: #bdb280;}

  100% {color: #39f;}

}

<!doctype html>

<html>

    <head>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <meta http-equiv="X-UA-Compatible" content="ie=edge">

        

        <script src="https://code.jquery.com/jquery-3.3.1.js"></script>



        <link href="styles.css" rel="stylesheet" type="text/css">

        <link rel="import" href="particles.html">

        <link rel="import" href="title.html">

        <link rel="import" href="dateCount.html">

        <link rel="icon" href="logo.png">



        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">



    </head>



    <body>

        <div id="particles-js">

            <div class="main">

                <h1 id="date"></h1>

                <h1>kaszam</h1>

                <ul>

                    <li><a href="https://www.instagram.com/kaszamaksym/?hl=en" target="_blank"><i class="fab fa-instagram"></i></a></li>

                    <li><a href="https://www.snapchat.com/add/maksymkasza" target="_blank"><i class="fab fa-snapchat-ghost"></i></a></li>

                    <li><a href="https://www.facebook.com/maksym.kasza.1" target="_blank"><i class="fab fa-facebook-square"></i></a></li>

                    <li><a href="info.html"><i class="fas fa-info-circle"></i></a></li>

                </ul>

            </div>

        </div>

    </body>

</html>





body{

    margin: 0;

    padding: 0;

    background: #262626;

    font-family: Futura, Futura-Medium, "Futura Medium", "Century Gothic", CenturyGothic, "Apple Gothic", AppleGothic, "URW Gothic L", "Avant Garde", sans-serif;

    font-style : italic;

    text-align: center; 

    -webkit-animation-direction: normal;

	-webkit-animation-duration: 22s;

	-webkit-animation-iteration-count: infinite;

	-webkit-animation-name: text;

	-webkit-animation-timing-function: ease;  

}

h1{

    font-size: 100px;

}

.main{

    position: absolute;

    left: 50%;

    top: 50%;

    transform: translate(-50%, -50%)

}

ul{

    display: flex;

    position: absolute;

    left: 50%;

    top: 70%;

    transform: translate(-50%, 0)

}

ul li{

    list-style: none;

}

ul li a{

    transition: .5s;

    width: 80px;

    height: 80px;

    text-align: center;

    line-height: 80px;

    font-size: 35px;

    display: block;

    -webkit-animation-direction: normal;

	-webkit-animation-duration: 22s;

	-webkit-animation-iteration-count: infinite;

	-webkit-animation-name: text;

    -webkit-animation-timing-function: ease;

}

ul li a:hover{

    font-size: 45px;

}



#particles-js{

    background-size: cover;

    height: 100%;

    width: 100%;

    position: fixed;

    z-index: -1;

}

#date{

    position: absolute;

    font-size: 25px;

}



@-webkit-keyframes text{

    0% {color: #39f;}

   15% {color: #8bc5d1;}

   30% {color: #f8cb4a;}

   45% {color: #95b850;}

   60% {color: #944893;}

   75% {color: #c71f00;}

   90% {color: #bdb280;}

  100% {color: #39f;}

}

<!doctype html>

<html>

    <head>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <meta http-equiv="X-UA-Compatible" content="ie=edge">

        

        <script src="https://code.jquery.com/jquery-3.3.1.js"></script>



        <link href="styles.css" rel="stylesheet" type="text/css">

        <link rel="import" href="particles.html">

        <link rel="import" href="title.html">

        <link rel="import" href="dateCount.html">

        <link rel="icon" href="logo.png">



        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">



    </head>



    <body>

        <div id="particles-js">

            <div class="main">

                <h1 id="date"></h1>

                <h1>kaszam</h1>

                <ul>

                    <li><a href="https://www.instagram.com/kaszamaksym/?hl=en" target="_blank"><i class="fab fa-instagram"></i></a></li>

                    <li><a href="https://www.snapchat.com/add/maksymkasza" target="_blank"><i class="fab fa-snapchat-ghost"></i></a></li>

                    <li><a href="https://www.facebook.com/maksym.kasza.1" target="_blank"><i class="fab fa-facebook-square"></i></a></li>

                    <li><a href="info.html"><i class="fas fa-info-circle"></i></a></li>

                </ul>

            </div>

        </div>

    </body>

</html>





html css




html css






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Nov 18 at 20:04









Maksym Kasza

202




202




marked as duplicate by Temani Afif css
Users with the  css badge can single-handedly close css questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
 Nov 18 at 21:54


This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.






marked as duplicate by Temani Afif css
Users with the  css badge can single-handedly close css questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
 Nov 18 at 21:54


This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.














  • I suggest that you use Bootstrap rather than trying to reinvent the wheels. You're referring to responsiveness of your site on various devices. So just try Bootstrap if you have not done that yet.
    – Aika
    Nov 18 at 20:47


















  • I suggest that you use Bootstrap rather than trying to reinvent the wheels. You're referring to responsiveness of your site on various devices. So just try Bootstrap if you have not done that yet.
    – Aika
    Nov 18 at 20:47
















I suggest that you use Bootstrap rather than trying to reinvent the wheels. You're referring to responsiveness of your site on various devices. So just try Bootstrap if you have not done that yet.
– Aika
Nov 18 at 20:47




I suggest that you use Bootstrap rather than trying to reinvent the wheels. You're referring to responsiveness of your site on various devices. So just try Bootstrap if you have not done that yet.
– Aika
Nov 18 at 20:47












2 Answers
2






active

oldest

votes

















up vote
1
down vote













It is bad practice to use position absolute and top/left 50% to center your objects.
Yo can do it better by using flex. Set the container to have



display: flex;

align-items: center;

justify-content: center;


and remove the absolute position. Also, NOTE that you have some non supported css rules such as padding-inline-start. (Reference)



Simple example of use






html, body{

  height: 100%;

}



.container{

  display: flex;

  align-items: center;

  justify-content: center;

  height: 100%;

}



.center-me{

  width: 70px;

  height: 70px;

  border: 1px solid black;

  background-color: #bada55;

}

<div class="container">

  <div class="center-me"></div>

</div>





Your example with some fixed code that should do the trick






body{

    margin: 0;

    padding: 0;

    background: #262626;

    font-family: Futura, Futura-Medium, "Futura Medium", "Century Gothic", CenturyGothic, "Apple Gothic", AppleGothic, "URW Gothic L", "Avant Garde", sans-serif;

    font-style : italic;

    text-align: center; 

    -webkit-animation-direction: normal;

	-webkit-animation-duration: 22s;

	-webkit-animation-iteration-count: infinite;

	-webkit-animation-name: text;

	-webkit-animation-timing-function: ease;  

}

h1{

    font-size: 100px;

}

.main{

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    height: 100%;

}

ul{

    display: flex;

    padding-inline-start: 0px;

}

ul li{

    list-style: none;

}

ul li a{

    transition: .5s;

    width: 80px;

    height: 80px;

    text-align: center;

    line-height: 80px;

    font-size: 35px;

    display: block;

    -webkit-animation-direction: normal;

	-webkit-animation-duration: 22s;

	-webkit-animation-iteration-count: infinite;

	-webkit-animation-name: text;

    -webkit-animation-timing-function: ease;

}

ul li a:hover{

    font-size: 45px;

}



#particles-js{

    background-size: cover;

    height: 100%;

    width: 100%;

    position: fixed;

    z-index: -1;

}

#date{

    position: absolute;

    font-size: 25px;

}



@-webkit-keyframes text{

    0% {color: #39f;}

   15% {color: #8bc5d1;}

   30% {color: #f8cb4a;}

   45% {color: #95b850;}

   60% {color: #944893;}

   75% {color: #c71f00;}

   90% {color: #bdb280;}

  100% {color: #39f;}

}

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>



<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">



<div id="particles-js">

  <div class="main">

    <h1 id="date"></h1>

    <h1>kaszam</h1>

    <ul>

      <li><a href="https://www.instagram.com/kaszamaksym/?hl=en" target="_blank"><i class="fab fa-instagram"></i></a></li>

      <li><a href="https://www.snapchat.com/add/maksymkasza" target="_blank"><i class="fab fa-snapchat-ghost"></i></a></li>

      <li><a href="https://www.facebook.com/maksym.kasza.1" target="_blank"><i class="fab fa-facebook-square"></i></a></li>

      <li><a href="info.html"><i class="fas fa-info-circle"></i></a></li>

    </ul>

  </div>

</div>








share|improve this answer




























    up vote
    0
    down vote













    Bootstrap is responsive to screen sizes.
    I've always had good luck using Bootstrap instead of doing stuff like this in css:



    .main{
    
position: absolute;
    
left: 50%;
    
top: 50%;
    
transform: translate(-50%, -50%)


    Check out this site:
    https://getbootstrap.com/docs/4.0/layout/grid/






    share|improve this answer




























      2 Answers
      2






      active

      oldest

      votes








      2 Answers
      2






      active

      oldest

      votes









      active

      oldest

      votes






      active

      oldest

      votes








      up vote
      1
      down vote













      It is bad practice to use position absolute and top/left 50% to center your objects.
      Yo can do it better by using flex. Set the container to have



      display: flex;
      
align-items: center;
      
justify-content: center;


      and remove the absolute position. Also, NOTE that you have some non supported css rules such as padding-inline-start. (Reference)



      Simple example of use






      html, body{
      
  height: 100%;
      
}
      

      
.container{
      
  display: flex;
      
  align-items: center;
      
  justify-content: center;
      
  height: 100%;
      
}
      

      
.center-me{
      
  width: 70px;
      
  height: 70px;
      
  border: 1px solid black;
      
  background-color: #bada55;
      
}

      <div class="container">
      
  <div class="center-me"></div>
      
</div>





      Your example with some fixed code that should do the trick






      body{
      
    margin: 0;
      
    padding: 0;
      
    background: #262626;
      
    font-family: Futura, Futura-Medium, "Futura Medium", "Century Gothic", CenturyGothic, "Apple Gothic", AppleGothic, "URW Gothic L", "Avant Garde", sans-serif;
      
    font-style : italic;
      
    text-align: center; 
      
    -webkit-animation-direction: normal;
      
	-webkit-animation-duration: 22s;
      
	-webkit-animation-iteration-count: infinite;
      
	-webkit-animation-name: text;
      
	-webkit-animation-timing-function: ease;  
      
}
      
h1{
      
    font-size: 100px;
      
}
      
.main{
      
    display: flex;
      
    flex-direction: column;
      
    align-items: center;
      
    justify-content: center;
      
    height: 100%;
      
}
      
ul{
      
    display: flex;
      
    padding-inline-start: 0px;
      
}
      
ul li{
      
    list-style: none;
      
}
      
ul li a{
      
    transition: .5s;
      
    width: 80px;
      
    height: 80px;
      
    text-align: center;
      
    line-height: 80px;
      
    font-size: 35px;
      
    display: block;
      
    -webkit-animation-direction: normal;
      
	-webkit-animation-duration: 22s;
      
	-webkit-animation-iteration-count: infinite;
      
	-webkit-animation-name: text;
      
    -webkit-animation-timing-function: ease;
      
}
      
ul li a:hover{
      
    font-size: 45px;
      
}
      

      
#particles-js{
      
    background-size: cover;
      
    height: 100%;
      
    width: 100%;
      
    position: fixed;
      
    z-index: -1;
      
}
      
#date{
      
    position: absolute;
      
    font-size: 25px;
      
}
      

      
@-webkit-keyframes text{
      
    0% {color: #39f;}
      
   15% {color: #8bc5d1;}
      
   30% {color: #f8cb4a;}
      
   45% {color: #95b850;}
      
   60% {color: #944893;}
      
   75% {color: #c71f00;}
      
   90% {color: #bdb280;}
      
  100% {color: #39f;}
      
}

      <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
      

      
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
      

      
<div id="particles-js">
      
  <div class="main">
      
    <h1 id="date"></h1>
      
    <h1>kaszam</h1>
      
    <ul>
      
      <li><a href="https://www.instagram.com/kaszamaksym/?hl=en" target="_blank"><i class="fab fa-instagram"></i></a></li>
      
      <li><a href="https://www.snapchat.com/add/maksymkasza" target="_blank"><i class="fab fa-snapchat-ghost"></i></a></li>
      
      <li><a href="https://www.facebook.com/maksym.kasza.1" target="_blank"><i class="fab fa-facebook-square"></i></a></li>
      
      <li><a href="info.html"><i class="fas fa-info-circle"></i></a></li>
      
    </ul>
      
  </div>
      
</div>








      share|improve this answer

























        up vote
        1
        down vote













        It is bad practice to use position absolute and top/left 50% to center your objects.
        Yo can do it better by using flex. Set the container to have



        display: flex;
        
align-items: center;
        
justify-content: center;


        and remove the absolute position. Also, NOTE that you have some non supported css rules such as padding-inline-start. (Reference)



        Simple example of use






        html, body{
        
  height: 100%;
        
}
        

        
.container{
        
  display: flex;
        
  align-items: center;
        
  justify-content: center;
        
  height: 100%;
        
}
        

        
.center-me{
        
  width: 70px;
        
  height: 70px;
        
  border: 1px solid black;
        
  background-color: #bada55;
        
}

        <div class="container">
        
  <div class="center-me"></div>
        
</div>





        Your example with some fixed code that should do the trick






        body{
        
    margin: 0;
        
    padding: 0;
        
    background: #262626;
        
    font-family: Futura, Futura-Medium, "Futura Medium", "Century Gothic", CenturyGothic, "Apple Gothic", AppleGothic, "URW Gothic L", "Avant Garde", sans-serif;
        
    font-style : italic;
        
    text-align: center; 
        
    -webkit-animation-direction: normal;
        
	-webkit-animation-duration: 22s;
        
	-webkit-animation-iteration-count: infinite;
        
	-webkit-animation-name: text;
        
	-webkit-animation-timing-function: ease;  
        
}
        
h1{
        
    font-size: 100px;
        
}
        
.main{
        
    display: flex;
        
    flex-direction: column;
        
    align-items: center;
        
    justify-content: center;
        
    height: 100%;
        
}
        
ul{
        
    display: flex;
        
    padding-inline-start: 0px;
        
}
        
ul li{
        
    list-style: none;
        
}
        
ul li a{
        
    transition: .5s;
        
    width: 80px;
        
    height: 80px;
        
    text-align: center;
        
    line-height: 80px;
        
    font-size: 35px;
        
    display: block;
        
    -webkit-animation-direction: normal;
        
	-webkit-animation-duration: 22s;
        
	-webkit-animation-iteration-count: infinite;
        
	-webkit-animation-name: text;
        
    -webkit-animation-timing-function: ease;
        
}
        
ul li a:hover{
        
    font-size: 45px;
        
}
        

        
#particles-js{
        
    background-size: cover;
        
    height: 100%;
        
    width: 100%;
        
    position: fixed;
        
    z-index: -1;
        
}
        
#date{
        
    position: absolute;
        
    font-size: 25px;
        
}
        

        
@-webkit-keyframes text{
        
    0% {color: #39f;}
        
   15% {color: #8bc5d1;}
        
   30% {color: #f8cb4a;}
        
   45% {color: #95b850;}
        
   60% {color: #944893;}
        
   75% {color: #c71f00;}
        
   90% {color: #bdb280;}
        
  100% {color: #39f;}
        
}

        <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
        

        
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
        

        
<div id="particles-js">
        
  <div class="main">
        
    <h1 id="date"></h1>
        
    <h1>kaszam</h1>
        
    <ul>
        
      <li><a href="https://www.instagram.com/kaszamaksym/?hl=en" target="_blank"><i class="fab fa-instagram"></i></a></li>
        
      <li><a href="https://www.snapchat.com/add/maksymkasza" target="_blank"><i class="fab fa-snapchat-ghost"></i></a></li>
        
      <li><a href="https://www.facebook.com/maksym.kasza.1" target="_blank"><i class="fab fa-facebook-square"></i></a></li>
        
      <li><a href="info.html"><i class="fas fa-info-circle"></i></a></li>
        
    </ul>
        
  </div>
        
</div>








        share|improve this answer























          up vote
          1
          down vote










          up vote
          1
          down vote









          It is bad practice to use position absolute and top/left 50% to center your objects.
          Yo can do it better by using flex. Set the container to have



          display: flex;
          
align-items: center;
          
justify-content: center;


          and remove the absolute position. Also, NOTE that you have some non supported css rules such as padding-inline-start. (Reference)



          Simple example of use






          html, body{
          
  height: 100%;
          
}
          

          
.container{
          
  display: flex;
          
  align-items: center;
          
  justify-content: center;
          
  height: 100%;
          
}
          

          
.center-me{
          
  width: 70px;
          
  height: 70px;
          
  border: 1px solid black;
          
  background-color: #bada55;
          
}

          <div class="container">
          
  <div class="center-me"></div>
          
</div>





          Your example with some fixed code that should do the trick






          body{
          
    margin: 0;
          
    padding: 0;
          
    background: #262626;
          
    font-family: Futura, Futura-Medium, "Futura Medium", "Century Gothic", CenturyGothic, "Apple Gothic", AppleGothic, "URW Gothic L", "Avant Garde", sans-serif;
          
    font-style : italic;
          
    text-align: center; 
          
    -webkit-animation-direction: normal;
          
	-webkit-animation-duration: 22s;
          
	-webkit-animation-iteration-count: infinite;
          
	-webkit-animation-name: text;
          
	-webkit-animation-timing-function: ease;  
          
}
          
h1{
          
    font-size: 100px;
          
}
          
.main{
          
    display: flex;
          
    flex-direction: column;
          
    align-items: center;
          
    justify-content: center;
          
    height: 100%;
          
}
          
ul{
          
    display: flex;
          
    padding-inline-start: 0px;
          
}
          
ul li{
          
    list-style: none;
          
}
          
ul li a{
          
    transition: .5s;
          
    width: 80px;
          
    height: 80px;
          
    text-align: center;
          
    line-height: 80px;
          
    font-size: 35px;
          
    display: block;
          
    -webkit-animation-direction: normal;
          
	-webkit-animation-duration: 22s;
          
	-webkit-animation-iteration-count: infinite;
          
	-webkit-animation-name: text;
          
    -webkit-animation-timing-function: ease;
          
}
          
ul li a:hover{
          
    font-size: 45px;
          
}
          

          
#particles-js{
          
    background-size: cover;
          
    height: 100%;
          
    width: 100%;
          
    position: fixed;
          
    z-index: -1;
          
}
          
#date{
          
    position: absolute;
          
    font-size: 25px;
          
}
          

          
@-webkit-keyframes text{
          
    0% {color: #39f;}
          
   15% {color: #8bc5d1;}
          
   30% {color: #f8cb4a;}
          
   45% {color: #95b850;}
          
   60% {color: #944893;}
          
   75% {color: #c71f00;}
          
   90% {color: #bdb280;}
          
  100% {color: #39f;}
          
}

          <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
          

          
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
          

          
<div id="particles-js">
          
  <div class="main">
          
    <h1 id="date"></h1>
          
    <h1>kaszam</h1>
          
    <ul>
          
      <li><a href="https://www.instagram.com/kaszamaksym/?hl=en" target="_blank"><i class="fab fa-instagram"></i></a></li>
          
      <li><a href="https://www.snapchat.com/add/maksymkasza" target="_blank"><i class="fab fa-snapchat-ghost"></i></a></li>
          
      <li><a href="https://www.facebook.com/maksym.kasza.1" target="_blank"><i class="fab fa-facebook-square"></i></a></li>
          
      <li><a href="info.html"><i class="fas fa-info-circle"></i></a></li>
          
    </ul>
          
  </div>
          
</div>








          share|improve this answer












          It is bad practice to use position absolute and top/left 50% to center your objects.
          Yo can do it better by using flex. Set the container to have



          display: flex;
          
align-items: center;
          
justify-content: center;


          and remove the absolute position. Also, NOTE that you have some non supported css rules such as padding-inline-start. (Reference)



          Simple example of use






          html, body{
          
  height: 100%;
          
}
          

          
.container{
          
  display: flex;
          
  align-items: center;
          
  justify-content: center;
          
  height: 100%;
          
}
          

          
.center-me{
          
  width: 70px;
          
  height: 70px;
          
  border: 1px solid black;
          
  background-color: #bada55;
          
}

          <div class="container">
          
  <div class="center-me"></div>
          
</div>





          Your example with some fixed code that should do the trick






          body{
          
    margin: 0;
          
    padding: 0;
          
    background: #262626;
          
    font-family: Futura, Futura-Medium, "Futura Medium", "Century Gothic", CenturyGothic, "Apple Gothic", AppleGothic, "URW Gothic L", "Avant Garde", sans-serif;
          
    font-style : italic;
          
    text-align: center; 
          
    -webkit-animation-direction: normal;
          
	-webkit-animation-duration: 22s;
          
	-webkit-animation-iteration-count: infinite;
          
	-webkit-animation-name: text;
          
	-webkit-animation-timing-function: ease;  
          
}
          
h1{
          
    font-size: 100px;
          
}
          
.main{
          
    display: flex;
          
    flex-direction: column;
          
    align-items: center;
          
    justify-content: center;
          
    height: 100%;
          
}
          
ul{
          
    display: flex;
          
    padding-inline-start: 0px;
          
}
          
ul li{
          
    list-style: none;
          
}
          
ul li a{
          
    transition: .5s;
          
    width: 80px;
          
    height: 80px;
          
    text-align: center;
          
    line-height: 80px;
          
    font-size: 35px;
          
    display: block;
          
    -webkit-animation-direction: normal;
          
	-webkit-animation-duration: 22s;
          
	-webkit-animation-iteration-count: infinite;
          
	-webkit-animation-name: text;
          
    -webkit-animation-timing-function: ease;
          
}
          
ul li a:hover{
          
    font-size: 45px;
          
}
          

          
#particles-js{
          
    background-size: cover;
          
    height: 100%;
          
    width: 100%;
          
    position: fixed;
          
    z-index: -1;
          
}
          
#date{
          
    position: absolute;
          
    font-size: 25px;
          
}
          

          
@-webkit-keyframes text{
          
    0% {color: #39f;}
          
   15% {color: #8bc5d1;}
          
   30% {color: #f8cb4a;}
          
   45% {color: #95b850;}
          
   60% {color: #944893;}
          
   75% {color: #c71f00;}
          
   90% {color: #bdb280;}
          
  100% {color: #39f;}
          
}

          <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
          

          
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
          

          
<div id="particles-js">
          
  <div class="main">
          
    <h1 id="date"></h1>
          
    <h1>kaszam</h1>
          
    <ul>
          
      <li><a href="https://www.instagram.com/kaszamaksym/?hl=en" target="_blank"><i class="fab fa-instagram"></i></a></li>
          
      <li><a href="https://www.snapchat.com/add/maksymkasza" target="_blank"><i class="fab fa-snapchat-ghost"></i></a></li>
          
      <li><a href="https://www.facebook.com/maksym.kasza.1" target="_blank"><i class="fab fa-facebook-square"></i></a></li>
          
      <li><a href="info.html"><i class="fas fa-info-circle"></i></a></li>
          
    </ul>
          
  </div>
          
</div>








          html, body{
          
  height: 100%;
          
}
          

          
.container{
          
  display: flex;
          
  align-items: center;
          
  justify-content: center;
          
  height: 100%;
          
}
          

          
.center-me{
          
  width: 70px;
          
  height: 70px;
          
  border: 1px solid black;
          
  background-color: #bada55;
          
}

          <div class="container">
          
  <div class="center-me"></div>
          
</div>





          html, body{
          
  height: 100%;
          
}
          

          
.container{
          
  display: flex;
          
  align-items: center;
          
  justify-content: center;
          
  height: 100%;
          
}
          

          
.center-me{
          
  width: 70px;
          
  height: 70px;
          
  border: 1px solid black;
          
  background-color: #bada55;
          
}

          <div class="container">
          
  <div class="center-me"></div>
          
</div>





          body{
          
    margin: 0;
          
    padding: 0;
          
    background: #262626;
          
    font-family: Futura, Futura-Medium, "Futura Medium", "Century Gothic", CenturyGothic, "Apple Gothic", AppleGothic, "URW Gothic L", "Avant Garde", sans-serif;
          
    font-style : italic;
          
    text-align: center; 
          
    -webkit-animation-direction: normal;
          
	-webkit-animation-duration: 22s;
          
	-webkit-animation-iteration-count: infinite;
          
	-webkit-animation-name: text;
          
	-webkit-animation-timing-function: ease;  
          
}
          
h1{
          
    font-size: 100px;
          
}
          
.main{
          
    display: flex;
          
    flex-direction: column;
          
    align-items: center;
          
    justify-content: center;
          
    height: 100%;
          
}
          
ul{
          
    display: flex;
          
    padding-inline-start: 0px;
          
}
          
ul li{
          
    list-style: none;
          
}
          
ul li a{
          
    transition: .5s;
          
    width: 80px;
          
    height: 80px;
          
    text-align: center;
          
    line-height: 80px;
          
    font-size: 35px;
          
    display: block;
          
    -webkit-animation-direction: normal;
          
	-webkit-animation-duration: 22s;
          
	-webkit-animation-iteration-count: infinite;
          
	-webkit-animation-name: text;
          
    -webkit-animation-timing-function: ease;
          
}
          
ul li a:hover{
          
    font-size: 45px;
          
}
          

          
#particles-js{
          
    background-size: cover;
          
    height: 100%;
          
    width: 100%;
          
    position: fixed;
          
    z-index: -1;
          
}
          
#date{
          
    position: absolute;
          
    font-size: 25px;
          
}
          

          
@-webkit-keyframes text{
          
    0% {color: #39f;}
          
   15% {color: #8bc5d1;}
          
   30% {color: #f8cb4a;}
          
   45% {color: #95b850;}
          
   60% {color: #944893;}
          
   75% {color: #c71f00;}
          
   90% {color: #bdb280;}
          
  100% {color: #39f;}
          
}

          <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
          

          
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
          

          
<div id="particles-js">
          
  <div class="main">
          
    <h1 id="date"></h1>
          
    <h1>kaszam</h1>
          
    <ul>
          
      <li><a href="https://www.instagram.com/kaszamaksym/?hl=en" target="_blank"><i class="fab fa-instagram"></i></a></li>
          
      <li><a href="https://www.snapchat.com/add/maksymkasza" target="_blank"><i class="fab fa-snapchat-ghost"></i></a></li>
          
      <li><a href="https://www.facebook.com/maksym.kasza.1" target="_blank"><i class="fab fa-facebook-square"></i></a></li>
          
      <li><a href="info.html"><i class="fas fa-info-circle"></i></a></li>
          
    </ul>
          
  </div>
          
</div>





          body{
          
    margin: 0;
          
    padding: 0;
          
    background: #262626;
          
    font-family: Futura, Futura-Medium, "Futura Medium", "Century Gothic", CenturyGothic, "Apple Gothic", AppleGothic, "URW Gothic L", "Avant Garde", sans-serif;
          
    font-style : italic;
          
    text-align: center; 
          
    -webkit-animation-direction: normal;
          
	-webkit-animation-duration: 22s;
          
	-webkit-animation-iteration-count: infinite;
          
	-webkit-animation-name: text;
          
	-webkit-animation-timing-function: ease;  
          
}
          
h1{
          
    font-size: 100px;
          
}
          
.main{
          
    display: flex;
          
    flex-direction: column;
          
    align-items: center;
          
    justify-content: center;
          
    height: 100%;
          
}
          
ul{
          
    display: flex;
          
    padding-inline-start: 0px;
          
}
          
ul li{
          
    list-style: none;
          
}
          
ul li a{
          
    transition: .5s;
          
    width: 80px;
          
    height: 80px;
          
    text-align: center;
          
    line-height: 80px;
          
    font-size: 35px;
          
    display: block;
          
    -webkit-animation-direction: normal;
          
	-webkit-animation-duration: 22s;
          
	-webkit-animation-iteration-count: infinite;
          
	-webkit-animation-name: text;
          
    -webkit-animation-timing-function: ease;
          
}
          
ul li a:hover{
          
    font-size: 45px;
          
}
          

          
#particles-js{
          
    background-size: cover;
          
    height: 100%;
          
    width: 100%;
          
    position: fixed;
          
    z-index: -1;
          
}
          
#date{
          
    position: absolute;
          
    font-size: 25px;
          
}
          

          
@-webkit-keyframes text{
          
    0% {color: #39f;}
          
   15% {color: #8bc5d1;}
          
   30% {color: #f8cb4a;}
          
   45% {color: #95b850;}
          
   60% {color: #944893;}
          
   75% {color: #c71f00;}
          
   90% {color: #bdb280;}
          
  100% {color: #39f;}
          
}

          <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
          

          
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
          

          
<div id="particles-js">
          
  <div class="main">
          
    <h1 id="date"></h1>
          
    <h1>kaszam</h1>
          
    <ul>
          
      <li><a href="https://www.instagram.com/kaszamaksym/?hl=en" target="_blank"><i class="fab fa-instagram"></i></a></li>
          
      <li><a href="https://www.snapchat.com/add/maksymkasza" target="_blank"><i class="fab fa-snapchat-ghost"></i></a></li>
          
      <li><a href="https://www.facebook.com/maksym.kasza.1" target="_blank"><i class="fab fa-facebook-square"></i></a></li>
          
      <li><a href="info.html"><i class="fas fa-info-circle"></i></a></li>
          
    </ul>
          
  </div>
          
</div>






          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Nov 18 at 20:57









          Itay Gal

          6,10552357




          6,10552357
























              up vote
              0
              down vote













              Bootstrap is responsive to screen sizes.
              I've always had good luck using Bootstrap instead of doing stuff like this in css:



              .main{
              
position: absolute;
              
left: 50%;
              
top: 50%;
              
transform: translate(-50%, -50%)


              Check out this site:
              https://getbootstrap.com/docs/4.0/layout/grid/






              share|improve this answer

























                up vote
                0
                down vote













                Bootstrap is responsive to screen sizes.
                I've always had good luck using Bootstrap instead of doing stuff like this in css:



                .main{
                
position: absolute;
                
left: 50%;
                
top: 50%;
                
transform: translate(-50%, -50%)


                Check out this site:
                https://getbootstrap.com/docs/4.0/layout/grid/






                share|improve this answer























                  up vote
                  0
                  down vote










                  up vote
                  0
                  down vote









                  Bootstrap is responsive to screen sizes.
                  I've always had good luck using Bootstrap instead of doing stuff like this in css:



                  .main{
                  
position: absolute;
                  
left: 50%;
                  
top: 50%;
                  
transform: translate(-50%, -50%)


                  Check out this site:
                  https://getbootstrap.com/docs/4.0/layout/grid/






                  share|improve this answer












                  Bootstrap is responsive to screen sizes.
                  I've always had good luck using Bootstrap instead of doing stuff like this in css:



                  .main{
                  
position: absolute;
                  
left: 50%;
                  
top: 50%;
                  
transform: translate(-50%, -50%)


                  Check out this site:
                  https://getbootstrap.com/docs/4.0/layout/grid/







                  share|improve this answer












                  share|improve this answer



                  share|improve this answer










                  answered Nov 18 at 20:20









                  Mark B

                  467




                  467















                      -

                      Popular posts from this blog

                      Costa Masnaga

                      Image
                      .mw-parser-output .avviso .mbox-text-div>div,.mw-parser-output .avviso .mbox-text-full-div>div{font-size:90%}.mw-parser-output .avviso .mbox-image div{width:52px}.mw-parser-output .avviso .mbox-text-full-div .hide-when-compact{display:block} Questa voce o sezione sull'argomento Lombardia non cita le fonti necessarie o quelle presenti sono insufficienti . Puoi migliorare questa voce aggiungendo citazioni da fonti attendibili secondo le linee guida sull'uso delle fonti. Segui i suggerimenti del progetto di riferimento. Costa Masnaga comune Localizzazione Stato   Italia Regione Lombardia Provincia Lecco Amministrazione Sindaco Sabina Panzeri (Al centro il cittadino) dall'08/06/2009 Territorio Coordinate 45°46′N 9°17′E  /  45.766667°N 9.283333°E 45.766667; 9.283333  ( Costa Masnaga ) Coordinate: 45°46′N 9°17′E  /  45.766667°N 9.283333°E 45.766667; 9.283333  ( Costa Masnaga ) Altitudine 318 m s.l.m...
                      Read more

                      Fotorealismo

                      Image
                      Guerrino Boatto, Venice's St. Barnaba Church and canal Il fotorealismo è un genere di pittura basato sull'uso di una o più fotografie dalle quali l'artista prende le informazioni necessarie da utilizzare poi nel processo della creazione dell'opera, in genere ad olio o ad acrilico, al fine di avere un aspetto finale il più simile possibile alla fotografia. Indice 1 Storia 2 Lista dei fotorealisti 3 Note 4 Voci correlate 5 Altri progetti Storia | Il fotorealismo è un movimento che nasce negli Stati Uniti d'America alla fine degli anni sessanta [1] sulla scia della Pop Art [2] [3] [4] , e insieme condividono il carattere reazionario verso la travolgente ascesa dei media, che alla metà del ventesimo secolo si trasforma in un fenomeno di massa talmente imponente da minacciare il valore dell'immagine nell'arte. [5] [6] Ne consegue così che, colto il gesto d'inizio che fu della Pop Art, i fotorealisti aprono ad un ...
                      Read more

                      Sidney Franklin

                      Image
                      Questa voce sull'argomento registi statunitensi è solo un abbozzo . Contribuisci a migliorarla secondo le convenzioni di Wikipedia. Sidney Franklin, foto di Carl Van Vechten Oscar alla memoria Irving G. Thalberg 1943 Sidney Franklin , all'anagrafe Sidney Arnold Franklin , (San Francisco, 21 marzo 1893 – Santa Monica, 18 maggio 1972), è stato un regista, produttore cinematografico e attore statunitense. Il 20 giugno 1963, si sposò con l'attrice australiana Enid Bennett. Il matrimonio durò fino alla morte dell'attrice, il 14 maggio 1969 [1] Indice 1 Filmografia 1.1 Regista 1.2 Aiuto regia (parziale) 1.3 Produttore 1.4 Attore (parziale) 2 Note 3 Altri progetti 4 Collegamenti esterni Filmografia | Regista | The Baby , co-regia Chester M. Franklin (1915) The Rivals , co-regia Chester M. Franklin (1915) Little Dick's First Case , co-regia Chester M. Franklin (1915) Her Filmland Hero , co-...
                      Read more