мои 2 изображения, которые я вставил на свой веб-сайт, не будут отображаться на мобильном телефоне, я не уверен, что я сделал не так, но я использую кодовое перо для их просмотра, его сейчас нет на сайте, я думаю, что-то в css, вероятно,/////////////////////////////////////////////////////////////////////////////
это ссылка на него https://codepen.io/anon/pen/YbKddQ
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My First Responsive Website</title>
<link href="css/styles.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
</head>
<body>
<header class="headerTop">
</header>
<nav><a href="index.html">Home</a><a href="about.html">About</a><a href="services.html">Services</a><a href="contact.html">Contact</a></nav>
<section class="sectionTop">
<article class="articleTop"><img src="https://previews.dropbox.com/p/thumb/AAYuiTMxPKYGhoiFTL1IxEOvC6SgPFn3_LrjR0VP99WxTohOmcAWu46os9UNbNWfRSag90skU0NYZA8q_GUgKOwIsBwAclH8LM3T3IL_eJFZF-eyiSMQeL7MkSm6mvRUR1JG6v4VIIWFre7UL81V-lNO_N35vSfodfBnIRidcCyMoZFXBWK5n_E2niV_QLtj5OB8GAbAytyGv8992oh9gG2PfGupV_nRe7crovpwY0sjzYfw1u6yiSLW5qoaj8GsOlqnjfAVNG1zbPLcobmpfmtnKu1sGhvPesU2eCvKGxJgfP0aMbalm-Xk7jMDF2ujKe7G2Cu1_tgHVS7ctHH5nOqL/p.jpeg?size_mode=5" class="imgClass"></article>
<article class="articleTop">
<br>
<h2>About us</h2>
<br> this is rigt column. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam semper molestie orci vel ullamcorper. Praesent nec ante maximus, varius neque eget, dapibus ex. Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Nullam et dui ultricies, posuere dolor sed, dapibus eros. Duis suscipit rhoncus elit nec tincidunt. In placerat vel lorem vel eleifend. Phasellus et egestas dolor. Nulla congue sit amet felis vitae condimentum. Morbi a blandit
eros. In tempor nibh sed lectus hendrerit, eu dictum justo placerat. </article>
</section>
<section class="sectionMiddle">
<div class="divMiddle">
<article class="aticleMiddle">
<br>
<h2>Events and News</h2>
<br> Left: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam augue non magna blandit consequat. Nunc porttitor ante sagittis convallis elementum. Quisque ornare mi nec odio eleifend ultrices. Morbi pellentesque fermentum libero
sed dapibus. Integer ultricies quam sit amet ultrices tempus. Aenean tincidunt tellus id tortor ullamcorper rutrum. Donec scelerisque aliquam porta. Donec molestie elementum magna ac feugiat. Phasellus finibus cursus justo nec mollis.
</article>
<article class="aticleMiddle"><iframe width="560" height="315" src="https://www.youtube.com/embed/S1TjgnxOg58" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</article>
</div>
</section>
<footer><i class="fab fa-facebook" style="font-size: 50px; color:white;margin: 10px;"></i> <i class="fab fa-youtube-square" style="font-size: 50px; color:white;margin: 10px;"></i>
</footer>
</body>
</html>
/////////////////////////////////////////////////////////////////////////////css
/////////////////////////////////////////////////////////////////////////////
*{
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
body{
text-align: center;
font-family: 'Nunito', sans-serif;
}
.headerTop{
width:100%;
background-image: url(https://previews.dropbox.com/p/thumb/AAZVxm7mo7ZTDIjXs8CdV_j3tjnKA4ancACjz6iQpuUgbGkDVenePmzehylA_IT031DgyBIeweGmiuQDyJJbTsJGWsw7_E5TBmN1EqepzzSHHkp8mW8ADhX_tbDeSZiOrIFiWldcukxUW3n0Q93cOyTbHmT2-iE4isHm8esMY8jR65idrJUe6f2qVfMhDYEUKK3VB4EQLOlK49qJPRMD4rkZ2wv8w-u3cKHuaON2lepVFmCeBzeQkDre_l_dy3A1APtUkbfybE8_bdo6pzVx0ECW0HZ1OMI_kRiS-BoykQqjuMOynsLs2uSSPbjdqia-oQp8RyJh7z9D4quvjXaBBrlu/p.png?size_mode=5);
height: 260px;
background-repeat: no-repeat;
background-size:cover;
background-size: 100% 100%, cover;
}
.divHeader{
width:60%;
overflow: auto;
margin: auto;
background-color:rgba(255,255,255,0.3);
padding: 20px;
border-radius: 30px;
}
footer{
width:100%;
background-color: gray;
height: 100px;
color:white;
}
.sectionTop{
width:100%;
overflow: auto;
}
.articleTop{
width:50%;
float:left;
padding: 20px;
padding-top: 30px;
margin-bottom: 200px-;
font-family: cursive;
}
.sectionMiddle{
width:100%;
overflow: auto;
background-color: #000000;
color:white;
padding-top: 30px;
padding-bottom: 30px;
}
.divMiddle{
width:80%;
overflow: auto;
margin: auto;
}
.aticleMiddle{
width:50%;
float: left;
padding: 30px;
}
a{
font
}
h1{
font-size: 250%;
}
h2 {
}
.headerText{
font-size: 150%;
}
.imgClass{
max-width:100%;
height:auto;
}
nav{
width: 100%;
height: auto;
}
nav a{
width:25%;
height: 50px;
color:white;
border:1px solid #000000;
background-color: black;
display:inline-block;
font-size: 130%;
text-decoration: none;
padding-top: 10px;
}
nav a:hover{
width:25%;
height: 50px;
color:maroon;
border:1px solid #000000;
background-color: white;
display:inline-block;
font-size: 140%;
text-decoration: none;
padding-top: 10px;
}
iframe{
width: 100%;
height: 315;
}
/*CSS Media Queries Start here*/
/*When browser width is 768px or less*/
@media screen and (max-width:768px) {
.articleTop{
width:100%;
float:none;
}
.divMiddle{
width:100%;
}
.aticleMiddle{
width:100%;
float: none;
}
.divHeader{
width:90%;
}
.headerTop{
height:auto;
padding-top:50px;
padding-bottom:50px;
}
h1{
font-size: 170%;
}
.headerText{
font-size: 120%;
}
.imgClass{
width:100%;
height:auto;
}
nav a{
width:100%;
height: 50px;
color:white;
border:1px solid #000000;
background-color: black;
display:inline-block;
font-size: 130%;
text-decoration: none;
padding-top: 10px;
}
nav a:hover{
width:100%;
height: 50px;
color:black;
border:1px solid #000000;
background-color: white;
display:inline-block;
font-size: 130%;
text-decoration: none;
padding-top: 10px;
}
iframe{
width: 100%;
height: auto;
}
}
/*When browser width is 1024px or less*/
@media screen and (max-width:1024px) {
.articleTop{
width:100%;
float:none;
}
.divMiddle{
width:100%;
}
.aticleMiddle{
width:100%;
float: none;
}
/* .divHeader{
width:90%;
} */
.headerTop{
height:auto;
padding-top:50px;
padding-bottom:50px;
}
/* h1{
font-size: 170%;
}
/*
.headerText{
font-size: 120%;
} */
}