Just a guess, but are the articles styled by a CSS file? If so, have you used an absolute path for it in your header.

So you need to do this:

<link rel="stylesheet" type="text/css" href="/css/style.css" />

and not:

<link rel="stylesheet" type="text/css" href="css/style.css" />

(Note use of the / at start of path).

The latter won't work when you are more than one level deep in your pages.

If that's not the issue then can you provide a link to your page, please?

These are the links to my scripts in my header:

    <script src="scripts/jquery-1.11.0.js"></script>
    <script src="scripts/skel.min.js"></script>
    <script src="scripts/skel-panels.min.js"></script>
    <script src="scripts/init.js"></script>
    <noscript>
        <link rel="stylesheet" href="/stylesheets/skel-noscript.css" />
        <link rel="stylesheet" href="/stylesheets/style-1000px.css" />
        <link rel="stylesheet" href="/stylesheets/style-desktop.css" />
        <link rel="stylesheet" href="/stylesheets/style-gwzc.css" />
        <link rel="stylesheet" href="/stylesheets/style-mobile.css" />
        <link rel="stylesheet" href="/stylesheets/style.css" />
    </noscript>

The forward slash is there for the style sheets.

The link to my homepage is:

https://dales-passionate-duckling.s1.umbraco.io/

the link to the Main Article page is:

https://dales-passionate-duckling.s1.umbraco.io/articles-main

link to one of the Article Items: https://dales-passionate-duckling.s1.umbraco.io/articles-main/clear-mind/

Thanks for any insight.

It seems to be a mixed content issue with your css. Your site is running over https:// but your style sheets are referencing some external style sheets over http://. Run the site with the console open and you will see the issue. Make sure all your css/script are running over https. Best of luck to you!

Yep, as Dennis says, you need to ensure all scripts, fonts and stylesheets are served on HTTPS, otherwise they will be blocked.

For instance, change references to:

http://fonts.googleapis.com/css?family=Lato:300,400,700,900'

to

https://fonts.googleapis.com/css?family=Lato:300,400,700,900'

See https://developers.google.com/web/fundamentals/security/prevent-mixed-content/fixing-mixed-content

I went through my code and changed all the HTTP links to HTTPS links. I followed the instructions for fixing mixed content and when running the console on the Article Item page I get error messages that say the js scripts where not found. This is the link where the js scripts were not found:

https://dales-passionate-duckling.s1.umbraco.io/articles-main/clear-mind/scripts/init.js

This link is generated by a partial View Macro:

@inherits Umbraco.Web.Macros.PartialViewMacroPage
@{ 
    var selection = CurrentPage.Children.Where("Visible").OrderBy("CreateDate desc"); 
    @* OrderBy() takes the property to sort by and optionally order desc/asc *@
}

@foreach (var item in selection)
{
<div class="article">
        <div class="articletitle"><a href="@item.Url">@item.Name</a></div>
        <div class="articlepreview">@Umbraco.Truncate(@item.ArticleContents,100) <a href="@item.Url">Read More..</a></div>
    </div>
    <hr/>
}

Is this code generating the proper links?

I made those changes:

        <script src="/scripts/jquery-1.11.0.js"></script>
    <script src="/scripts/skel.min.js"></script>
    <script src="/scripts/skel-panels.min.js"></script>
    <script src="/scripts/init.js"></script>
    <noscript>
        <link rel="stylesheet" href="/stylesheets/skel-noscript.css" />
        <link rel="stylesheet" href="/stylesheets/style-1000px.css" />
        <link rel="stylesheet" href="/stylesheets/style-desktop.css" />
        <link rel="stylesheet" href="/stylesheets/style-gwzc.css" />
        <link rel="stylesheet" href="/stylesheets/style-mobile.css" />
        <link rel="stylesheet" href="/stylesheets/style.css" />
    </noscript>

Now when I run the console it says the style sheets are not found.

Probably because you have wrapped your stylesheets in a <noscript> tag? Why have you done that? That will only load the stylesheet on browsers that don't understand JavaScript, which isn't what you want, I imagine. Remove the tag.

I'm adapting this website from a template; I don't know why that tag was there. In any event I removed the <noscript> tag, but no change.

I checked the spelling and found the links in my Umbraco console says the link to those files are like this:

/css/style.css

which is not where my links in the Master page are pointing:

    <link rel="stylesheet" href="/stylesheets/style.css" />   

I changed it and now it's partially working.

        <link rel="stylesheet" href="/css/style.css" />   

The Article Item pages are styling, but I'm still getting file not found errors just on those pages. I didn't realize it, but other pages were also getting those file not found, even though they were styling properly. And now my menu has disappeared, which is styled in the desktop style sheet.

The Chrome Dev tools tell me that this function in the skel.min.js script is failing:

    registerLocation: function(e, t) {
    var n = "_skel_attach",
        r = "appendChild";
    e == "head" ? t[n] = function(e) {
        this === _.me.parentNode ? this.insertBefore(e, _.me) : this[r](e)
    } : t[n] = function(e) {
        this[r](e)
    }, _.locations[e] = t
},

I assume this is returning a link that does not exist.

is working on a reply...