Nirvana mobile CSS skipping the 1280px step • Nirvana Bugs Forum

Author

Posts
July 3rd, 2015 at 16:26 #32255

Erin

I searched but did not see this topic covered already, so I hope this is not a duplicate post. I very much love your nirvana theme, but I have noticed that in the latest (1.0.6) update a bug seems to have been introduced to the style-mobile.css file.

I first noticed after update that slider text was all too large and kept running off the bottom of the slider. Upon investigation I discovered that the style-mobile.css was skipping from the 1024px wide style straight to the 1680px wide style and not loading the 1280px step in the middle. It seems that none of the additional “min-resolution: 1ddpx”, “min-resolution: 96dpi”, and “-webkit-min-device-pixel-ration: 1” conditions were not being matched. I do not have anything special in my setup, I am running windows (tested with 7 and 8.1 on several computers to rule out some OS configuration oddity) on a monitor with a resolution of 1280×1024. I have tested with Chrome, Firefox, and IE. When using chrome’s developer tools I can watch the applied styles change in real time as i re-size the window. If I comment out the offending conditionals, the theme responds exactly as it should. I checked the wordpress.org subversion repository for nirvana and discovered this was in fact a newly introduced change in 1.0.6. Also, it seems odd that these conditions would only be tested at the 1280 wide step; I’m not entirely sure what the reason for it was, but i assume it was to address a very specific issue.

For now I can comment out the extra conditions in the theme, but I hope you can look at this issue before the next update. Thank you again for the wonderful theme.

July 3rd, 2015 at 22:19 #32256
Erin
As a quick follow up, i think i found the problem. You do not need to be calling the @media for all three of the tests. I think (and you should do your own research as well) that by doing so you have malformed the the OR list.

Right now you have this written:
```
@media (max-width: 1280px) and (min-resolution: 1ddpx), 
```
@media (max-width: 1280px) and (min-resolution: 96dpi),
```
@media (max-width: 1280px) and (-webkit-min-device-pixel-ratio: 1) {

And I think the proper way to form the intended query is like this:
```
@media (max-width: 1280px) and (min-resolution: 1ddpx),
```
	(max-width: 1280px) and (min-resolution: 96dpi),
```
(max-width: 1280px) and (-webkit-min-device-pixel-ratio: 1) {

I hope this helps
July 3rd, 2015 at 22:28 #32257
Erin
Sorry if this is a duplicate post. I just tried adding to my most from earlier and I think the forums choked on it, which is good because i royally botched the code blocks. Here it is again, and if this one sticks and I botch them again, i apologize.

As a quick follow up, i think i found the problem. You do not need to be calling the @media for all three of the tests. I think (and you should do your own research as well) that by doing so you have malformed the the OR list.

Right now you have this written:
```
@media (max-width: 1280px) and (min-resolution: 1ddpx), 
@media (max-width: 1280px) and (min-resolution: 96dpi),
@media (max-width: 1280px) and (-webkit-min-device-pixel-ratio: 1) {
```
And I think the proper way to form the intended query is like this:
```
@media (max-width: 1280px) and (min-resolution: 1ddpx), 
	(max-width: 1280px) and (min-resolution: 96dpi),
	(max-width: 1280px) and (-webkit-min-device-pixel-ratio: 1) {
```
I hope this helps
July 3rd, 2015 at 22:32 #32258
Erin
Sorry if this is a duplicate post. I just tried adding to my most from earlier and I think the forums choked on it, which is good because i royally botched the code blocks. Here it is again, and if this one sticks and I botch them again, i apologize.

As a quick follow up, i think i found the problem. You do not need to be calling the @media for all three of the tests. I think (and you should do your own research as well) that by doing so you have malformed the the OR list.

Right now you have this written:
```
@media (max-width: 1280px) and (min-resolution: 1ddpx), 
@media (max-width: 1280px) and (min-resolution: 96dpi),
@media (max-width: 1280px) and (-webkit-min-device-pixel-ration: 1) {
```
And I think the proper way to form the intended query is like this:
```
@media (max-width: 1280px) and (min-resolution: 1ddpx), 
	(max-width: 1280px) and (min-resolution: 96dpi),
	(max-width: 1280px) and (-webkit-min-device-pixel-ratio: 1) {
```
I hope this helps
Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

The topic ‘Nirvana mobile CSS skipping the 1280px step’ is closed to new replies.