Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #445156

    http://www.gravitygroms.com

    Under the – WE OFFER MANY OPTIONS FOR YOUR GROMS – section you’ll see there are 3 columns each with an iconbox in it – each of these iconboxes is different heights based on their content. I want them all to be the same height. If I set the iconbox to a certain height in pixels it looks good on some screen resolutions – but when the screen size decreases the iconbox content stretches below the iconbox background color. Is there a way to set a standard height that adjusts by screen size?

    height:100% doesn’t work.

    • This topic was modified 9 years, 7 months ago by ewingmh.
    #445549

    Hi ewingmh!

    Thank you for using Enfold.

    Use css media queries to adjust the height of the icon box on different screen sizes.
    https://css-tricks.com/css-media-queries/
    https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

    A few examples of css media queries.

    @media only screen and (min-width: 1140px)  {
    
    }
    
    /* Smaller than standard 960 (devices and browsers) */
    @media only screen and (max-width: 989px) {
    }
    
    /* Tablet Portrait size to standard 960 (devices and browsers) */
    @media only screen and (min-width: 768px) and (max-width: 989px) {
    
    }
    
    @media only screen and (max-width: 767px) {
      /* Add your Mobile Styles here */
    
    }

    Best regards,
    Ismael

    #445907

    so percentages won’t work?

    #446981

    Hi!

    No, percentage will not not work because the grid row’s display is set to table and the height is not specified to keep it responsive.

    div#av-layout-grid-1 {
      height: 1070px;
    }

    Your best chance is the css media query or creating a dynamic javascript. Something like this: http://www.zyxware.com/articles/2545/jquery-set-the-height-of-one-div-to-another-div

    Best regards,
    Ismael

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