Kentico 7: Content disappears when screen resized to 1024px or less

Jason Rhea asked on March 30, 2015 05:43

Something interesting is happening on a site that I am working on. Whenever the window is resized below 1024px, all of the content disappears. In the HTML only version of the site, the CSS functions fine and we don't have this problem. I have never seen this before, so I don't even know what to be on the lookout for. If anyone has any ideas, I would be grateful for the assistance!

Thanks in advance...

css styles css css stylesheets responsive content

Recent Answers

Brenden Kehren answered on March 30, 2015 05:51

Is your site setup to be responsive or have breakpoints in the CSS?

Has any of the HTML changed where someone could have modified the layouts or main containers?

Is it happening on all pages?

0 votesVote for this answer Mark as a Correct answer

Jason Rhea answered on March 30, 2015 14:29

The site is set up to be responsive. There are no break points in the CSS.

In terms of content changes, we have converting static content to Kentico editable areas.

Yes, it happens on all pages.

Thanks!

0 votesVote for this answer Mark as a Correct answer

Brenden Kehren answered on March 30, 2015 15:27 (last edited on March 30, 2015 21:00)

I apoligize, I should have been more descriptive, when I asked about breakpoints in your CSS, I meant media query breakpoints. For instance desktop viewing is 1200px and larger. Do you have these @media queries in your css? Is there one that was specifically for mobile and accidentally removed?

Regarding In terms of content changes, we have converting static content to Kentico editable areas.

I'd suggest looking at using page types vs. editable text. Editable text isn't any better than your static text approach. Using page types gives you the ability to use your content all over the site and manage it in one place. For instance if you have a list of news articles and they are displayed normally under /News BUT you want to display a feed of the top 4 newest ones on your home page. By using editable text, you have to manage this in two places, whereas with page types you just add a repeater to the home page template and use a query to get those top 4 newest items.

0 votesVote for this answer Mark as a Correct answer

Jason Rhea answered on March 30, 2015 23:06

Some confusion on my end...We are making extensive use of repeaters for duplicate content. In terms of breakpoints, they are at 480px, 768px, 1024px, and 1280px. All the CSS seems OK, and like I said, we literally cut and paste from the HTML mockup into Kentico.

Thanks!

0 votesVote for this answer Mark as a Correct answer

Brenden Kehren answered on March 31, 2015 00:43

Then I'd check a few of your pages to ensure you have valid HTML. There could very well be some missing closing tags. Another piece you could do is turn on CSS minification within Kentico and render the stylesheets using Kentico out of the box tools and see if your CSS is valid or crashes. Also check to see if you have any JavaScript errors on the page.

0 votesVote for this answer Mark as a Correct answer

Jason Rhea answered on March 31, 2015 03:55 (last edited on March 31, 2015 04:26)

According to the HTML Validator, there is an extra <head> tag...but I can't find it in our templates anywhere. Also of note is that if I copy the HTML code generated by the server and save it as a local HTML file, it works just fine. No problems at all. There is clearly something happening server-side that is messing with things.

Also, no JS errors and minification did not cause any problems.

Thanks!

0 votesVote for this answer Mark as a Correct answer

Brenden Kehren answered on March 31, 2015 15:58

Review the rendered code or source (not F12) and this should help find where it is at. I'm guessing it's somewhere in your copied code in a editable text webpart or a layout. It could also be in the content before or after of a webpart as well.

Did you modify the PortalTemplate.aspx file? Maybe in there too

0 votesVote for this answer Mark as a Correct answer

Jason Rhea answered on April 1, 2015 23:36

So - FINALLY got it figured out!

Here's what happened: When we first started moving the html templates over to Kentico, the CMS Desk editor kept showing us a stray tag. We got rid of it, no harm no foul right? Everything seemed to be working. WRONG! Turns out the editor was incorrect and that tag was one of the closing

tags for the mobile viewing. Once we put that back in, everything started working again. But, as a side note, we can no longer use the CMS Desk editor because it will not save any changes made because it still thinks the

is extra and not needed. Thanks for your ideas and suggestions!

0 votesVote for this answer Mark as a Correct answer

Brenden Kehren answered on April 2, 2015 13:45

So it was bad HTML then? I'd suggest putting your opening or closing tag then in the template to resolve the issue. Don't NOT use the CKEditor because of this or think it's a limitation because it's not. The CKEditor has it's place in a CMS.

0 votesVote for this answer Mark as a Correct answer