Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • April 1, 2018 at 3:45 pm #935779
    navindesigns

    HI,

    I am trying to dupicate the exact functionality of this website – https://www.corcoran.com/nyc/Agents/Display/14740 – Please click on “Sold” tab and it will load a table with date (address, unit, neighhborhood, etc). On desktop, all the all the columns are showing but on mobile only address, neighborhood and price is showing. Is this possible with enfold table?

    I created a table on my site and here it is

    Sales

    Please advise.

    April 1, 2018 at 8:00 pm #935817
    Mike

    Hey navindesigns,
    The best way to do this is to clone your table and remove the columns that you don’t want to show, then add a custom class to both.
    “desktoptable” for the desktop one, and “mobiletable” for the mobile one.
    Then add this code in the General Styling > Quick CSS field:

    @media only screen and (max-width: 767px) { 
.desktoptable {display: none !important;}
}
@media only screen and (min-width: 768px) { 
.mobiletable {display: none !important;}
}

    I have done this for you so you can see how it works, feel free to adjust to suit.
    Please clear your browser cache and check.

    Best regards,
    Mike

    April 4, 2018 at 3:36 am #936891
    navindesigns

    Thanks. This is better. Almost there. Desktop is perfect.
    The mobile is still cutting off in the Sold section. ( i know it is scrollable on mobile but I would like all 3 columns to be visible) Can it be made to look just like Corcoran’s mobile version?

    Corcoran’s mobile version Screenshot – https://imgur.com/a/tCaLD

    Corcoran’s mobile version Live site – https://www.corcoran.com/nyc-real-estate/agents/village/the-milano-rambarran-team

    I guess we need to make the 3 columns on shorter in width?

    Sales

    April 4, 2018 at 3:55 am #936898
    Mike

    Hi,
    After closer inspection I noticed that braking the address lines into two lines gave the table the desired width.
    Please see screenshot in Private Content area.
    Please clear your browser cache and check.

    Best regards,
    Mike

    April 5, 2018 at 2:23 am #937412
    navindesigns

    That helps but it is still getting cut off a bit on the right (price column). It seems on Corcoran’s mobile version the whole chart is smaller? Is there anyways to make the columns shorter in width and maybe make the font size smaller?

    April 5, 2018 at 5:33 am #937451
    Mike

    Hi,
    Please try:

    .avia-table-2.avia-builder-el-17 td,.avia-table-2.avia-builder-el-17 th {
font-size: 12px !important;
padding: 6px !important; 
}

    Best regards,
    Mike

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.