CODEWITHSUNDEEP
javascriptphpjquerycsswordpress
Matthew Mellea
Matthew Mellea

Reputation: 89

Strange differences in website appearance over multiple computers

I have been creating a website by modifying a WordPress, and I have found that when I view the page, some things function differently. For example, I have a banner that moves in and out depending on the scroll position (using jQuery Waypoints). On the computer I'm editing on, using the site in incognito doesn't load the font that overlays the banner. However, the font loads with another computer (same browser, different OS if that's helpful). Why do these things occur and how can I fix them?

By the way, the website is tedxyouthhillsborough.com.

Here's my code (php):

<a href="/event-details/" class="bannerNav" style="margin-right: 0px;"><h2>
  <div style="margin-right: 0px;"><br/>SATURDAY MAY 24TH 2014<br/></div></h2>         <h3><div style="margin-right: 0px;"><br/>THE NUEVA SCHOOL<br/></div></h3></a>

Here's my css:

h2 div {
    font-family:'Open Sans', Sans-Serif;
    letter-spacing: -1px;
    padding: 10px;
    color: #fff;
    position: absolute;
    top:10px;
    right:83px;
    font-weight: 200;
}
h3 div {
    font-family:'Open Sans', sans-serif;
    letter-spacing: -1px;
    padding: 10px;
    color:rgb(114, 114, 114);
    position: absolute;
    top: 30px;
    right:120px;
    font-weight: 400;
    font-size: 20px;
}

Javascript:

$('a.logo_sm').fadeTo(0, 0);
 $('a.bannerNav').animate({
     'margin-right': '0px'
 })
 $('h3 div').animate({
     'margin-right': '0px'
 }, 200);
 $('h2 div').animate({
     'margin-right': '0px'
 }, 200);
 //$('.mainHeader').html(showFlag);

 $('div#main').waypoint(function (event, direction) {
     if (direction === 'down') {
         $('a.logo_sm').fadeTo(400, 1);
         $('a.flagNav').animate({
             'margin-left': '0px'
         }, 400);
         $('a.bannerNav').animate({
             'margin-right': '-352px'
         }, 200);
         $('h3 div').animate({
             'margin-right': '-352px'
         }, 200);
         $('h2 div').animate({
             'margin-right': '-352px'
         }, 200);
     } else {
         $('a.bannerNav').animate({
             'margin-right': '0px'
         }, 200);
         $('a.logo_sm').fadeTo(200, 0);
         $('a.flagNav').animate({
             'margin-left': '-195px'
         }, 400);
         $('h3 div').animate({
             'margin-right': '0px'
         }, 200);
         $('h2 div').animate({
             'margin-right': '0px'
         }, 200);
     }
 });

 });

Upvotes: 0

Views: 85

Answers (1)

Brandon Kiefer
Brandon Kiefer

Reputation: 349

Just a suggestion, instead of using pixels (px), the use of em for sizing has far greater advantages such as greater responsiveness. By the way I like the site, especially the theme.

Upvotes: 1

Related Questions