Tagged: 

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • March 12, 2024 at 10:52 am #1437032
    Meetx

    Hi,

    I am using a “Heading row” cell in the table module from the Avia layout builder to display a 6 parallel session program.
    (See in link private content)
    The client would like the heading row table cell to be equal in size irrespective of the cell content. Do you have any solutions to this request?

    Thank you
    Nick

    March 13, 2024 at 5:03 pm #1437149
    Rikard

    Hey Meetx,

    Please try the following in Quick CSS under Enfold->General Styling:

    .main_color .pricing-table li.avia-heading-row {
  height: 290px;
  min-height: 290px;
}

    Best regards,
    Rikard

    March 14, 2024 at 4:26 pm #1437232
    Meetx

    Thanks Rikard, this has provided a more balance view on the desktop.
    If the client raises the mobile view is it possible to add media queries with a phone view alternative?

    Best regards
    Nick

    March 14, 2024 at 6:03 pm #1437248
    Rikard

    Hi,

    Yes, you can see different examples of media queries here: https://www.w3schools.com/css/css3_mediaqueries.asp

    Best regards,
    Rikard

    March 16, 2024 at 4:42 am #1437351
    Meetx

    Thank you for this link.

    Best regards
    Nick

    March 17, 2024 at 12:04 pm #1437399
    Mike

    Hi,
    When you add a media query you will also want to wrap the above rule, so for example for desktop & mobile try this:

    @media only screen and (min-width: 768px) { 
.main_color .pricing-table li.avia-heading-row {
    height: 290px;
    min-height: 290px;
}
}
@media only screen and (max-width: 767px) { 
.main_color .pricing-table li.avia-heading-row {
    height: 150px;
    min-height: 150px;
}
}

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

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