Alejandro Posted June 25, 2019 at 12:00 PM Share Posted June 25, 2019 at 12:00 PM (edited) Hi I mentioned this in passing in the initial release announcement, but it's important enough to explain here so it doesn't get lost. The dimensions for the cards in the new layouts, including the grid size for columns are based, and relative, to the page's html tag font-size. To do this, we use the "rem" unit instead of "px". "rem" stands for "root em". While "em" is a relative unit that uses the current containers size, "rem" is always based on the document size and makes it easier to control the layout so that it remains consistent and better looking. If you found that all the font-sizes on the new cards look very small when you start using the layouts, it means that the html tag font-size on your site is also set to a very small number, probably 10px if your template is using an old version of Bootstrap. The default browser font size is 16px, but Bootstrap 3 override this with a size of 10px. This has now changed in Bootstrap 4 which also uses 16px. The default settings in the JReviews cards are optimized to look at their best when the html font-size is set to 16px and if that's the case on your site, then most likely you don't need to adjust those settings too much. However, if you notice the font-size is too small and things don't look at all like on the demo site, then a quick fix is to override the html font-size on your site with the CSS below. You can add this to your template's custom CSS file or settings: html { font-size: 16px; } The new version of the iReview theme and template already incorporates this change. I hope you find this useful. There's a new blog post on how to start using the new beautiful card layouts for listings. Regards Alejandro Edited July 1, 2019 at 02:52 PM by Alejandro Added the blog post link Link to comment
Recommended Posts