Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Andrew Stelmach
12,583 PointsDoes Rails Sass automatically add vendor prefixes to your CSS?
I'm having a big problem with a website of mine: http://pamplonaenglishteacher.com
Source code here: https://github.com/Yorkshireman/pamplona_english_teacher2
A friend of mine tried it on her Lenovo mobile phone, and it wasn't working properly at all: no background colour, logo not appearing, many elements not appearing at all etc etc. Just a mess.
Why so? It's getting a bit frustrating.
If anyone would like to test the site on their mobile, please do and let me know if it's ok!!
Andrew Stelmach
12,583 PointsI've just tried adding Autoprefixer (https://github.com/ai/autoprefixer-rails), but the problem remains!
5 Answers
Maciej Czuchnowski
36,441 PointsI tested it on my mobile devices and:
It looks perfectly fine on Nexus 7 (Android 5) and LG Optimus Black (Android 4) when using Opera, Chrome and Firefox.
It does not seem to render background color in "Super Fast Browser" on Android (but the logo and text are white, so I assume they are there).
What was her browser?
And, if I may ask, why Rails for a static page?
Andrew Stelmach
12,583 PointsI've seen it work on an ipad, so I'm going to assume it's ok on an iphone, until I find someone to test it for me. Actually, I'll edit the OP, asking for people to test it!!
Andrew Stelmach
12,583 PointsThanks for all that testing!
What's Super Fast Browser?
I don't know what her browser is, because she's totally non-techy! And it's surprisingly hard to find out what browser Lenovo mobile phones use (well, I've tried a bit of googling for a few minutes).
I use Rails for everything, even for static stuff, because it's all I know!! Besides, I'll be adding some 'proper' code to this site (the ability for people to write testimonials).
Maciej Czuchnowski
36,441 PointsIt's just some weird browser that takes only 400kb (instead of 30mb), so it probably does not have a good rendering engine. Lenovo phones use Android, so she may be using any browser for Android. The only question is which app exactly does she launch for the Internet ;).
I will ask my GF to test it on her iPhone tomorrow.
I bet it's the browser's fault.
What you can try:
a) remove this line from your assets/application.css.scss:
*= require_tree .
because it adds all files in alphabetic order which may not be what you want.
2) Rename application.css to application.css.scss
3) Include one css at a time, in proper order, and see if it changes anything, until you include all the files. Maybe media queries file breaks something in some browsers? But for that you need a device on which it fails.
Andrew Stelmach
12,583 PointsYeah I did think about taking out require_tree . and just manually adding all of the style sheets. It won't do any harm anyway - I'm always going to keep track of what style sheets I have; require_tree . is only really there in case you miss one.
I must admit, I laughed when you said, "I bet it's the browser's fault." Haha, wouldn't it be nice if we could just blame the browsers! ;-)
What benefit is there to renaming application.css to css.scss?
Maciej Czuchnowski
36,441 PointsHey, if some esotheric, 400kb browser renders my website in a wrong way, it's not my fault ;). Some companies even openly refuse to support IE 6 and 7 and they are doing fine, saving a lot of time and money.
I'm not entirely sure what the benefits are, but if you add some Sass code there in the future, it may not work properly with just .css extension. I'm just trying to cover all possible bases ;)
Maciej Czuchnowski
36,441 PointsAt some point you could also experiment with this:
"rename your application.css file to application.css.scss, remove all sprockets comments, and instead use sass @import commands."
I was just reading about this in a gem documentation (https://github.com/maxim/bootswatch-rails). I have no idea what it will actually do, but trying it probably won't hurt ;).
Andrew Stelmach
12,583 Pointslol cheers.
You know, I might just take that attitude of 'fuck it', unless I find out it's failing on other browsers too. I'll try to find out what browser she's using next time I see her (I'll take the phone and look for myself! ;-)
Thanks for your help. I'll post here if I discover anything interesting.
Btw, if you know why the red colour looks shit on my windows (internet explorer) phone, please tell me. This is another issue. It's a nice subdued red on pc's and macs, but a really bright garish red on my phone :-( I've had a google and can't find any answers.
Maciej Czuchnowski
36,441 PointsMaybe your display does not have this color and grabs the nearest similar color in the palette ;). Or your saturation settings are very high. No better ideas.
Andrew Stelmach
12,583 PointsYeah I had a similar thought - that the colour isn't available to the device. Wish I knew how to choose colours that are available. There will be an answer somewhere on the interweb.
Andrew Stelmach
12,583 PointsAndrew Stelmach
12,583 PointsWebsites I've built before in Rails used Bootstrap (which takes care of vendor prefixes, I think). This website's html and css were hand-coded.