Menu icon Foundation
media query works in browser but not on phones

I started to use Foundation with the inky templating language and I have a small problem with media queries. The responsive code that I use works when I test in a browser, but once I zip the file and test it on emailonacid, it doesn't work anymore.

Here are illlustrations to explain my problem. The footer I am trying to create is 600 px width and looks like this:

big image with images on either side

So right now, when I test in emailonacid.com, the media query doesn't work and it looks like this: enter image description here

I would like the text to snap to the left after the max-width $global-breakpointis reached. Like this: enter image description here

This is my code in the index.html file:

 

<container>
  <row >
    <columns small="12" large="6">
    <img align="center" src="BigLogoHere" style=" padding-top:20px;">
    </columns>
    <columns small="12" large="6" ><div class="myLeftIcons" >
      <img align="center"  src="facebook" style="padding:0px 0px 0px; display: inline-block; padding-top:20px;" >
      <img align="center" src="tumblr" style="padding:0px 0px 0px; display: inline-block; padding-top:20px;">
      <img align="center" src="twitter" style="padding:0px 0px 0px; display: inline-block; padding-top:20px;">
      <img align="center" src="instagram" style="padding:0px 0px 0px; display: inline-block; padding-top:20px;">
      </div>
    </columns>
  </row>
  <row>
    <columns large="1" small="1"></columns>
    <columns large="10" small="10"><spacer size="1" class="mySpace">    </spacer></columns>
    <columns large="1" small="1"></columns>
  </row>

and this is what I added to _settings.scss

.mySpace{
    background-color:$white;
}


.myLeftIcons{
    text-align:right;
}

@media only screen and (max-width: #{$global-breakpoint}) {
    .myLeftIcons{
        text-align:left;
    }
}

Please let me know if you find anything!

Thank you

inkyemailmedia querycss

I started to use Foundation with the inky templating language and I have a small problem with media queries. The responsive code that I use works when I test in a browser, but once I zip the file and test it on emailonacid, it doesn't work anymore.

Here are illlustrations to explain my problem. The footer I am trying to create is 600 px width and looks like this:

big image with images on either side

So right now, when I test in emailonacid.com, the media query doesn't work and it looks like this: enter image description here

I would like the text to snap to the left after the max-width $global-breakpointis reached. Like this: enter image description here

This is my code in the index.html file:

 

<container>
  <row >
    <columns small="12" large="6">
    <img align="center" src="BigLogoHere" style=" padding-top:20px;">
    </columns>
    <columns small="12" large="6" ><div class="myLeftIcons" >
      <img align="center"  src="facebook" style="padding:0px 0px 0px; display: inline-block; padding-top:20px;" >
      <img align="center" src="tumblr" style="padding:0px 0px 0px; display: inline-block; padding-top:20px;">
      <img align="center" src="twitter" style="padding:0px 0px 0px; display: inline-block; padding-top:20px;">
      <img align="center" src="instagram" style="padding:0px 0px 0px; display: inline-block; padding-top:20px;">
      </div>
    </columns>
  </row>
  <row>
    <columns large="1" small="1"></columns>
    <columns large="10" small="10"><spacer size="1" class="mySpace">    </spacer></columns>
    <columns large="1" small="1"></columns>
  </row>

and this is what I added to _settings.scss

.mySpace{
    background-color:$white;
}


.myLeftIcons{
    text-align:right;
}

@media only screen and (max-width: #{$global-breakpoint}) {
    .myLeftIcons{
        text-align:left;
    }
}

Please let me know if you find anything!

Thank you

Corey Schaaf about 3 years ago

You need to add a !important at the end of your attribute on .myLeftIcons. 

so your media query would look like this instead: 

@media only screen and (max-width: #{$global-breakpoint}) {
    .myLeftIcons{
        text-align:left!important;
    }
}

The media query is listed in the head of your HTML file after you inline. For browsers that support media queries, those media queries need to override whatever is inlined in the HTML.  The only way to do that, is for anything that is a media query that you want to override behavior on mobile is to add the !important to your tags. 

Add that and see if that solves your problem. If not, there is probably something else that is causing some rendering issues, but that is the first thing I noticed. 

mchapuis about 3 years ago

Thank you @Corey Shaaf! It worked :)