Strange responsive view behavior

Mateusz Żebrowski asked on February 13, 2015 12:06

Hello, I have problem with RWD. I've created css style sheet with media queries: @media only screen and (min-width: 960px). And it's not working on mobile devices. Even if I have phone with 800px width screen all rules for min-width:960px applies. When I change to 1500px it start working. I have no idea whats the reason.

responsive kentico 7

Correct Answer

Mateusz Żebrowski answered on February 16, 2015 09:43

I was able to solve the problem. It was just as I expected: meta tag viewport should be before stylesheet so the html should look like that:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<link href="/CMSPages/GetResource.ashx?stylesheetname=ICantTellYouTheName" type="text/css" rel="stylesheet"/>

The problem is: how to put meta tag before stylesheet tag, while stylesheet is added automatically by Kentico before all meta tags which are added in master page. And I solved problem by editing PortalTemplate.aspx file (I added there meta tag before title). But I don't like it. Consider that I have two sites running under one Kentico instance. Both of them are using PortalTemplate.aspx. What If I'd like to have other metadata on first one and other on second. Can I add meta data before style sheet without changing Portal Template.aspx?

0 votesVote for this answer Unmark Correct answer

Recent Answers

Brenden Kehren answered on February 13, 2015 14:44

Are you conditionally adding the stylesheet based on a media query or is it always visible? Have you tried firebug or equivalent to see whats going on?

0 votesVote for this answer Mark as a Correct answer

Mateusz Żebrowski answered on February 13, 2015 20:15

I have one big stylesheet with media query inside. I added it in Site Manager (first I've created new style in development tab then apply it to my site in site tab). It looks like it works just fine on computers. I can resize browser window and get another view. But it doesn't work when I switch to mobile device.

0 votesVote for this answer Mark as a Correct answer

Adam Gitin answered on February 14, 2015 11:39 (last edited on February 14, 2015 11:39)

I might be way off here, did you add:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

If you are not "targeting" the viewport, that might be the issue.

1 votesVote for this answer Mark as a Correct answer

Mateusz Żebrowski answered on February 14, 2015 12:32

Yes I've already added it on master page tab in cms desk. But now I can see that code is like that:

<link href="/CMSPages/GetResource.ashx?stylesheetname=ICantTellYouTheName" type="text/css" rel="stylesheet"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

Is order important here?

0 votesVote for this answer Mark as a Correct answer

Brenden Kehren answered on February 14, 2015 19:58

Are you trying to change the view in the Kentico UI? If so, that is meant for mobile profiles, not responsive design. Open the site in a new browser and change the viewport size, you'll see the change.

0 votesVote for this answer Mark as a Correct answer

Mateusz Żebrowski answered on February 15, 2015 12:56

I'm try to display one version of site for mobile devices and other for desktop, using css with media query. For desktop my stylesheet works fine. After resizing the browser window it switch to mobile version. On mobiles it actually works wrong. On screens with width below 960px (the limit for mobile version, see my question) it is still desktop version. I'm not using mobile profiles.

0 votesVote for this answer Mark as a Correct answer

Adam Gitin answered on February 15, 2015 14:56

Can you post a link to the site?

1 votesVote for this answer Mark as a Correct answer

Adam Gitin answered on February 16, 2015 20:22

easy fix:

1) go to SITES -> (edit your site) -> Site CSS stylesheet: -> select NONE

2) go to PAGES -> root -> master page (tab) -> enter in the meta view port and css link in any order you want in the

1 votesVote for this answer Mark as a Correct answer