Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Posted December 15, 2020 5:06pm by

my website has looks different once uploaded??? only half of my paragraph styles are working???

i dont know why my font size, margins and line height are not applying once i upload my files to my host site???

everything looks great when i open the files on my computer...

why would this happen????

please let me know what you think!!!!

December 17, 2020 8:22am

Hi Kayla Pasciullo!

It would be helpful for us to better answer your question if you could share you code. Either a codepen, a github repo, or your workspaces link.

December 23, 2020 4:49am

ive added inline styles to help fox some of the issues now i cant figure out who my background image and nav bar are differently placed on each of my pages although the code is identical...

if i go to my website on my iphone 6+ my about page looks like garbage!!! even tho it looks good in the dev tools :(

please please give me your thoughts!!!

www.kaylapasciullo.com

code for my about page

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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;
}
/* HTML5 display-role reset for older browsers */
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;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  color: black;
  text-align: center;
  font-size: 16px;
}

body, html {
  height: 100%;
  margin: 0px;
  padding: 0px;
}
html {
  background-image: url('domenico-loia-hGV2TfOh0ns-unsplash.jpg') /*no-repeat center center fixed*/;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  -moz-background-size: cover;
  background-position: center;
}
.wrapper{
    background-size: cover;
    background-repeat:no-repeat;
    background-position:center; 
    background-size: cover;
    position:relative;
    width:100%;
    height:100%;
    overflow: initial;
}

.main-content {
  overflow: hidden;
}

p {
  line-height: 1.5;
  padding: 15px;
  margin: 15px;
  font-size: 18px;
  font-weight: bold;
  text-align: left;
  background-color: rgba(255,255,255,0.5);
}

h1 {
  font-size: 50px;
  font-weight: bold;
  text-align: center;
  margin-top: 50px;

      color: white;
    text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000; 
}
h2 {
  position: relative;
  font-size: 30px;
        color: white;
    text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000; 
}

.email:hover{
  color: navy;
}

li, a {
  font-family: sans-serif;
  font-weight: bold;
  font-size: 16px;
  color: black;
  text-decoration: none;
}

header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 30px /*10%*/;
  background-color: rgba(255,255,255,0.5);
}

.nav-links {
  list-style: none;
  display: flex;
}

.nav-links li {
  display: block;
  padding: 0px 20px;
}

.nav-links li a {
  transition: all 0.3s ease 0s;
  font-size: 16px;
}

.nav-links li a:hover {
  color: navy;
}


img{
  position: relative;
  width: 200px;
  height: 250px;
  border: solid white 5px;
  border-radius: 20%;
  display: block;
  float: left;
  margin-left: 25px;
  margin-right: 10px;
  margin-top: 75px;
  }

  @media (max-width: 750px) {
.main-content{
 float: left;
  }
img{
  float: none;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  max-width: 200px;
  height: auto
  }
.nav-links {
font-size: 8px;
  display: flex;
  justify-content: flex-end;
  padding: 0px 10px;
}
}
@media (max-width: 400px) {
.main-content{
  display: block;
 float: left;
}
img{
    display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  max-width: 200px;
  height: auto
  }
   .nav-links {
font-size: 8px;
  display: inline;
  padding: 0px 10px;
}
}

<!DOCTYPE html>
<html>

<head>
<!--    <style>
body {
  background-image: url('domenico-loia-hGV2TfOh0ns-unsplash.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
</style> -->
    <script src="jquery-3.5.1.min.js"></script>
    <link rel="stylesheet" href="aboutstyles.css">
    <title>Kayla Pasciullo - Web Developer</title>
        <meta charset="UTF-8">
        <meta name="description" content="Freelance web developer">
        <meta name="keywords" content="HTML, CSS, JavaScript">
        <meta name="author" content="Kayla Pasciullo">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">   -->
</head>

<body>
    <header>
        <nav>
            <ul class="nav-links">
                <li><a href="index.html">home</a></li>
                <li><a href="about.html">about</a></li>
                <li><a href="projects.html">projects</a></li>
                <li><a href="contact.html">contact</a></li>
            </ul>
        </nav>
    </header>

    <div class="wrapper">
  <h1>meet Kayla</h1><br><h2>&lt;happiness hacker&gt;</h2>
    <img class="kayla" src="kayla2.jpeg" alt="image of kayla">
    <div class="main-content">
   <p style="line-height: 1.75;
    padding: 25px;
    margin: 25px;
    font-size: 18px;">
    I am a front end web developer living in the beautiful Okanagan Valley of B.C. Canada. My current focus is designing and coding functional, responsive landing pages for small or local businesses using HTML and CSS. I take pride in writing well designed, efficent code to build websites from concept all the way to completion. 
   <br><br>I am skilled in web programming, with an in depth knowledge of HTML and CSS. I am an agressive problem solver who loves a challenge. I am always looking to learn or try something new! When I am not busy coding I am usually hanging out with my friends or family at a lake, beach or if I am lucky at camp &hearts; 
<br><br>If your a business looking for a website, or an employer looking to hire <a href="mailto:kayla.pasciullo@hotmail.com">&#9993; email me</a></p>
   </div>
</div>
</body>
</html>




code for my homepage


/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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;
}
/* HTML5 display-role reset for older browsers */
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;
}

