Display: none in css is displaying for a second then disappears

Hello,

I have a page designed on desktop that I am cloning for mobile. I decided to remove a div element from mobile only.

.topstory1 {
display: none;
}

When loading it on mobile, the topstory1 div loads for a second then disappears.

I obviously do not want it to load at all, not even for a split second. The user will think it’s a glitch and very unprofessional. They see the image while loading the site and then the image disappears.

ONLY visit this on your mobile phone, since you won’t see it desktop:
Here is the example: http://seo.wrestleview.com/testing3

Thanks in advance for the help

I think the problem is a delay in loading your css. You do have an awful lot of css, 11 external files, plus more within <style> tags.
The bit of css that hides the picture is actually in style tags towards the end of the html. It’s invalid to have style tags outside of the head section. Not only that, but it means that css loads after all of the html, which I believe is the cause of your problem. The html loads and displays, then loads the css at the end which then hides the image.
Try and reduce the bloat in the page by reducing the amount of requests, consolidate css and scripts to as few as possible, this is causing drag, further delaying the css from loading. If you must put extra css into style tags, have it all in one pair in the <head> of the document.

5 Likes

Yes that won’t run until the parser gets all the way down there which is too late to hide things. If the css was in the head where it should be this wouldn’t happen :slight_smile:

4 Likes

To complement what @SamA74 and @PaulOB have said, it appears that your site is based on WP. Now you should always use the wp_enqueue_style() function to add styles, rather than hard-coding links in the template files (and avoid writing CSS in style tags altogether) – same with JS BTW. This way WP will take care of properly loading the CSS/JS in the desired order.

5 Likes

Is that image associated at all with a plugin? I’ve found that often a plugin’s CSS appears within style tags somewhere inside the <body>, whuch drives me up the wall because there’s not much control you have over where the plugin developer puts it.

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.