Featured users not mobile friendly

[jpuck]

Table currently needs to be horizontally scrolled to view content. This should be mobile responsive and collapse into row groups for better user experience IMO

Great looking template, thanks!

[daattali]

Thanks @jpuck , you're right, that page really is terrible experience on mobile! I'm not an expert on responsive design, do you know of an easy solution for this?

[aquynh]

yes see the same issue here. i am wondering why "Getting Started" page is OK (no need horizontal scrolled), but "Featured Users" has problem???

[daattali]

Getting Started page has no tables. This problem is the result of the table on the Featured page.

[daattali]

To make it clear: the problem is that the Features users page http://deanattali.com/beautiful-jekyll/featured-users/ looks bad on mobile because the table is too wide and causes the page to be very wide. I'm not sure what the correct solution to that is, but I welcome any ideas.

[aurora-mareviv]

I haven't looked much into it, but that's what I tried:

• I copied your table, added a default bootstrap css from a CDN, added the .table class to the <table> tags, and it was responsive.
• In your page you have two linked stylesheets. One of them (this) has some <table> formatting which may conflict with your bootstrap stylesheet (this one).

I'd suggest you to remove the table styles here and see if the problem solves.. Hth

[daattali]

Thanks @aurora-mareviv

I'm not sure if that fixes anything though--try changing the font size to 16px and make the page width very small, and you'd still get a horizontal scrollbar for the page just like I have now. Or do you not get the same behaviour?

[aurora-mareviv]

Probably a bad idea; but I wrapped each <table> in a <div class="table-responsive">: it fixed the page width for the small viewport, and the tables are horizontally scrollable without altering the rest of the page. https://aurora-mareviv.github.io/test/.

[daattali]

That does seem to work! Do you know if there's an easy way to incorporate that into the markdown version of the page? I can't simply wrap the markdown table in a <div> because then the markdown won't get parsed correctly--do you know how to do it without rewriting the table as HTML?

[aurora-mareviv]

I don't know about Jekyll (I am only starting with Hugo), but if Beautiful-Jekyll has the kramdown markdown parser, this could work.

Kramdown seems to support additional styles for block elements, wrapping the style in curly braces (must be placed right before or right after the block, no blank lines between them).

You could also add the .table-responsive bootstrap styles to the custom .css so it is not overriden.
(I'm sorry I cannot reproduce it, as I don't have a jekyll installation)..Hth

{: .table-responsive}

  Right     Left     Center     Default
-------     ------ ----------   -------
     12     12        12            12
    123     123       123          123
      1     1          1             1

[daattali]

The {: syntax to add an attribute I'm familiar with, but unfortunately adding that class to the <table> tag doesn't have the desired effect. I need to wrap the table in a <div class="table-responsive"> as you said, and I don't know if it's possible to wrap a markdown table in such a div. I'll keep looking. Thanks for the discussion

[daattali]

Solved - by adding display: block; to the table's CSS after adding table-responsive to its class.

[aurora-mareviv]

Great!

[daattalitest]

Thanks for the help

On Sep 3, 2017 20:04, "aurora-mareviv" notifications@github.com wrote:

Great!

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/daattali/beautiful-jekyll/issues/201#issuecomment-326856133, or mute the thread https://github.com/notifications/unsubscribe-auth/AKw9cnIB8mz2OJuPDO0oZGbTB56p5ftjks5se2i0gaJpZM4NNnqp .