Re: [css-d] Responstable SCSS
mar 17 2014 20:21 SSC_perl : > 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/
Re: [css-d] Responstable SCSS
Looks good to me on Galaxy S3 (Android 4.3) Chrome On Mon, Mar 17, 2014 at 3:21 PM, SSC_perl wrote: > On Mar 17, 2014, at 11:53 AM, Chris Rockwell wrote: > > > > 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/
Re: [css-d] Responstable SCSS
On Mar 17, 2014, at 11:53 AM, Chris Rockwell wrote: > 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
Try adding this to your head tag: On Mon, Mar 17, 2014 at 2:28 PM, SSC_perl 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
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
The pen is working on my iPhone Sent from my iPhone > On Mar 17, 2014, at 1:54 PM, SSC_perl 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
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 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
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/
[css-d] Responstable SCSS
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/
