Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #489055

    Hi, i need to use 9 columns in avia builder, how can i make that happen maintaining the responsive functionality?
    Regards

    #489404

    Hey druzes!

    which kind of 9 columns do you want? Responsive does not mean it will automatically look exactly as you want, instead it means you can control and change behaviors so it fits on different screen sizes.

    Cheers!
    Andy

    #489458

    Hi, i need to set up 9 images that are side by side, each one can be clickable with links.
    In smaller screens i want them to stack verticaly, as nomarly happens in this theme.
    I send you an image of the design that i’m developing.

    #489523

    you don’t need columns for that.
    Take a galery and thumbs are small enough to get 9 images beside each other (perhaps portfolio-small as thumbnails)
    on galery-columns you choose 9 – thats it

    edit : no – it does not work with links to different places ( not the images)

    Parner-Logo Element only got 8 columns if this is enough it makes sence to not choose an odd number of columns for responsive design.

    • This reply was modified 9 years, 3 months ago by Guenni007.
    #489556

    Thank you, but it’s not quite what i need. Because in smaller screens the images don’t sack verticaly has the columns do.
    I’ve managed to get it working with 5 columns but when i add the other 4, they automaticaly align in another row below the first 5 images. That’s what i need to change.
    Any ideas?
    Thank you

    #489973

    well place a colorsection and in it a text-block
    fill in your images ( like in former wordpress times with “add media” ( all floating on the left !) ) give the text-block a class ( i called it nineimages) add the following to quick css:

    .nineimages a {
    margin: 1% !important;
    width: 9% !important;
    }
    
    .nineimages img {
    width: 100% !important;
    height: 100% !important
    }
    
    @media only screen and (min-width: 768px) and (max-width: 989px) 
    {
    .nineimages a:nth-child(3n+1) {clear: left}
    .nineimages a {margin: 1% !important;width: 30% !important}
    }
    
    @media only screen and (min-width: 480px) and (max-width: 767px) 
    {
    .nineimages a:nth-child(2n+1) {clear: left}
    .nineimages a {margin: 1% !important;width: 48% !important}
    }
    
    @media only screen and  (max-width: 479px) 
    {
    .nineimages a {margin: 1% !important;width: 98% !important}
    }

    i think on the smalles screens it is not necessary to set a clearing

    you can handle this best with images of the same size ( see the second row) – but as you can see here – it is not necessary
    http://webers-testseite.de/enf02/nineimages/

    • This reply was modified 9 years, 3 months ago by Guenni007.
    #490561

    Hi @druzes,

    Did you try out @Guenni007’s last suggestion and did you have any luck with it?

    Thanks,
    Rikard

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