Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn More

View all

Sign in to view all badges

Responsive Previewer for media queries ignore css styles when calc() css3 syntax is used

Avatar

Avatar
Validate 10
Level 3
anjali_biddanda
Level 3

Likes

17 likes

Total Posts

69 posts

Correct Reply

6 solutions
Top badges earned
Validate 10
Validate 1
Give Back 5
Give Back 3
Give Back
View profile

Avatar
Validate 10
Level 3
anjali_biddanda
Level 3

Likes

17 likes

Total Posts

69 posts

Correct Reply

6 solutions
Top badges earned
Validate 10
Validate 1
Give Back 5
Give Back 3
Give Back
View profile
anjali_biddanda
Level 3

15-10-2015

There are certain styles on a page that don't get applied when viewing the page in Classic UI Responsive Previewer for iPad. However, they display as expected on the actual device AND on the browser window re-sized for the breakpoint.
 
We have media queries for screen size mentioned below. We're using the following 2 lines that cause the styles that follow these lines to be ignored:
 
width: -webkit-calc(100% - 30px);
width: calc(100% - 30px);
 
If above 2 lines are removed from our css, then the corresponding media query styles apply as expected when viewing in Responsive Previewer (RP). 
 
Viewpoint / Breakpoints:
320px
480px
768px
960px
1164px
 
Media Queries:
@media screen and (min-width: 321px) {
}
 
@media screen and (min-width: 480px) {
}
 
@media screen and (min-width: 768px) {
}
 
@media screen and (min-width: 960px) {
}
 
@media screen and (min-width: 1164px) {
}
 
 
Why would the styles work on the device with those breakpoints, but just not on the RP? Could it be a bug with RP not being able to handle calc() correctly? Anyone come across this before? 
 
Thank you. 

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Validate 25
MVP
bsloki
MVP

Likes

182 likes

Total Posts

1,859 posts

Correct Reply

545 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Boost 50
Boost 5
View profile

Avatar
Validate 25
MVP
bsloki
MVP

Likes

182 likes

Total Posts

1,859 posts

Correct Reply

545 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Boost 50
Boost 5
View profile
bsloki
MVP

15-10-2015

It might be a case of overriding. Did you inspect element and check if anything of RP CSS is overriding the "width" ? If so try with !important flag for your width and check if it fixes your issue.

Answers (0)