Jump to content

ColGam

Members
  • Content count

    10
  • Joined

  • Last visited

Community Reputation

0 Neutral

About ColGam

  • Rank
    Newbie
  1. Image Not Centered On Mobile Site

    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.
  2. Image Not Centered On Mobile Site

    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.
  3. Image Not Centered On Mobile Site

    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?
  4. Image Not Centered On Mobile Site

    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.
  5. Image Not Centered On Mobile Site

    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.
  6. Image Not Centered On Mobile Site

    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?
  7. Image Not Centered On Mobile Site

    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.
  8. 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">&copy; 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; } }
  9. PHP not sending information from contact form

    Thank you! So I gave that a try and the form comes back with just the name input filled in and the rest blank. I also get these errors when I submit the form on the site. Notice: Undefined index: email in /home/jdtvhiyt/public_html/mail.php on line 7 Notice: Undefined index: phone in /home/jdtvhiyt/public_html/mail.php on line 8 Notice: Undefined index: message in /home/jdtvhiyt/public_html/mail.php on line 9 Do you have any thoughts on this?
  10. Hi. I am relatively new to using PHP and am working on building a contact form. It's pretty much good to go and it sends to my email, however, I am having the issue where it just sends this information to my email and not what the user put in, just leaving the message blank. Name: Email: Phone: Message: I'm not exactly sure what I am doing incorrectly. Also is there way to improve my code to make sure it gets in my inbox and not my spam? I've included the PHP and the HTML regarding the form. Here's the PHP. <?php $name = $_POST['name']; $email = $_POST['email']; $phone = $_POST['phone']; $message = $_POST['message']; $formcontent=" From: $name \n Email: $email \n Phone: $phone \n Message: $message"; $recipient = "contact@immersivewebdesign.com"; $subject = "Contact Form"; $mailheader = "From: $email \r\n"; mail($recipient, $subject, $formcontent, $mailheader) or die("Error!"); echo "Thank You!" . " -" . "<a href='http://immersivewebdesign.com/' style='text-decoration:none;color:#ff0099;'> Return Home</a>"; ?> Here's the HTML form. <div class="container"> <div class="col-lg-offset-4 col-lg-4" id="panel"> <h2>Get In Touch</h2> <form action="mail.php" method="post"> <div class="group"> <input type="text" name="name" required> <span class="highlight"></span> <span class="bar"></span> <label>Name</label> </div> <div class="group"> <input type="email" email="email" required> <span class="highlight"></span> <span class="bar"></span> <label>Email</label> </div> <div class="group"> <input type="tel" phone="phone" required> <span class="highlight"></span> <span class="bar"></span> <label>Phone</label> </div> <div class="group"> <input type="text" message="message" required> <span class="highlight"></span> <span class="bar"></span> <label>Message</label> </div> <div class="group"> <center> <button type="submit" class="btn btn-warning">Send <span class="glyphicon glyphicon-send"></span></button></center> </div> </form> </div> </div> Thank you for your help.
×