Re: [css-d] Responstable SCSS

2014-03-18 Thread MiB 

mar 17 2014 20:21 SSC_perl p...@surfshopcart.com:

 I almost hate to ask this, but would it be possible for someone to test my 
 page on an Android phone to make sure it works?  Unfortunately, everyone I 
 know has an iPhone.

I haven’t verified the trustworthiness of these, but useful for a quick look: 
https://www.manymo.com/emulators

You can also pay for longer running emulators.

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Responstable SCSS

2014-03-17 Thread SSC_perl 
I'm trying to implement this responsive table on my site:

http://codepen.io/sharifh/pen/imojf

It works fine in the Safari browser on my Mac when resizing the window, 
but it doesn't work on the iPhone - the table remains normal.

I'm thinking that my problem is the SCSS.  I converted it into CSS on 
some web site (sorry, don't remember which one now) and maybe the conversion 
wasn't 100% successful.

How can I convert the SCSS into proper CSS?

Thanks,
Frank

http://www.surfshopcart.com/
Setting up shop has never been easier!

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Responstable SCSS

2014-03-17 Thread SSC_perl 
Just in case it makes any difference, here's the CSS I was given by 
that site:

.responstable {
  margin: 1em 0;
  width: 100%;
  background: white;
  color: #024457;
  border-radius: 10px;
  border: 1px solid #167f92;
  overflow: hidden;
}
.responstable tr {
  border-top: 1px solid #167f92;
  border-bottom: 1px solid #167f92;
}
.responstable tr:nth-child(odd) {
  background-color: #eaf3f3;
}
.responstable th {
  display: none;
  border: 1px solid white;
  background-color: #167f92;
  color: white;
}
.responstable td {
  display: block;
}
.responstable td:first-child {
  padding-top: .5em;
}
.responstable td:last-child {
  padding-bottom: .5em;
}
.responstable td:before {
  content: attr(data-th) : ;
  font-weight: bold;
  width: 8em;
  display: inline-block;
}
@media (min-width: 480px) {
  .responstable td:before {
display: none;
  }
}
@media (min-width: 480px) {
  .responstable td {
border: 1px solid #d9e4e6;
  }
}
.responstable th, .responstable td {
  text-align: left;
  margin: .5em 1em;
}
@media (min-width: 480px) {
  .responstable th, .responstable td {
display: table-cell;
padding: 1em;
  }
  .responstable th:first-child, .responstable td:first-child {
text-align: center;
  }
}

body {
  padding: 0 2em;
  font-family: Arial, sans-serif;
  color: #024457;
  background: #f2f2f2;
}

h1 {
  font-family: Verdana;
  font-weight: normal;
  color: #024457;
}
h1 span {
  color: #167F92;
}
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Responstable SCSS

2014-03-17 Thread Chris Rockwell 
Just click on (SCSS) next to CSS and it will show you the compiled code


On Mon, Mar 17, 2014 at 1:57 PM, SSC_perl p...@surfshopcart.com wrote:

 Just in case it makes any difference, here's the CSS I was given
 by that site:

 .responstable {
   margin: 1em 0;
   width: 100%;
   background: white;
   color: #024457;
   border-radius: 10px;
   border: 1px solid #167f92;
   overflow: hidden;
 }
 .responstable tr {
   border-top: 1px solid #167f92;
   border-bottom: 1px solid #167f92;
 }
 .responstable tr:nth-child(odd) {
   background-color: #eaf3f3;
 }
 .responstable th {
   display: none;
   border: 1px solid white;
   background-color: #167f92;
   color: white;
 }
 .responstable td {
   display: block;
 }
 .responstable td:first-child {
   padding-top: .5em;
 }
 .responstable td:last-child {
   padding-bottom: .5em;
 }
 .responstable td:before {
   content: attr(data-th) : ;
   font-weight: bold;
   width: 8em;
   display: inline-block;
 }
 @media (min-width: 480px) {
   .responstable td:before {
 display: none;
   }
 }
 @media (min-width: 480px) {
   .responstable td {
 border: 1px solid #d9e4e6;
   }
 }
 .responstable th, .responstable td {
   text-align: left;
   margin: .5em 1em;
 }
 @media (min-width: 480px) {
   .responstable th, .responstable td {
 display: table-cell;
 padding: 1em;
   }
   .responstable th:first-child, .responstable td:first-child {
 text-align: center;
   }
 }

 body {
   padding: 0 2em;
   font-family: Arial, sans-serif;
   color: #024457;
   background: #f2f2f2;
 }

 h1 {
   font-family: Verdana;
   font-weight: normal;
   color: #024457;
 }
 h1 span {
   color: #167F92;
 }
 __
 css-discuss [css-d@lists.css-discuss.org]
 http://www.css-discuss.org/mailman/listinfo/css-d
 List wiki/FAQ -- http://css-discuss.incutio.com/
 List policies -- http://css-discuss.org/policies.html
 Supported by evolt.org -- http://www.evolt.org/help_support_evolt/




-- 
Chris Rockwell
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Responstable SCSS

2014-03-17 Thread Tom Livingston 
The pen is working on my iPhone

Sent from my iPhone

 On Mar 17, 2014, at 1:54 PM, SSC_perl p...@surfshopcart.com wrote:
 
I'm trying to implement this responsive table on my site:
 
 http://codepen.io/sharifh/pen/imojf
 
It works fine in the Safari browser on my Mac when resizing the window, 
 but it doesn't work on the iPhone - the table remains normal.
 
I'm thinking that my problem is the SCSS.  I converted it into CSS on some 
 web site (sorry, don't remember which one now) and maybe the conversion 
 wasn't 100% successful.
 
How can I convert the SCSS into proper CSS?
 
 Thanks,
 Frank
 
 http://www.surfshopcart.com/
 Setting up shop has never been easier!
 
 __
 css-discuss [css-d@lists.css-discuss.org]
 http://www.css-discuss.org/mailman/listinfo/css-d
 List wiki/FAQ -- http://css-discuss.incutio.com/
 List policies -- http://css-discuss.org/policies.html
 Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Responstable SCSS

2014-03-17 Thread SSC_perl 
On Mar 17, 2014, at 11:02 AM, Chris Rockwell wrote:
 Just click on (SCSS) next to CSS and it will show you the compiled code


Well that was embarrassingly simple. :| 

I compared the converted CSS that I had before to the converted CSS 
from CodePen and they are the same, so it must be a different problem I'm 
having.

If I go to that CodePen page on my iPhone, it works for me, but when I 
copy and paste the code to my site, it doesn't work.  Here's a link to my page:

http://www.surfshopcart.com/responstable.html

There doesn't appear to be any JS involved, so what could I be missing? 

Thanks again,
Frank

http://www.surfshopcart.com/
Setting up shop has never been easier!

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Responstable SCSS

2014-03-17 Thread Chris Rockwell 
Try adding this to your head tag:

meta name=viewport content=width=device-width, initial-scale=1


On Mon, Mar 17, 2014 at 2:28 PM, SSC_perl p...@surfshopcart.com wrote:

 On Mar 17, 2014, at 11:02 AM, Chris Rockwell wrote:
  Just click on (SCSS) next to CSS and it will show you the compiled code


 Well that was embarrassingly simple. :|

 I compared the converted CSS that I had before to the converted
 CSS from CodePen and they are the same, so it must be a different problem
 I'm having.

 If I go to that CodePen page on my iPhone, it works for me, but
 when I copy and paste the code to my site, it doesn't work.  Here's a link
 to my page:

 http://www.surfshopcart.com/responstable.html

 There doesn't appear to be any JS involved, so what could I be
 missing?

 Thanks again,
 Frank

 http://www.surfshopcart.com/
 Setting up shop has never been easier!

 __
 css-discuss [css-d@lists.css-discuss.org]
 http://www.css-discuss.org/mailman/listinfo/css-d
 List wiki/FAQ -- http://css-discuss.incutio.com/
 List policies -- http://css-discuss.org/policies.html
 Supported by evolt.org -- http://www.evolt.org/help_support_evolt/




-- 
Chris Rockwell
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Responstable SCSS

2014-03-17 Thread SSC_perl 
On Mar 17, 2014, at 11:53 AM, Chris Rockwell wrote:
 meta name=viewport content=width=device-width, initial-scale=1


That was it!  Thanks, Chris!  The table now changes depending on the 
phone's orientation.  Very nice!

I almost hate to ask this, but would it be possible for someone to test 
my page on an Android phone to make sure it works?  Unfortunately, everyone I 
know has an iPhone.

http://www.surfshopcart.com/responstable.html

Thanks again.  I really appreciate this list and everyone's help.

Frank

http://www.surfshopcart.com/
Setting up shop has never been easier!

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Responstable SCSS

2014-03-17 Thread Chris Rockwell 
Looks good to me on Galaxy S3 (Android 4.3) Chrome


On Mon, Mar 17, 2014 at 3:21 PM, SSC_perl p...@surfshopcart.com wrote:

 On Mar 17, 2014, at 11:53 AM, Chris Rockwell wrote:
  meta name=viewport content=width=device-width, initial-scale=1


 That was it!  Thanks, Chris!  The table now changes depending on
 the phone's orientation.  Very nice!

 I almost hate to ask this, but would it be possible for someone to
 test my page on an Android phone to make sure it works?  Unfortunately,
 everyone I know has an iPhone.

 http://www.surfshopcart.com/responstable.html

 Thanks again.  I really appreciate this list and everyone's help.

 Frank

 http://www.surfshopcart.com/
 Setting up shop has never been easier!

 __
 css-discuss [css-d@lists.css-discuss.org]
 http://www.css-discuss.org/mailman/listinfo/css-d
 List wiki/FAQ -- http://css-discuss.incutio.com/
 List policies -- http://css-discuss.org/policies.html
 Supported by evolt.org -- http://www.evolt.org/help_support_evolt/




-- 
Chris Rockwell
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/