Tagged: 

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • January 29, 2024 at 3:53 pm #1432403
    frb1

    Hi Enfold crew,

    Is there any way of controlling/adjusting how tables resize on mobile? Perhaps adjusting the text, specifically for tabels on mobile?
    In my third and last column “Colors”, I have some span code instead of text. This disappears on mobile? How can I make thay stay?

    Take a look below the portfolio gallery on the attached page…

    Best,
    Frederik

    January 30, 2024 at 6:30 am #1432447
    Ismael

    Hey frb1,

    Thank you for the inquiry.

    The site is in maintenance mode, so we were not able to check it. Please provide the login details in the private field. There is no option for this out of the box, but the theme should automatically adjust the layout of the table element on mobile view. Would you mind providing a screenshot of the issue?

    Best regards,
    Ismael

    January 30, 2024 at 9:33 am #1432466
    frb1

    Hi again Ismael,

    Disabled maintenance mode now.

    Basically, I just want the table to look like on tablet and desktop breaks, but on the narrower space of a mobile. Please see the image links provided.

    Here’s my tablet custom code (this might reveal my limitations as a coder, that’s why I love your Enfold theme :)

    Moved to: https://pastebin.com/H0sJCpLS

    January 30, 2024 at 9:41 am #1432468
    Ismael

    Hey!

    Thanks for the update.

    The site is still on maintenance mode. Can we have access to the dashboard? Please provide the login details in the private field.

    Best regards,
    Ismael

    January 31, 2024 at 10:28 am #1432580
    frb1

    Hi Ismael,

    Apologies. Page is avalable now.

    Issue: The table changes a lot from 767pixels and below. I wish it to look something like the image provided.

    BR Frederik

    February 2, 2024 at 7:34 am #1432794
    Ismael

    Hi,

    Thank you for the screenshots.

    Please add this css code to revert the style or layout of the table element on mobile view.

    @media only screen and (max-width: 769px) {
  .responsive div .avia_responsive_table .avia-data-table table {
    display: table;
  }

  .responsive div .avia_responsive_table .avia-data-table tbody {
    display: table-row-group;
  }

  .responsive div .avia_responsive_table .avia-data-table tr {
    display: table-row;
  }

  .responsive div .avia_responsive_table .avia-data-table td,
  .responsive div .avia_responsive_table .avia-data-table th {
    display: table-cell;
  }

    .responsive .avia_responsive_table .avia-data-table .avia-button-row, .responsive .avia_responsive_table .avia-data-table tr:first-child th {
    display: table-cell;
}
}

    You may need to adjust this css media query as well to display the colors dots properly.

    @media only screen and (min-width: 479px) {
.grey::before {
    content: '';
    display: inline-block;
    background-color: #918d8b;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    margin-right: 2px;
    margin-left: 3px;
    margin-bottom: -1px;
    position: relative;
}
}

    Best regards,
    Ismael

    February 4, 2024 at 10:11 pm #1432948
    frb1

    Hi Ismael,

    Thankyou, really appreciate it! Cant get the media query for the color dots to work. Well, I’ll probably missing something! :) I’ll work with this. Thankyou!!

    /Frederik

    February 4, 2024 at 11:30 pm #1432953
    Mike

    Hi,
    Glad Ismael could help, when I check it seems like the dots are working on mobile:
    Enfold_Support_4627.jpeg
    peahaps I misunderstand, or you have already solved this?

    Best regards,
    Mike

    February 5, 2024 at 9:22 am #1432975
    frb1

    Hi Mike,

    They work “alright”. But I would like to alter the size of them on mobile and could not get the media query (last of Ismaels code above) for the colors to work. But I better check all my code before bothering you :)

    I’m thinking it might be due to how they are implemented in the table cells:
    <p> <span class=”yellow”></span><span class=”petrol”></span><span class=”pearl”></span><span class=”sand”></span><span class=”white”></span></p>

    …but they work on desktop.

    February 5, 2024 at 7:09 pm #1433027
    Mike

    Hi,
    If you want the circles to be larger on mobile try changing the height & width from 15px to 30px like this:

    @media only screen and (max-width: 767px) { 
.color-circle::before {
    content: '';
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-right: 2px;
    margin-left: 3px;
    margin-bottom: -1px;
    position: relative;
}
}

    Or adjust somewhere in the middle to suit your needs.

    Best regards,
    Mike

    February 5, 2024 at 7:35 pm #1433035
    frb1

    Hi Mike,
    Yes, that’s what I’ve been trying to do. Altering the parameters in the code is not the issue.
    /Frederik

    February 5, 2024 at 7:46 pm #1433041
    Mike

    Hi,
    Sorry, guess I misunderstood.

    Best regards,
    Mike

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