CODEWITHSUNDEEP
htmltwitter-bootstrappicturefill
data
data

Reputation: 2543

Media selectors not working in sizes attribute for picture html5 tag

I am trying to use the new picture tag to have a responsive version of my pictures. 

<picture>
  <source sizes="(min-width: 1320px) calc((100vw - 30px)/12*7 - 30px,
                 (min-width: 1091px) calc((100vw - 30px)/2 - 30px),
                 calc(100vw - 75px)"
          srcset="public/img/TSM/16_128.png 128w,     
                  public/img/TSM/16_256.png 256w,
                  public/img/TSM/16_1024.png 1024w">
    <img src="public/img/TSM/16_1024.png">
</picture>

For some reason, no matter what my browsers width, only the fallback is executed, as the picture width is set to it's formula.

I am using picturefill to enable cross-browser compatibility. If it matters, this is part of a bootstrap-3-column with class "col-md-6 col-lg-7". Where is the error in my logic?

Upvotes: 0

Views: 109

Answers (1)

zcorpan
zcorpan

Reputation: 1273

You are missing a ) for your first calc, which makes the rest of the attribute value also be invalid and you get the default 100vw. Check with https://validator.nu/ :-)

Upvotes: 1

Related Questions