FOUNDATION vs COFFEEGRINDER max-width...

User 379556 Photo


Registered User
692 posts

Twinstream wrote:
Was there ever a Mobile First Template for Coffeegrinder for RSD ?

I don't recall there ever having been mobile-first for coffeegrinder.

Regarding the pixels to REMs auto-conversion, the matter is easily seen with border widths. The Design panel gives no option to set border widths other than in pixels. When one goes to the Inspector panel, the CSS(READ ONLY) section reveals that the CSS shows it in REMs.

I discovered the above long ago in connection with making shapes with containers. Because printers do not print background colours, I used wide coloured border settings to fill shapes. That seemed perfect until I displayed in one little known browser (Midori), where the REM conversion severely distorted some shapes.

Frank
User 2823310 Photo


Registered User
312 posts

What you can do to check if this is effecting your layout.
Paste this in the HEAD and preview in a browser
<style>
/* Font Root Size for RSD */
html {font-size: 20px;}
</style>
If it looks okay then you can remove it.
If it doesn't make your adjustments like trying 100% width or centering the elements, if you can't find a fix then paste this in the HEAD
<style>
/* Font Root Size for RSD */
html {font-size: 16px;}
</style>
So what that does is sets the root so a persons browser won't change your layout.
If you are building a site where the fonts and sizes can be enlarged for the seeing impaired then you leave it out so they can set the root using their browser.
User 379556 Photo


Registered User
692 posts

Alter Eagle, Thanks for that. It is clearly the way to go if I hit similar situations in future.

It did not occur to me at the time, as I had been ignorant of the real significance of REMs. Instead I replaced the problem parts of the diagrams where possible within RSD with wide coloured horizontal rules, and where that was not possible with GIF images.

This thread has proved most helpful. Thanks again.

Frank
User 244626 Photo


Registered User
628 posts

Seems the media query(s) are set to rem also...

https://fvsch.com/code/bugs/rem-mediaquery/
User 379556 Photo


Registered User
692 posts

Twinstream wrote:
Seems the media query(s) are set to rem also...

There must be a reason for these conversions in RSD etc., as it would probably have been easier for the programmers not to have introduced them. I assume the reason may be connected with the frameworks used.

I guess the most important thing is to be aware of the conversions when the effect may be significant for the web page one is making. The CSS (READ ONLY) section in the Inspector panel usually shows when such a conversion is made.

Frank

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.