Tagged: ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • February 22, 2014 at 2:50 pm #227905
    BelIblis

    Hi,

    I have a page layout with a 3-column-grid:
    -top row: 3 Images
    -middle row: 3 Icons (all with ‘align center’ selected)
    -bottom row: Product Grid

    I want the icons to be large & prominent. But no matter what I do, the icons always exceed the width of the rest of the page. I was also hoping to get the icons responsive (and large) by placing them in a 1/3 layout element and then entering a 100% value in the Avia Layout Builder.

    Here are some screenshots (screenshots show the entire width of the screen):

    Icon with border, icon size: 100%
    http://s25.postimg.org/5e30d9q0f/Screen_Shot_2014_02_22_at_12_33_14.jpg

    Icon with border, icon size: 300px
    http://s25.postimg.org/qdj44rrov/Screen_Shot_2014_02_22_at_12_34_21.jpg

    Icon with border, icon size: 300px, at a lower/responsive screenwidth:
    http://s25.postimg.org/5fcy6oru7/Screen_Shot_2014_02_22_at_12_34_42.jpg

    Am I doing something wrong in the layout builder? Or is this normal behaviour & is there any CSS fix for this?

    Thanks a lot!

    February 23, 2014 at 1:38 am #227984
    Ismael

    Hey BelIblis!

    Have you tried adding each icon element inside a 1/3 layout? Please use media queries to resize the icon on different screen sizes.

    Regards,
    Ismael

    February 23, 2014 at 12:44 pm #228114
    BelIblis

    yes, each icon element is inside its own 1/3 layout. I know about the media queries css, but even in the “standard” width, the icons don’t fit the grid (see 1st screenshot link in my previous post).

    Is this maybe a fault/bug in the theme’s css? (Looks like it’s got something to do with margin/padding).

    February 24, 2014 at 4:31 am #228332
    Ismael

    Hey!

    I did a bit of testing and looks like large icons will overlap each other. I added 3 1/3 column layout with 50px bordered icon size inside each. I need to add this on Quick CSS to prevent them overlapping with each other.

    .av_font_icon.av-icon-style-border .av-icon-char {
width: 50% !important;
line-height: 120px !important;
min-height: 120px;
}

    Best regards,
    Ismael

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