Мой сайт работает нормально для обычных экранов, но у меня есть проблемы с мобильной версией
Вот мой код:
html {
height: 100%;
}
* {
box-sizing: border-box
}
body {
height: 100%;
color: #F4f4f4;
margin: 0;
padding: 0;
font-size: 1.1em;
background: #131313;
font-family: 'Gloria Hallelujah', cursive;
}
/***************************************************************** ANIMAZIONI ***********************************************************************************************************************/
/* Img */
img {
max-width: 600px;
max-height: 800px;
border: 1px solid black;
}
/* Welcome */
h1 {
color: #fff;
text-align: center;
background: #131313;
text-shadow: 1px 1px 1px red;
border-radius: 10px 10px 10px;
box-shadow: ;
position: relative;
z-index: 1;
animation: top 1s 1s;
animation-fill-mode: forwards;
transform: translateY(-130px);
border: 1px solid #0f0f0f;
}
/* Container & Img */
#container {
width: auto;
text-align: left;
padding: 20px;
background-color: #191919;
color: #f3f3f3;
font-size: 1.3em;
border: 1px solid black;
border-radius: 0px 0px 10px 10px;
margin-bottom: 2%;
box-shadow: inset 0px 0px 6px 0px aliceblue;
}
#container .intro {
line-height: 1.5;
word-spacing: 3px;
letter-spacing: 2px;
text-align: center;
}
img[src*="fras"] {
margin-top: 1%;
}
img[src*="aka"] {
margin-top: 4%;
}
.logo {
float: right;
width: 100%;
height: 100%;
object-fit: contain;
margin-bottom: 2%;
margin-top: 6%;
margin-right: 11px;
}
div#ddfumetto {
color: #f4f4f4;
left: 50%;
position: absolute;
top: 70%;
-webkit-animation: fadein 8s;
-moz-animation: fadein 8s;
-ms-animation: fadein 8s;
-o-animation: fadein 8s;
animation: fadein 8s;
background: #131313;
padding: 2%;
border-radius: 70px;
border: 1px solid #0F0F0F;
height: 400px;
width: auto;
font-size: 20px;
line-height: 1.5;
text-align: justify;
letter-spacing: 1px;
margin-right: 1.6%;
}
#desc {
color: #f4f4f4;
left: 50%;
position: absolute;
top: 145%;
height: 400px width: 40%;
-webkit-animation: fadein 8s;
-moz-animation: fadein 8s;
-ms-animation: fadein 8s;
-o-animation: fadein 8s;
animation: fadein 8s;
background: #131313;
border-radius: 80px;
border: 1px solid #0F0F0F;
width: auto;
font-size: 20px;
line-height: 1.5;
text-align: justify;
letter-spacing: 1px;
margin-right: 1.6%;
padding: 2%;
}
#desc a,
#ddfumetto a,
{
color: #f3f3f3;
text-decoration: none;
}
#desc a:hover,
#ddfumetto a:hover,
{
color: #fff;
text-decoration: underline;
}
/* Start */
.start {
background: #191919;
color: #f3f3f3;
font-size: 1.7em;
text-align: center;
border: 1px solid #0f0f0f;
border-radius: 10px;
padding-top: 77%;
padding-bottom: 4%;
}
/****************************************************** MOBILE *****************************************/
/**************************************** 300 t 600 *************/
@media screen and (max-width: 600px) and (min-width: 300px) {
div#ddfumetto {
/* 1st text */
border: 0px;
background: none;
border-radius: 0px;
position: relative;
}
#desc {
/* 2nd text */
border: 0px;
background: none;
border-radius: 0px;
}
.intro {
text-align: justify;
border: 0px;
}
.start {
border: 0px;
background: #131313;
text-align: justify;
line-height: 40px;
letter-spacing: 1px;
}
.start>p {
margin-top: 530%
}
.logo img {
max-width: 230px;
/ object-fit: contain;
margin-top: 5%;
}
h1 {
font-size: 40px
}
p.intro {
font-size: 30px;
}
#container {
border: 0px;
border-radius: 0px;
box-shadow: none;
background: #131313;
}
}
/********************* 601 to 1000 *******************/
@media screen and (max-width: 1000px) and (min-width: 601px) {
div#ddfumetto {
/* First text */
border: 0px;
background: none;
border-radius: 0px;
position: relative;
width: 100%;
}
#desc {
/* 2nd text*/
border: 0px;
background: none;
border-radius: 0px;
position: relative;
}
.intro {
text-align: justify;
border: 0px;
}
.start {
border: 0px;
padding: 0;
text-align: justify;
line-height: 40px;
letter-spacing: 1px;
*/
}
.start>p {
margin-top: 140%
}
.logo img {
max-width: 230px;
object-fit: contain;
margin-top: 5%;
}
h1 {
font-size: 40px
}
p.intro {
font-size: 30px;
}
#container {
border: 0px;
border-radius: 0px;
box-shadow: none;
background: #131313;
}
}
<!DOCTYPE html>
<html lang="it">
<head>
<title>
Yeah
</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="container">
<h1>Welcome</h1>
<p class="intro">intro one <i>bla bla bla</i> bla bla <i>"blabla"</i> </p>
<p class="intro">scope </p>
<p class="intro">intro site</p>
<p class="intro">bla bla bla bla<abbr title="DD">blabla</abbr> bla bla bla bla</p>
<!-- Img1 -->
<div class="logo"><img src="https://i0.wp.com/frasissime.com/wp-content/uploads/2019/09/immagini-con-frasi-sul-karma.jpg?fit=1024%2C576&ssl=1">
</div>
<!--- Img2 -->
<div class="logo"><img src="https://staticfanpage.akamaized.net/wp-content/uploads/sites/6/2020/02/buon-san-valentino-immagini-2.jpeg">
</div>
<!-- Text 1st -->
<div id="ddfumetto">
<p>bla bla bla bla
<b>bla</b> bla bla bla bla Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet </p>
</div>
<!-- Text 2 -->
<div id="desc">
<p>bla bla bla bla bla bla bla bla bla Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit
amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet</p>
</div>
</div>
<!-- Start page -->
<div class="start">
<p>Lorem ipsum dolor sit amet</p>
</div>
</body>
</html>
На мобильном телефоне я бы хотел, чтобы #ddfumetto и # des c с медиа-запросами были читабельными, в основном
- Изображения
- текст 1
- текст 2
- затем основной
Но текст 1 и текст 2 в мобильном симуляции перекрываются или работают странно, и Я не знаю, как решить.