Tagged: 

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • May 25, 2014 at 2:15 am #269615
    jaseelye

    Hello,

    I have two issues with tables. The first is I could not figure out how to span the first column among several rows. Because of this, I created my own table and used the “code block” content element to implement. It looks great on desktop but on mobile, the right part of the table is cut off of the screen. Please check it out here:

    http://fstopapp.com/dev/?page_id=5505

    I was using the same table on my old website and it looked fine. Check that out here:

    http://fstopapp.com/tutorial2.html

    Can you help me figure out how to implement with your table element or how to properly display using the code element?

    Regards,
    Jason Seelye

    May 25, 2014 at 11:05 am #269658
    Flikk

    Hello again :)

    That is because the table heading font is to big. So the table can not shrink any further.

    you can use quick/custom css to reduce the font size and the padding:
    http://kriesi.at/documentation/enfold/custom-css-and-quick-css/

    @media only screen and (max-width: 430px) {
    .avia_codeblock th {
        font-size: 12px;
        padding: 9px 5px;
    }
}

    That reduces the font size and padding when the display/window is less then 430px wide.

    May 25, 2014 at 5:54 pm #269694
    jaseelye

    Thanks! You did it again.

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • The topic ‘Tables are cut off’ is closed to new replies.