ColGam Posted November 28, 2017 Share Posted November 28, 2017 Hi. I am having an issue with my image not being centered on my mobile version of my site. It's fine on the web version - the image is centered, I can click all the social links, and the page scrolls fine. However, the image expands too far on mobile, I can't click the bottom social links and it does not scroll down. I have attached both HTML and CSS. Thank you for your help. <html> <head> <title>Example Title site/title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]--> <link rel="stylesheet" href="assets/css/main.css" /> <!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]--> <!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ie9.css" /><![endif]--> </head> <body class="loading"> <div id="wrapper"> <div id="bg"></div> <div id="overlay"></div> <div id="main"> <!-- Header --> <header id="header"> <h1> <img src="images/hirwhite.png" alt="HTML5 Icon" width="500" height="250"></h1> <p>This <span style="font-weight:bold">is </span>and <span style="font-weight:bold">example/span> text.</p> <p><span style="font-weight:bold">DEMOS </span></p> <p><span style="font-weight:bold">LICENSING </span></p> <nav> <ul> <li><a href="https://www.facebook.com/" class="icon fa-facebook"><span class="label">Facebook</span></a></li> <li><a href="https://twitter.com/" class="icon fa-twitter"><span class="label">Twitter</span></a></li> <li><a href="https://soundcloud.com/" class="icon fa-soundcloud"><span class="label">SoundCloud</span></a></li> <li><a href="https://soundcloud.com/" class="icon fa-youtube"><span class="label">YouTube</span></a></li> <li><a href="https://www.beatport.com/" class="icon fa-headphones"><span class="label">Beatport</span></a></li> <li><a href="http://spotify.com" class="icon fa-spotify"><span class="label">Spotify</span></a></li> </ul> </nav> </header> <!-- Footer --> <footer id="footer"> <span class="copyright">© High Intensity Records 2017..</span> </footer> </div> </div> <!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]--> <script> window.onload = function() { document.body.className = ''; } window.ontouchmove = function() { return false; } window.onorientationchange = function() { document.body.scrollTop = 0; } </script> </body> </html> @import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,900"); @import url("font-awesome.min.css"); /* Aerial by HTML5 UP html5up.net | @ajlkn Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) */ /* Reset */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } body { -webkit-text-size-adjust: none; } /* Box Model */ *, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /* Basic */ body, input, select, textarea { color: #fff; font-family: 'Source Sans Pro', sans-serif; font-size: 15pt; font-weight: 300 !important; letter-spacing: -0.025em; line-height: 1.75em; } body { background: #fff; overflow: hidden; } body.loading * { -moz-animation: none !important; -webkit-animation: none !important; -ms-animation: none !important; animation: none !important; } a { -moz-transition: border-color 0.2s ease-in-out; -webkit-transition: border-color 0.2s ease-in-out; -ms-transition: border-color 0.2s ease-in-out; transition: border-color 0.2s ease-in-out; border-bottom: dotted 1px; color: inherit; outline: 0; text-decoration: none; } a:hover { border-color: transparent; } /* Icon */ .icon { text-decoration: none; position: relative; } .icon:before { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: FontAwesome; font-style: normal; font-weight: normal; text-transform: none !important; } .icon > .label { display: none; } /* Wrapper */ @-moz-keyframes wrapper { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes wrapper { 0% { opacity: 0; } 100% { opacity: 1; } } @-ms-keyframes wrapper { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes wrapper { 0% { opacity: 0; } 100% { opacity: 1; } } #wrapper { -moz-animation: wrapper 3s forwards; -webkit-animation: wrapper 3s forwards; -ms-animation: wrapper 3s forwards; animation: wrapper 3s forwards; height: 100%; left: 0; opacity: 0; position: fixed; top: 0; width: 100%; } /* BG */ #bg { -moz-animation: bg 60s linear infinite; -webkit-animation: bg 60s linear infinite; -ms-animation: bg 60s linear infinite; animation: bg 60s linear infinite; -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); /* Set your background with this */ background: #463569 url("images/bg.jpg") bottom left; background-repeat: repeat-x; height: 100%; left: 0; opacity: 1; position: fixed; top: 0; } @-moz-keyframes bg { 0% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 100% { -moz-transform: translate3d(-2250px,0,0); -webkit-transform: translate3d(-2250px,0,0); -ms-transform: translate3d(-2250px,0,0); transform: translate3d(-2250px,0,0); } } @-webkit-keyframes bg { 0% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 100% { -moz-transform: translate3d(-2250px,0,0); -webkit-transform: translate3d(-2250px,0,0); -ms-transform: translate3d(-2250px,0,0); transform: translate3d(-2250px,0,0); } } @-ms-keyframes bg { 0% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 100% { -moz-transform: translate3d(-2250px,0,0); -webkit-transform: translate3d(-2250px,0,0); -ms-transform: translate3d(-2250px,0,0); transform: translate3d(-2250px,0,0); } } @keyframes bg { 0% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 100% { -moz-transform: translate3d(-2250px,0,0); -webkit-transform: translate3d(-2250px,0,0); -ms-transform: translate3d(-2250px,0,0); transform: translate3d(-2250px,0,0); } } #bg { background-size: 2250px auto; width: 6750px; } /* Overlay */ @-moz-keyframes overlay { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes overlay { 0% { opacity: 0; } 100% { opacity: 1; } } @-ms-keyframes overlay { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes overlay { 0% { opacity: 0; } 100% { opacity: 1; } } #overlay { -moz-animation: overlay 1.5s 1.5s forwards; -webkit-animation: overlay 1.5s 1.5s forwards; -ms-animation: overlay 1.5s 1.5s forwards; animation: overlay 1.5s 1.5s forwards; background-attachment: fixed, fixed; background-image: url("images/overlay-pattern.png"), url("images/overlay.svg"); background-position: top left, center center; background-repeat: repeat, no-repeat; background-size: auto, cover; height: 100%; left: 0; opacity: 0; position: fixed; top: 0; width: 100%; } /* Main */ #main { height: 100%; left: 0; position: fixed; text-align: center; top: 0; width: 100%; } #main:before { content: ''; display: inline-block; height: 100%; margin-right: 0; vertical-align: middle; width: 1px; } /* Header */ @-moz-keyframes header { 0% { -moz-transform: translate3d(0,1em,0); -webkit-transform: translate3d(0,1em,0); -ms-transform: translate3d(0,1em,0); transform: translate3d(0,1em,0); opacity: 0; } 100% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; } } @-webkit-keyframes header { 0% { -moz-transform: translate3d(0,1em,0); -webkit-transform: translate3d(0,1em,0); -ms-transform: translate3d(0,1em,0); transform: translate3d(0,1em,0); opacity: 0; } 100% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; } } @-ms-keyframes header { 0% { -moz-transform: translate3d(0,1em,0); -webkit-transform: translate3d(0,1em,0); -ms-transform: translate3d(0,1em,0); transform: translate3d(0,1em,0); opacity: 0; } 100% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; } } @keyframes header { 0% { -moz-transform: translate3d(0,1em,0); -webkit-transform: translate3d(0,1em,0); -ms-transform: translate3d(0,1em,0); transform: translate3d(0,1em,0); opacity: 0; } 100% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; } } @-moz-keyframes nav-icons { 0% { -moz-transform: translate3d(0,1em,0); -webkit-transform: translate3d(0,1em,0); -ms-transform: translate3d(0,1em,0); transform: translate3d(0,1em,0); opacity: 0; } 100% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; } } @-webkit-keyframes nav-icons { 0% { -moz-transform: translate3d(0,1em,0); -webkit-transform: translate3d(0,1em,0); -ms-transform: translate3d(0,1em,0); transform: translate3d(0,1em,0); opacity: 0; } 100% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; } } @-ms-keyframes nav-icons { 0% { -moz-transform: translate3d(0,1em,0); -webkit-transform: translate3d(0,1em,0); -ms-transform: translate3d(0,1em,0); transform: translate3d(0,1em,0); opacity: 0; } 100% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; } } @keyframes nav-icons { 0% { -moz-transform: translate3d(0,1em,0); -webkit-transform: translate3d(0,1em,0); -ms-transform: translate3d(0,1em,0); transform: translate3d(0,1em,0); opacity: 0; } 100% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; } } #header { -moz-animation: header 1s 2.25s forwards; -webkit-animation: header 1s 2.25s forwards; -ms-animation: header 1s 2.25s forwards; animation: header 1s 2.25s forwards; -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); cursor: default; display: inline-block; opacity: 0; position: relative; text-align: center; top: -1em; vertical-align: middle; width: 90%; } #header h1 { font-size: 4.35em; font-weight: 900; letter-spacing: -0.035em; line-height: 1em; } #header p { font-size: 1.25em; margin: 0.75em 0 0.25em 0; opacity: 0.75; } #header nav { margin: 1.5em 0 0 0; } #header nav li { -moz-animation: nav-icons 0.5s ease-in-out forwards; -webkit-animation: nav-icons 0.5s ease-in-out forwards; -ms-animation: nav-icons 0.5s ease-in-out forwards; animation: nav-icons 0.5s ease-in-out forwards; -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); display: inline-block; height: 5.35em; line-height: 5.885em; opacity: 0; position: relative; top: 0; width: 5.35em; } #header nav li:nth-child(1) { -moz-animation-delay: 2.5s; -webkit-animation-delay: 2.5s; -ms-animation-delay: 2.5s; animation-delay: 2.5s; } #header nav li:nth-child(2) { -moz-animation-delay: 2.75s; -webkit-animation-delay: 2.75s; -ms-animation-delay: 2.75s; animation-delay: 2.75s; } #header nav li:nth-child(3) { -moz-animation-delay: 3s; -webkit-animation-delay: 3s; -ms-animation-delay: 3s; animation-delay: 3s; } #header nav li:nth-child(4) { -moz-animation-delay: 3.25s; -webkit-animation-delay: 3.25s; -ms-animation-delay: 3.25s; animation-delay: 3.25s; } #header nav li:nth-child(5) { -moz-animation-delay: 3.5s; -webkit-animation-delay: 3.5s; -ms-animation-delay: 3.5s; animation-delay: 3.5s; } #header nav li:nth-child(6) { -moz-animation-delay: 3.75s; -webkit-animation-delay: 3.75s; -ms-animation-delay: 3.75s; animation-delay: 3.75s; } #header nav li:nth-child(7) { -moz-animation-delay: 4s; -webkit-animation-delay: 4s; -ms-animation-delay: 4s; animation-delay: 4s; } #header nav li:nth-child(8) { -moz-animation-delay: 4.25s; -webkit-animation-delay: 4.25s; -ms-animation-delay: 4.25s; animation-delay: 4.25s; } #header nav li:nth-child(9) { -moz-animation-delay: 4.5s; -webkit-animation-delay: 4.5s; -ms-animation-delay: 4.5s; animation-delay: 4.5s; } #header nav li:nth-child(10) { -moz-animation-delay: 4.75s; -webkit-animation-delay: 4.75s; -ms-animation-delay: 4.75s; animation-delay: 4.75s; } #header nav a { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; border: 0; display: inline-block; } #header nav a:before { -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; border-radius: 100%; border: solid 1px #fff; display: block; font-size: 1.75em; height: 2.5em; line-height: 2.5em; position: relative; text-align: center; top: 0; width: 2.5em; } #header nav a:hover { font-size: 1.1em; } #header nav a:hover:before { background-color: rgba(255, 255, 255, 0.175); color: #fff; } #header nav a:active { font-size: 0.95em; background: none; } #header nav a:active:before { background-color: rgba(255, 255, 255, 0.35); color: #fff; } #header nav a span { display: none; } /* Footer */ #footer { background-image: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.5) 75%); background-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.5) 75%); background-image: -ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.5) 75%); background-image: linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.5) 75%); bottom: 0; cursor: default; height: 6em; left: 0; line-height: 8em; position: absolute; text-align: center; width: 100%; } /* Wide */ @media screen and (max-width: 1680px) { /* Basic */ body, input, select, textarea { font-size: 13pt; } /* BG */ @-moz-keyframes bg { 0% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 100% { -moz-transform: translate3d(-1500px,0,0); -webkit-transform: translate3d(-1500px,0,0); -ms-transform: translate3d(-1500px,0,0); transform: translate3d(-1500px,0,0); } } @-webkit-keyframes bg { 0% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 100% { -moz-transform: translate3d(-1500px,0,0); -webkit-transform: translate3d(-1500px,0,0); -ms-transform: translate3d(-1500px,0,0); transform: translate3d(-1500px,0,0); } } @-ms-keyframes bg { 0% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 100% { -moz-transform: translate3d(-1500px,0,0); -webkit-transform: translate3d(-1500px,0,0); -ms-transform: translate3d(-1500px,0,0); transform: translate3d(-1500px,0,0); } } @keyframes bg { 0% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 100% { -moz-transform: translate3d(-1500px,0,0); -webkit-transform: translate3d(-1500px,0,0); -ms-transform: translate3d(-1500px,0,0); transform: translate3d(-1500px,0,0); } } #bg { background-size: 1500px auto; width: 4500px; } } /* Normal */ @media screen and (max-width: 1280px) { /* Basic */ body, input, select, textarea { font-size: 12pt; } /* BG */ @-moz-keyframes bg { 0% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 100% { -moz-transform: translate3d(-750px,0,0); -webkit-transform: translate3d(-750px,0,0); -ms-transform: translate3d(-750px,0,0); transform: translate3d(-750px,0,0); } } @-webkit-keyframes bg { 0% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 100% { -moz-transform: translate3d(-750px,0,0); -webkit-transform: translate3d(-750px,0,0); -ms-transform: translate3d(-750px,0,0); transform: translate3d(-750px,0,0); } } @-ms-keyframes bg { 0% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 100% { -moz-transform: translate3d(-750px,0,0); -webkit-transform: translate3d(-750px,0,0); -ms-transform: translate3d(-750px,0,0); transform: translate3d(-750px,0,0); } } @keyframes bg { 0% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 100% { -moz-transform: translate3d(-750px,0,0); -webkit-transform: translate3d(-750px,0,0); -ms-transform: translate3d(-750px,0,0); transform: translate3d(-750px,0,0); } } #bg { background-size: 750px auto; width: 2250px; } } /* Mobile */ @media screen and (max-width: 736px) { /* Basic */ body { min-width: 320px; } body, input, select, textarea { font-size: 11pt; } /* BG */ @-moz-keyframes bg { 0% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 100% { -moz-transform: translate3d(-300px,0,0); -webkit-transform: translate3d(-300px,0,0); -ms-transform: translate3d(-300px,0,0); transform: translate3d(-300px,0,0); } } @-webkit-keyframes bg { 0% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 100% { -moz-transform: translate3d(-300px,0,0); -webkit-transform: translate3d(-300px,0,0); -ms-transform: translate3d(-300px,0,0); transform: translate3d(-300px,0,0); } } @-ms-keyframes bg { 0% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 100% { -moz-transform: translate3d(-300px,0,0); -webkit-transform: translate3d(-300px,0,0); -ms-transform: translate3d(-300px,0,0); transform: translate3d(-300px,0,0); } } @keyframes bg { 0% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 100% { -moz-transform: translate3d(-300px,0,0); -webkit-transform: translate3d(-300px,0,0); -ms-transform: translate3d(-300px,0,0); transform: translate3d(-300px,0,0); } } #bg { background-size: 300px auto; width: 900px; } /* Header */ #header h1 { font-size: 2.5em; } #header p { font-size: 1em; } #header nav { font-size: 1em; } #header nav a:hover { font-size: 1em; } #header nav a:active { font-size: 1em; } } /* Mobile (Portrait) */ @media screen and (max-width: 480px) { /* BG */ @-moz-keyframes bg { 0% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 100% { -moz-transform: translate3d(-412.5px,0,0); -webkit-transform: translate3d(-412.5px,0,0); -ms-transform: translate3d(-412.5px,0,0); transform: translate3d(-412.5px,0,0); } } @-webkit-keyframes bg { 0% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 100% { -moz-transform: translate3d(-412.5px,0,0); -webkit-transform: translate3d(-412.5px,0,0); -ms-transform: translate3d(-412.5px,0,0); transform: translate3d(-412.5px,0,0); } } @-ms-keyframes bg { 0% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 100% { -moz-transform: translate3d(-412.5px,0,0); -webkit-transform: translate3d(-412.5px,0,0); -ms-transform: translate3d(-412.5px,0,0); transform: translate3d(-412.5px,0,0); } } @keyframes bg { 0% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } 100% { -moz-transform: translate3d(-412.5px,0,0); -webkit-transform: translate3d(-412.5px,0,0); -ms-transform: translate3d(-412.5px,0,0); transform: translate3d(-412.5px,0,0); } } #bg { background-size: 412.5px auto; width: 1237.5px; } /* Header */ #header nav { padding: 0 1em; } } Link to comment Share on other sites More sharing options...
dsonesuk Posted November 28, 2017 Share Posted November 28, 2017 If you don't set width and height using css, then it will follow the dimensions set by width and height attributes on the image itself, which are fixed using 'px' unit not a responsive percentage unit. Link to comment Share on other sites More sharing options...
ColGam Posted November 29, 2017 Author Share Posted November 29, 2017 23 hours ago, dsonesuk said: If you don't set width and height using css, then it will follow the dimensions set by width and height attributes on the image itself, which are fixed using 'px' unit not a responsive percentage unit. Is there any code you would recommend changing directly and/or adding? I've been playing with it for a while and I know it's quite simple but seem to be stuck on fixing this. Link to comment Share on other sites More sharing options...
dsonesuk Posted November 29, 2017 Share Posted November 29, 2017 Try #header h1 img { max-width: 500px; width: 100%; height: auto; } Link to comment Share on other sites More sharing options...
ColGam Posted November 30, 2017 Author Share Posted November 30, 2017 Thank you. That did fix the issue for portrait viewing on mobile, however, on the landscape mode on mobile it won't scroll down to access the social buttons or copyright statement. Is there any CSS to fix this or would I need to explore a different language? Link to comment Share on other sites More sharing options...
dsonesuk Posted November 30, 2017 Share Posted November 30, 2017 Provide link to problem page, and i will help, otherwise with no visualizing of problem i can't help, im not prepared to waste my time guessing on a solution without seeing the problem at hand. Link to comment Share on other sites More sharing options...
ColGam Posted December 1, 2017 Author Share Posted December 1, 2017 My apologies. Here is the link: http://highintensityrecords.com/ As I mentioned. Portrait mode shows up OK for more (5-inch screen) but the landscape view, it won't allow it to scroll down to the social icons. I've tested it on Android, not iOS or Win Phone at this point. Thank you. Link to comment Share on other sites More sharing options...
dsonesuk Posted December 1, 2017 Share Posted December 1, 2017 You are using position: fixed; outer container to surround your content, this will take it completely out of flow with other content, so because it occupies no space and with addition of overflow: hidden; on body, no scrollbars WILL appear to allow scrolling. You will get same on desktop, if you shrink the browser window to smaller size, or view it in responsive layouts under developer tools. 1 Link to comment Share on other sites More sharing options...
ColGam Posted December 4, 2017 Author Share Posted December 4, 2017 I changed body from overflow: hidden to scroll. I also tried visible and auto. I also changed position in #main to relative from fixed and #wrapper to relative too. I kept playing around with each option but it would either show the scrollbar but offset content or completely wipe out content. Could you explain more about the outer container? I'm a bit confused about this on how to fix it and prevent it in the future. Thank you. Link to comment Share on other sites More sharing options...
dsonesuk Posted December 4, 2017 Share Posted December 4, 2017 Don't use ANY overflow for body OR html element, let it be to its default settings. Position absolute and fixed elements have no effect on content, so other html content will move below/above these elements to occupy the space they would normally fill, they therefore won't produce a scrollbar if there content exceeds the browsers viewport window area. position: absolute position is determined by an parent position: relative; element outer boundary, if no such element exists it becomes relative to the body element height and width, it will scroll along with the body element content. position: fixed; acts very similar, BUT! its position is relative to browser viewport area only, it won't scroll with content, it will stay fixed in same position. Both of these should be used for under/overlaying only, not to hold content where scrolling will be required to view a complete document. Link to comment Share on other sites More sharing options...
ColGam Posted December 6, 2017 Author Share Posted December 6, 2017 I think that makes more sense to me. I removed from body overflow completely. Went to #main and tried changing position here from fixed to inherit. It does bring up the side and bottom scroll for me but offsets the content. What would you recommend? One thing I wanted to clarify. Should fixed and absolute ONLY be used in cases of under/overlaying? Link to comment Share on other sites More sharing options...
dsonesuk Posted December 6, 2017 Share Posted December 6, 2017 50 minutes ago, ColGam said: One thing I wanted to clarify. Should fixed and absolute ONLY be used in cases of under/overlaying? Yes! IF you can't produce the same effect with float, display: inline-block, margins, padding, only then should you consider using position: absolute. and under/overlaying is the only most likely reason I've ever used it. Link to comment Share on other sites More sharing options...
ColGam Posted December 7, 2017 Author Share Posted December 7, 2017 I updated the following to display: inline-block; #footer #header #wrapper #main I tried to do it in the background (line 188) but that made the page kind of static. Adding the ones above, scroll now shows up but the footer disappears. I am assuming I can change something in the footer to fix this. I tried all different type of display options but that did not improve it. What would you suggest to fix this? I feel like it's nearly there. I really appreciate the help. Link to comment Share on other sites More sharing options...
dsonesuk Posted December 7, 2017 Share Posted December 7, 2017 I meant display: properties not just display: inline-block. I think you are after a type of sticky footer effect, with rest of content vertically aligned middle and centre <!DOCTYPE HTML> <!-- Aerial by HTML5 UP html5up.net | @ajlkn Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) --> <html> <head> <title>High Intensity Records</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <!--[if lte IE 8]><script src="http://highintensityrecords.com/assets/js/ie/html5shiv.js"></script><![endif]--> <link rel="stylesheet" href="http://highintensityrecords.com/assets/css/main.css" /> <!--[if lte IE 8]><link rel="stylesheet" href="http://highintensityrecords.com/assets/css/ie8.css" /><![endif]--> <!--[if lte IE 9]><link rel="stylesheet" href="http://highintensityrecords.com/assets/css/ie9.css" /><![endif]--> <style> body, html {height: 100%;} #footer {display: block;} #footer {position: relative; margin-top: -6em; overflow: hidden;} #wrapper {height: 100%; display: table;} #main { display: table-cell; padding:0; text-align: center; vertical-align: middle; } #main::before {content: none;} #main::after { content: ""; display: block; height: 4em; position: relative; } </style> </head> <body class="loading"> <div id="wrapper"> <div id="bg"></div> <div id="overlay"></div> <div id="main"> <!-- Header --> <header id="header"> <h1> <img src="http://highintensityrecords.com/images/hirwhite.png" alt="HTML5 Icon" width="500" height="250"></h1> <p>Bringing the <span style="font-weight:bold">highest quality </span>and <span style="font-weight:bold">intense beats</span> to flow inside your mind.</p> <p><span style="font-weight:bold">DEMOS </span>highintensityrecords@live.com</p> <p><span style="font-weight:bold">LICENSING </span>licensing.highintensityrecords@live.com</p> <nav> <ul> <li><a href="https://www.facebook.com/Highintensityrecords/" class="icon fa-facebook"><span class="label">Facebook</span></a></li> <li><a href="https://twitter.com/highintenrecs" class="icon fa-twitter"><span class="label">Twitter</span></a></li> <li><a href="https://soundcloud.com/highintensityrecords" class="icon fa-soundcloud"><span class="label">SoundCloud</span></a></li> <li><a href="https://soundcloud.com/highintensityrecords" class="icon fa-youtube"><span class="label">YouTube</span></a></li> <li><a href="https://www.beatport.com/label/high-intensity-records/28820" class="icon fa-headphones"><span class="label">Beatport</span></a></li> <li><a href="http://www.highintensityrecords.com/" class="icon fa-spotify"><span class="label">Spotify</span></a></li> </ul> </nav> </header> <!-- Footer --> </div> </div> <footer id="footer"> <span class="copyright">© High Intensity Records 2017.</span> </footer> <!--[if lte IE 8]><script src="http://highintensityrecords.com/assets/js/ie/respond.min.js"></script><![endif]--> <script> window.onload = function() { document.body.className = ''; } window.ontouchmove = function() { return false; } window.onorientationchange = function() { document.body.scrollTop = 0; } </script> </body> </html> 1 Link to comment Share on other sites More sharing options...
ColGam Posted December 8, 2017 Author Share Posted December 8, 2017 That seemed to do the fix. I really appreciate the help. I think with its current state it's OK. I'm going to go and dive into some research and self educating on everything you mentioned. Thank you again. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now