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

    Hi, enfold people!

    I am using some custom css to create a six-column section. I got the code from another thread, it looks like this:

    #six .flex_column.av_one_fifth {
    width: 14.5% !important;
    margin-left: 2% !important;
    } 
    #six .flex_column.av_one_fifth.first {
    clear: none !important;
    margin-left: 2% !important;
    }
    #six .flex_column.av_one_fifth:nth-child(6) {
    margin-top: 0 !important;
    }

    I would like to set all columns to be equal height (I like how it is responsive at different screen resolutions), but when I select this setting from the first column, it seems to break the css code and the sixth column gets pushed off.

    Is there something I can add to my css to set equal columns, or is there another way to fix this?

    This site is in progress, on a local server… so I can’t ask you to log in and check it out.
    Here are screenshot of the issues:
    Regular view (perfect): https://www.dropbox.com/s/fkrqrmkxgahwske/1%20-%20regular-widescreen.JPG
    On a smaller browser: https://www.dropbox.com/s/rks8hickslhx2hq/2%20-%2019-inch-monitor.JPG
    “Equal Height” Set: https://www.dropbox.com/s/zdrl0vtqpyjyv8m/3-%20equal-height-setting.JPG

    • This topic was modified 7 years, 1 month ago by DTC-sites.
    #792085

    Hey DTC-sites,

    You could try to add this to your CSS:

    min-height: 300px;

    Best regards,
    Rikard

    #792401

    That worked! Thanks very much.

    #792604

    Hi,

    Great, glad we could help. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

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