Quick-and-dirty Rails app - font is HUGE in one field

People,

I wanted to start putting all the Netflix movies I watch into a quick-and-dirty Rails app so I ran “new” and created a single table sqlite3 DB with five fields in the table:

id title url plot notes

When I look at the dev app on my own workstation it looks fine but if I start the app with:

rails server -b 0.0.0.0

I can see the app OK from my phone but the font in the “plot” field is huge! - this the only field that was filled in by a cut and paste from OMDB or IMDB but I looked in the Sqlite3 table and that field is just plain text like the other fields . .

Anyone know what is going on here?

Thanks, Phil.

This sounds like a CSS problem more than anything else. Are you using the normal scaffold.scss styling that Rails gives you by default? You might want to dip into that and see if there is anything specific set for the textarea tag. If not, you could add a definition of that and set the font however you prefer. I presume, by the way, that you are seeing this issue in the form field, not the displayed paragraph of text in your #show page…

Walter

2 Likes

Thanks for that - yes stock stuff from running “rails new” - I will have a look at the CSS stuff . .

I got my brother to look at it with his iPhone (as opposed to my Android phone) and he said it looked fine . . weird . .

Here is what it looks like on my phone:

Oh, okay. What you’re seeing here is the standard mobile behavior. Paragraph tags are enlarged to aid reading at a glance by the browser’s default stylesheet. Most mobile-friendly CSS frameworks (Bootstrap, etc.) treat this by setting everything to a specific size. You will find that when using one, the other bits of text on the page get enlarged (although not to as great a degree) and everything matches.

This is outside the scope of this list, but what you want to do is either add Bootstrap or SScaffold (not a typo), or another mobile-friendly CSS framework to your site. This will help normalize everything and ensure that the viewport size is considered when rendering any type. Under the hood, the CSS will include @media selectors, which can be keyed to the width of the viewport, the pixel density, and other clues to infer what to do next.

If you want to learn more about this technique in general, I’d advise visiting https://css-tricks.com.

Walter

Ah! Thanks for that - I will check that out . . it is good when you can learn something useful / interesting every day . .

1 Like