Custom CSS not working on Windows Machines

  • Resolved triplwu

    (@triplwu)


    7 years, 2 months ago

    Hi,

    I’ve run into an issue where the custom CSS that I add is not showing up on any browsers on Windows 10, but works fine on OSX. The main CSS from the theme works fine on both, but the custom CSS that I’ve added does not show up.

    I’ve added the styles the following ways with no resolve.

    1) Simple Custom CSS Plugin
    2) Adding CSS to child theme
    3) Adding CSS to parent theme at the end of style.css

    Every time I’ve cleared my cache and checked the site on OSX 10.13.2 and Windows 10 in Edge and Chrome.

    Thanks for any help.
    -Trip

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)

  • What browser are you using on OSX? Can you give a sample of exactly what CSS is not working?

    Thread Starter triplwu

    (@triplwu)

    Thanks for the reply. On OSX I’m using Safari, Chrome, and Firefox with the CSS displaying properly. Every browser on OSX looks pretty good from what I can tell, it just seems that Windows isn’t loading the styles that I’ve added.

    Here’s an example image with the view in OSX Safari and Windows Edge side by side.

    https://uvello.com/benepaytech/wp-content/uploads/2017/12/css-issue.jpg

    • The navigation bar is supposed to be set to 850px wide and float right.
    • The text in the image is supposed to be larger

    I know this isn’t an Edge specific issue because it shows up in Chrome and Firefox on Windows 10 for multiple users. Below is an example of the CSS that I’ve added to the child stylesheet that isn’t showing up.

    .bio-paragraph h3 {
  margin:0;
  padding:0;
}

 #site-navigation {
  width: 850px;
  float: right;
  margin-top: 20px;
  position: absolute;
  right: 0;
}

.photo-text {
  font-size: 44px;
  font-weight: 400;
  line-height: 40px;
  color: #000;
}

    not sure what this :

    
@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
   	.logo {
  		content: url(https://uvello.com/benepaytech/wp-content/uploads/2017/12/logo.png);
  		width: 265px;
}

    is doing but removing it fixes the issue

    Thread Starter triplwu

    (@triplwu)

    Very interesting, thanks for letting me know! I removed it and it does seem to do the trick.

    That code snippet was used to subsitute a retina logo on displays that have a higher pixel density. I’ll subsitute the logo a different way. Thanks for your help!

    Good eye @jaycbrf!

    If I had to guess, it seems as if some CSS preprocessor code (LESS or SASS) got pasted directly into the CSS file ??

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Custom CSS not working on Windows Machines’ is closed to new replies.