*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  text-align: center;
  font-size: 16px;
}
 body, html {
  height: 100%;
}
html {
  background-image: url('domenico-loia-hGV2TfOh0ns-unsplash.jpg') /*no-repeat center center fixed*/;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  -moz-background-size: cover;
  background-position: center;
}
p{
  position: relative;
  padding: 10px;
}
h1 {
  margin-top: 75px;
  padding: 20PX;
  position: relative;
  font-size: 75px;
}
h2{
  position: relative;
  font-size: 50px;
  padding: 20px;

        color: white;
    text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000; 
}
.email{
/*   width: auto;
  position: relative;
  padding: 10px;
  font-size: 27px;
  font-weight: bold;*/

        color: black;
    text-shadow:
    -1px -1px 0 white,
    1px -1px 0 white,
    -1px 1px 0 white,
    1px 1px 0 white;
  position: relative;
  font-weight: bold;
  color: black;
  text-decoration: none;
  font-size: 30px

}
.email:hover{
  color: navy;
}
  .fa {
  position: relative;
  padding: 20px;
  font-size: 20px;
  text-align: center;
  text-decoration: none;
  margin: 10px;
  border: solid white 0px;
  border-radius: 50%;
}

.fa:hover {
   font-size: 20px;
    border: solid black 2px;
   padding: 15px;
}

.fa-facebook {
  position: relative;
  background: dodgerblue;
  color: black;
}
.fa-instagram {
  position: relative;
  background: linear-gradient(purple, red); ;
  color: black;
}

.fa-linkedin {
  position: relative;
  background: #0066cc;
  color: black;
}
.fa-twitter {
  position: relative;
  background: steelblue;
  color: black;
}

li, a {
  font-family: sans-serif;
  font-weight: bold;
  font-size: 16px;
  color: black;
  text-decoration: none;
}

header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 30px /*10%*/;
  background-color: rgba(255,255,255,0.5);
}

.nav-links {
  list-style: none;
  display: flex;
}

.nav-links li {
  display: block;
  padding: 0px 20px;
}

.nav-links li a {
  transition: all 0.3s ease 0s;
  font-size: 16px;
}

.nav-links li a:hover {
  color: navy;
}
@media screen and (max-width: 750px) {
.nav-links {
font-size: 8px;
  display: flex;
  justify-content: flex-end;
  padding: 0px 10px;
}
}

@media (max-width: 400px) {
  .nav-links {
font-size: 8px;
  display: inline;
  padding: 0px 10px;
}
}


<!DOCTYPE html>
<html>

<head>
<!--        <style>
body {  background-image: url('domenico-loia-hGV2TfOh0ns-unsplash.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
</style> -->
    <script src="jquery-3.5.1.min.js"></script>
    <link rel="stylesheet" href="styles.css">
    <title>Kayla Pasciullo - Web Developer</title>
            <meta charset="UTF-8">
        <meta name="description" content="Freelance web developer">
        <meta name="keywords" content="HTML, CSS, JavaScript">
        <meta name="author" content="Kayla Pasciullo">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>

<body>
    <header>
        <nav>
            <ul class="nav-links">
                <li><a href="index.html">home</a></li>
                <li><a href="about.html">about</a></li>
                <li><a href="projects.html">projects</a></li>
                <li><a href="contact.html">contact</a></li>
            </ul>
        </nav>
        </header>

    <h1>Kayla Pasciullo</h1>
    <h2>web developer</h2>

    <a href="https://www.facebook.com/kayla.pasciullo" target="_blank" class="fa fa-facebook"></a>
    <a href="https://www.instagram.com/kpasciullo/" target="_blank" class="fa fa-instagram"></a>
    <a href="https://www.linkedin.com/in/kayla-pasciullo-47586a201/" target="_blank" class="fa fa-linkedin"></a>
    <a href="https://twitter.com/discoverKDP" target="_blank" class="fa fa-twitter"></a>
        <p><a class="email" href="mailto:kayla.pasciullo@hotmail.com?Subject=hello%20from%20your%20website" target="_top">send email</a></p>

</body>

</html>

1 Answer

December 15, 2020 6:11pm

Browsers have default CSS settings. To reset these settings visit this site and copy the code into your CSS file. Also, you can use chrome dev tools to which styles are being applied and why.

https://meyerweb.com/eric/tools/css/reset/

Posting to the forum is only allowed for members with active accounts.
Please sign in or sign up to post.

Welcome to the Treehouse Community

Looking to learn something new?

Kayla Pasciullo

Kayla Pasciullo

my website has looks different once uploaded??? only half of my paragraph styles are working???

Clinton Hays

Clinton Hays

Kayla Pasciullo

Kayla Pasciullo

1 Answer

Arjun Agarwal

Arjun Agarwal