Hello! I make a portfolio for the FCC and I encountered such a problem, when I go to the site from a mobile phone, some of the content doesn’t get uploaded the first time, after updating the page the content loads completely, how can this be fixed and what can be connected with?
I can upload the site to the cloud or link to it if it does not violate the rules of SO
Also, if it doesn’t bother you, tell me as a beginner what to teach me, what to pay more attention to, because I myself see the CSS code for 800 lines, it seems to me that it’s not very good.
I attach all the markup and JS scripts
HTML:
<html lang="en"> <head> <meta charset="UTF-8"> <title>Tvarinsky Klondike</title> <link rel="shortcut icon" href="favicon.ico" /> <link rel="stylesheet" href="css/bootstrap.css" /> <link rel="stylesheet" href="css/bootstrap-theme.css" /> <link rel="stylesheet" href="css/font-awesome.css" /> <link rel="stylesheet" type="text/css" href="css/styles.css" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="js/jquery-3.2.1.min.js"></script> <script src="js/scroll.js"></script> <script src="js/menu.js"></script> </head> <body> <div class="header"> <div class="topmenu"> <div class="col-xs-offset-1"> <div class="deactivatemenu"> <i class="fa fa-times"></i> <p class="mobiletext">Close</p> <div class="col-xs-12"> <a href="#home" class="mobilemenu">Home</a> <a href="#about" class="mobilemenu">About me</a> <a href="#portfolio" class="mobilemenu">Portfolio</a> <a href="#comments" class="mobilemenu">Comments</a> </div> </div> <div class="activatemenu"> <i class="fa fa-bars"></i> <p class="mobiletext">Menu</p> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-md-12 col-xs-11"> <nav> <div class="col-md-2 col-xs-12"> <p class="onheader">TVARINSKY</p> </div> <div class="col-md-8 col-xs-12"> <!--Adaptive Menu--> <!--PC menu--> <div id="menu"> <a href="#home" class="top bottomline">Home</a> <a href="#about" class="top bottomline">About me</a> <a href="#portfolio" class="top bottomline">Portfolio</a> <a href="#comments" class="top bottomline">Comments</a> </div> <!--PC menu--> </div> <div class="col-md-2 col-xs-10"> <div class="icons"> <a href="#" target="_blank"><i class="fa fa-vk topvk iconmargin fa-lg"></i></a> <a href="#" target="_blank"><i class="fa fa-twitter topvk iconmargin fa-lg"></i></a> <a href="#" target="_blank"><i class="fa fa-facebook topvk iconmargin fa-lg"></i></a> </div> </div> </nav> </div> <div class="col-md-6 col-xs-5 col-md-offset-4" id="home"> <h1 class="main">TVARINSKY</h1> </div> <div class="col-md-4 col-xs-12 col-md-offset-4"> <h3 class="main">Front-end developer <br>UI/UX designer</h3> </div> <div class="arrow"> <div class="col-xs-12 col-md-1 col-md-offset-5"> <a href="#about"><i class="fa fa-long-arrow-up bottomarrow fa-flip-vertical fa-2x" aria-hidden="true"></i></a> </div> </div> </div> </div> </div> <div class="content" id="about"> <div class="row"> <div class="col-xs-12 col-md-9 col-md-offset-4"> <div class="col-xs-12 col-md-2"> <p class="main">About me</p> </div> <div class="col-xs-12 col-md-1"> <div class="line"></div> </div> <div class="col-xs-12 col-md-2"> <p class="text">Hello! I'm Ivan.<br> I'm Front-end developer,<br> UI/UX designer.</p> </div> </div> <div class="root col-md-10 col-xs-12 col-md-5 col-md-offset-3"> <div class="col-xs-4 col-md-3 col-md-offset-1"> <i class="fa fa-heart-o fa-3x" aria-hidden="true"></i> <p class="onblock">My life</p> </div> <div class="root col-xs-4 col-md-3 col-md-offset-1"> <i class="fa fa-toggle-on fa-3x"></i> <p class="onblock">It's worked</p> </div> <div class="root col-md-4 col-xs-4 col-md-3 col-md-offset-1"> <i class="fa fa-thumbs-o-up fa-3x" aria-hidden="true"></i> <p class="onblock">Seems good</p> </div> <div class="horizontal"></div> </div> <div class="col-xs-12 col-md-9 col-md-offset-4"> <div class="col-xs-12 col-md-2"> <p class="main">Portfolio</p> </div> <div id="portfolio"> <div class="col-xs-12 col-md-1"> <div class="line"></div> </div> <div class="col-xs-12 col-md-2"> <p class="text">Are provided below<br> the works performed by me.<br> You can estimate them.</p> </div> </div> </div> <div class="movegallery"> <div class="root col-md-10 col-xs-12 col-md-5 col-md-offset-3"> <img src="img\portfolio\2.png" class="galleryphoto small" alt=""> <img src="img\portfolio\3.png" class="galleryphoto small" alt=""> <img src="img\portfolio\4.png" class="galleryphoto small" alt=""> <img src="img\portfolio\7.png" class="galleryphoto small" alt=""> <img src="img\portfolio\6.png" class="galleryphoto small" alt=""> <img src="img\portfolio\5.png" class="galleryphoto small" alt=""> <img src="img\portfolio\1.png" class="galleryphoto small" alt=""> <img src="img\portfolio\8.png" class="galleryphoto small" alt=""> </div> </div> <div class="col-xs-12 col-md-9 col-md-offset-4 margin2"> <div class="col-xs-12 col-md-2"> <div ID="comments"></div> <p class="main pmargin">Testimonials</p> </div> <div class="col-xs-12 col-md-1"> <div class="line"></div> </div> <div class="col-xs-12 col-md-2"> <p class="text">Hello! I'm Ivan.<br> I'm Front-end developer,<br> UI/UX designer.</p> </div> </div> <div class="col-xs-12 col-md-6 col-md-offset-3"> <div class="horizontal2"></div> <h4 class="comments">Comments (2)</h4> <br><br> <textarea name="comment" placeholder="Input message text..." maxlength="300" wrap="hard"></textarea> <a href="#"><i class="fa fa-smile-o fa-2x" aria-hidden="true"></i></a> <a href="#"><i class="fa fa-paper-plane fa-2x" aria-hidden="true"></i></a> <!-- Первый комментарий --> <p class="commentfont">Ekaterina</p> <p class="date">2017.02.11 18:33</p> <p class="comment">Excellent work, Ivan! I have executed everything even before the discussed terms,<br> I helped with the database, I imposed, the excellent adaptive web site!</p> <!-- Первый комментарий --> <!-- Второй комментарий --> <p class="commentfont">Nikita</p> <p class="date">2016.11.07 21:40</p> <p class="comment">Ivan is an excellent expert, I have made everything quickly<br> and qualitatively. PS The functionality has been in addition realized <BR>which was initially not discussed, but at the same time the performer has made <br>everything and didn't demand a payment top. I recommend! </p> <!-- Второй комментарий --> <!-- Показать еще --> <a href="#" class="vmore">View more</a> <!-- Показать еще --> <div class="horizontal2"></div> </div> </div> <div class="footer"> <div class="col-xs-12 col-md-2"> <b><p class="onfooter cmargin">TVARINSKY</p></b> <br><p class="copyright">© 2017 Tvarinsky dev.</p> <br><p class="end">Greetings, Traveler!</p> </div> </div> </div> <div id="scrollup"><i class="fa toparrow fa-long-arrow-up" aria-hidden="true"></i></div> </body> </html> CSS:
@import url('https://fonts.googleapis.com/css?family=Roboto:100'); @import url('https://fonts.googleapis.com/css?family=Oswald'); @import url('https://fonts.googleapis.com/css?family=Raleway'); @import url('https://fonts.googleapis.com/css?family=Raleway:200'); html, body { margin: 0; padding: 0; background: #fff; overflow-x: hidden; } :active, :hover, :focus { outline: 0; outline-offset: 0; } h1, h2, h3, h4, p { cursor: default; } ::selection { background: #f7f7f7; } ::-moz-selection { background: #f7f7f7; } .topmenu { position: absolute; width: 100%; height: 9rem; background: #000; opacity: 0.7; z-index: auto; } .onheader { font-family: 'Roboto', sans-serif; font-size: 2em; color: #eee; display: inline-block; position: relative; line-height: 1.5; margin-top: 15%; } h3.main { font-family: 'Roboto', sans-serif; font-size: 2.250em; color: #eee; display: inline-block; position: relative; line-height: 1.5; text-align: center; right: 3%; } h1.main { font-family: 'Oswald', sans-serif; position: relative; display: inline-block; font-size: 5em; color: #eee; line-height: 0.5; margin-top: 40%; letter-spacing: -2px; right: 1.5%; } .header { background: url('../img/header.png'); -moz-background-size: 100%; /* Firefox 3.6+ */ -webkit-background-size: 100%; /* Safari 3.1+ и Chrome 4.0+ */ -o-background-size: 100%; /* Opera 9.6+ */ background-size: 100%; /* Современные браузеры */ background-repeat: no-repeat; height: 100%; } .bottomarrow { color: #eee; position: relative; left: 3.5%; margin-top: 20%; border: 1px solid #b1b1b1; padding-left: 12px; padding-right: 12px; padding-top: 5px; padding-bottom: 5px; transition: 0.35s } .toparrow { color: #404040; position: relative; left: 3.5%; margin-top: 20%; transition: 0.35s; font-size: 1.5em; } .bottomarrow:hover { color: #d1d1d1; border: 1px solid #249cce; position: relative; transition: 0.35s; } p.main { font-family: 'Raleway', sans-serif; font-size: 3.000em; color: #404040; letter-spacing: -2px; display: inline-block; position: relative; } .line { width: 1px; background-color: #626060; height: 75px; display: inline-block; position: relative; margin-bottom: 3%; } p.text { font-family: 'Raleway', sans-serif; font-size: 1.125em; color: #404040; display: inline-block; position: relative; text-align: center; } .pmargin { right: 15%; } .fa-heart-o { border: 5px solid #242424; padding: 10px; border-radius: 40px; border-width: thin; margin-top: 70px; transition: 0.25s; } .fa-heart-o:hover { color: #249cce; transition: 0.25s; border: 1px solid #249cce; } .fa-toggle-on { border: 5px solid #292929; padding: 10px; padding-left: 7px; border-radius: 40px; border-width: thin; margin-top: 70px; transition: 0.25s; } .fa-toggle-on:hover { color: #249cce; transition: 0.25s; border: 1px solid #249cce; } .fa-thumbs-o-up { border: 5px solid #292929; padding: 10px; padding-left: 15px; border-radius: 40px; border-width: thin; margin-top: 70px; text-align: center; transition: 0.25s; } .fa-thumbs-o-up:hover { color: #249cce; transition: 0.25s; border: 1px solid #249cce; } p.onblock { font-family: 'Raleway', sans-serif; font-size: 1.313em; color: #404040; display: block; position: relative; text-align: left; } .horizontal { width: 100%; background-color: #6a6a6a; height: 1px; display: inline-block; position: relative; left: 5%; margin-bottom: 10%; margin-top: 2%; } .horizontal2 { width: 100%; background-color: #6a6a6a; height: 1px; display: inline-block; position: relative; margin-bottom: 2%; margin-top: 2%; } .galleryphoto:hover { -webkit-filter: grayscale(0%) blur(0px); transition: 0.35s; } .galleryphoto { position: relative; -webkit-filter: grayscale(100%) blur(2px); transition: 0.35s; border: 1px solid #404040; margin-top: 15%; } .small { width: 14rem; height: 25rem; margin: 15px; } .medium { width: 14rem; height: 25rem; margin: 15px; } .big { width: 30rem; height: 40rem; margin: 15px; } .movegallery { margin-left: 2.5%; padding-top: 25%; } .margin { position: relative; margin-top: 25%; } .margin2 { position: relative; margin-top: 5.5%; } h4.comments { font-family: 'Oswald', sans-serif; font-size: 1.625em; color: #676666; display: inline-block; position: relative; border-bottom: 1px solid #676666; padding-bottom: 5px; left: 3%; } .fa-smile-o { position: relative; border: 1px solid #dddddd; padding: 12px; border-radius: 5px; bottom: 17px; color: #b1b1b1; transition: 0.35s; left: 3%; } .fa-smile-o:hover { color: #249cce; transition: 0.35s; } .fa-paper-plane { position: relative; border: 1px solid #dddddd; padding: 12px; border-radius: 5px; bottom: 17px; color: #b1b1b1; transition: 0.35s; left: 3%; } .fa-paper-plane:hover { color: #249cce; transition: 0.35s; } textarea { padding: 12px; position: relative; left: 3%; width: 80%; height: 53px; resize: none; border: 1px solid #dddddd; border-radius: 5px; font-size: 14px; color: #888585; font-family: 'TimesNewRoman', sans-serif; transition: 0.25s; overflow: hidden; } textarea:focus { border: 1px solid #ececec; color: #404040; transition: 0.25s; height: 83px; } .commentfont { position: relative; color: #249cce; font-size: 1.575em; font-family: 'Oswald', sans-serif; display: inline-block; left: 5%; margin-top: 2%; } .date { position: relative; color: #a4a4a4; font-size: 1.005em; font-family: 'Oswald', sans-serif; display: inline-block; left: 6%; margin-top: 2%; } .comment { position: relative; color: #676666; font-size: 1.000em; font-family: 'TimesNewRoman', sans-serif; display: block; left: 5%; } .vmore { border: 1px solid #575757; padding-left: 20px; padding-right: 20px; text-decoration: none; margin-top: 5%; left: 40%; position: relative; color: #575757; font-size: 1.250em; font-family: 'Oswald', sans-serif; display: inline-block; transition: 0.35s; } .vmore:hover { text-decoration: none; border: 1px solid #249cce; transition: 0.35s; color: #249cce; } .main2 { font-family: 'Raleway', sans-serif; font-size: 3.000em; color: #404040; letter-spacing: -1px; display: inline-block; position: relative; margin-top: 7%; left: 4%; } .iconmargin { margin-top: 20%; padding-left: 5%; } .topvk { color: #e1e1e1 !important; display: inline-block; position: relative; left: 5%; opacity: 0.6; transition: 0.35s; margin-left: 1.5%; font-size: 1.650em; } .topvk:hover{ transition: 0.35s; opacity: 1; } .vk { display: inline-block; position: relative; color: #404040; transition: 0.35s; font-size: 2.375em; opacity: 0.6; } .fa-vk:hover { transition: 0.35s; opacity: 1; } .facebook { display: inline-block; position: relative; color: #404040; font-size: 2.375em; transition: 0.35s; opacity: 0.6; } .fa-facebook:hover { transition: 0.35s; opacity: 1; } .twitter { display: inline-block; position: relative; color: #404040; font-size: 2.375em; transition: 0.35s; opacity: 0.6; } .fa-twitter:hover { transition: 0.35s; opacity: 1; } .github { display: inline-block; position: relative; color: #404040; font-size: 2.375em; transition: 0.35s; opacity: 0.6; } .fa-github:hover { transition: 0.35s; opacity: 1; } .envelope { display: inline-block; position: relative; color: #404040; font-size: 2.375em; transition: 0.35s; opacity: 0.6; } .envelope:hover { transition: 0.35s; opacity: 1; } .footer { margin-top: 7%; background: #323232; width: 100%; height: 150px; } .onfooter { position: relative; color: #b4b4b4; font-size: 2em; font-family: 'roboto', sans-serif; display: inline-block; left: 20%; text-decoration: none !important; margin-top: 20%; transition: 0.35s; } .copyright { position: relative; color: #b4b4b4; font-size: 1.1em; font-family: 'Oswald', sans-serif; display: inline-block; left: 25%; text-decoration: none !important; transition: 0.35s; } .cmargin { margin-top: 10%; } .onfooter:hover{ transition: 0.35s; color: #249cce; } .end { font-family: 'Georgia', sans-serif; position: relative; color: #b4b4b4; font-size: 0.9em; display: block; left: 32%; text-decoration: none !important; transition: 0.35s; } a.top { list-style-type: none; display: inline-block; margin-left: 6%; margin-top: 4%; color: #e6e6e6; font-size: 1.5em; font-family: 'Roboto', sans-serif; transition: 0.35s; text-decoration: none; } .mobiletext { display: inline-block; color: #e6e6e6; font-size: 1.5em; font-family: 'Oswald', sans-serif; transition: 0.35s; text-decoration: none; position: relative; } .mobilemenu { display: block; color: #e6e6e6 !important; font-size: 2em; font-family: 'roboto', sans-serif; transition: 0.35s; text-decoration: none !important; position: relative; border: 1px solid #404040; padding-right: 20%; padding-left: 20%; text-align: center; } .bottomline { position: relative; color: #ff3296; cursor: pointer; } .bottomline:after { display: block; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px; background-color: #249cce; content: ""; transition: width 0.2s; } .bottomline:hover { color: #fff; } .bottomline:hover:after { width: 100%; } .fa-bars { text-decoration: none; color: #e6e6e6; position: relative; } .fa-times { text-decoration: none; color: #e6e6e6; position: relative; } .menubg { visibility: hidden; height: 100%; width: 100%; background: #404040; } .deactivatemenu { display: none; } .activatemenu { display: inline; } #scrollup { position: fixed; /* фиксированная позиция */ opacity: 0; /* прозрачность */ padding: 5px 15px 10px; /* отступы */ background: none; border: 1px solid #b1b1b1; border-radius: 40px; /* скругление углов */ -webkit-border-radius: 5px; -moz-border-radius: 5px; right: 15%; /* отступ слева */ bottom: 5%; /* отступ снизу */ display: none; /* спрятать блок */ cursor: pointer; } /* ПК */ @media (min-width: 1200px) { .fa-bars, .mobiletext { display: none; } } /* Планшеты */ @media (min-width: 768px) and (max-width: 979px) { a.top, .bottomline, .onheader { display: none; } a.top { display: block; } .line { display: inline; } nav { display: none; } .topmenu, .mobiletext, .icons { display: none; } } /* Телефоны и планшеты */ @media (max-width: 767px) and (min-width: 500px) { a.top, .bottomline, .onheader, .icons { display: none; } h1.main {margin-left:15%;} .header { -moz-background-size: 400%; /* Firefox 3.6+ */ -webkit-background-size: 400%; /* Safari 3.1+ и Chrome 4.0+ */ -o-background-size: 400%; /* Opera 9.6+ */ background-size: 400%; /* Современные браузеры */ height: 100%;} .pmargin { right: 0%; } .line { display: none; } a.top{ margin-top: 15px; } .fa-heart-o, .fa-toggle-on .fa-thumbs-o-up { font-size: 2em; } } /* Маленькие телефоны */ @media (max-width: 480px) { a.top, .bottomline, .onheader, .icons { display: none; } h1.main { margin-left:5%; margin-top: 60%; font-size: 3em; text-align: left; } h3.main { font-size: 1.5em; margin-left:5%; text-align: left; } .header { -moz-background-size: 175%; /* Firefox 3.6+ */ -webkit-background-size: 175%; /* Safari 3.1+ и Chrome 4.0+ */ -o-background-size: 175%; /* Opera 9.6+ */ background-size: 175%; /* Современные браузеры */ height: 40%;} .line { display: none; } .vmore { left: 32.5%; } .topmenu { height: 3rem; opacity: 1; } .fa-bars { font-size: 1.5em; z-index: 5; } .fa-times { font-size: 1.5em; z-index: 5; } .bottomarrow{ display: none; } .iconmargin { margin-left: 8%; } .pmargin { right: 0%; } .onheader { background: #303030; border-radius: 2px; padding-right: 10px; padding-left: 10px; } p.main { margin-top: 5%; font-size: 2.250em; margin-left: 5%; } p.text { margin-left: 10%; text-align: left; } .fa-heart-o, .fa-toggle-on, .fa-thumbs-o-up { font-size: 2em; } .horizontal { left: 0%; } .comment { max-width: 28rem; } textarea { width: 60%; } #scrollup { position: fixed; /* фиксированная позиция */ opacity: 0; /* прозрачность */ padding: 5px 15px 10px; /* отступы */ background: none; border: 1px solid #b1b1b1; border-radius: 40px; /* скругление углов */ -webkit-border-radius: 5px; -moz-border-radius: 5px; right: 10%; /* отступ слева */ bottom: 5%; /* отступ снизу */ cursor: pointer; } .root{ text-align:center; } .root p{ text-align:center; } MENU JS:
$(document).ready(function() { $('.activatemenu').click(function(){ $('.deactivatemenu').css("position", "absolute"); $('.topmenu').animate({ height: "200%"}, 500); $('.deactivatemenu').animate({ top: "5%"}, 500); $('.activatemenu').fadeOut(250); $('.deactivatemenu').fadeIn(1000); $("html,body").css("overflow", "hidden"); $('.deactivatemenu').css("z-index", "5"); $('.activatemenu').css("z-index", "5"); $('.topmenu').css("z-index", "5"); }); $('.deactivatemenu').click(function(){ $('.topmenu').animate({ height: "3rem"}, 500); $('.activatemenu').fadeIn(1000); $('.deactivatemenu').fadeOut(250); $("html,body").css("overflow","auto"); $("html,body").css("overflow-x","hidden"); $('.deactivatemenu').css("z-index", "5"); $('.activatemenu').css("z-index", "5"); $('.topmenu').css("z-index", "5"); }); }); Scroll JS:
$(document).ready(function(){ $("#menu").on("click","a", function (event) { event.preventDefault(); var id = $(this).attr('href'), top = $(id).offset().top; $('body,html').animate({scrollTop: top}, 1500); }); }); $(document).ready(function(){ $(".deactivatemenu").on("click","a", function (event) { event.preventDefault(); var id = $(this).attr('href'), top = $(id).offset().top; $('body,html').animate({scrollTop: top}, 1500); }); }); $(document).ready(function(){ $(".arrow").on("click","a", function (event) { event.preventDefault(); var id = $(this).attr('href'), top = $(id).offset().top; $('body,html').animate({scrollTop: top}, 1500); }); }); window.onload = function() { var scrollUp = document.getElementById('scrollup'); scrollUp.onmouseover = function() { scrollUp.style.opacity= 0.8; scrollUp.style.filter = 'alpha(opacity=30)'; }; scrollUp.onmouseout = function() { scrollUp.style.opacity = 1; scrollUp.style.filter = 'alpha(opacity=50)'; }; scrollUp.onclick = function() { $('html, body').animate({scrollTop:0}, 1500); }; window.onscroll = function () { if ( window.pageYOffset >= 200 ) { $(scrollup).stop().animate({opacity:'1.0'},100); scrollup.style.display = 'block'; } else { $(scrollup).stop().animate({opacity:'0.0'},100); scrollup.style.display = 'none'; } }; }; 
<link rel="stylesheet" href="css/font-awesome.css" /> <link rel="stylesheet" href="css/font-awesome.min.css" />? - Vismanbody.nav .deactivatemenu ...- Artem Gorlachev