-
AuthorPosts
-
August 17, 2015 at 6:22 pm #489055
Hi, i need to use 9 columns in avia builder, how can i make that happen maintaining the responsive functionality?
RegardsAugust 18, 2015 at 11:42 am #489404Hey 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!
AndyAugust 18, 2015 at 12:43 pm #489458Hi, 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.August 18, 2015 at 2:32 pm #489523you 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 itedit : 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, 2 months ago by Guenni007.
August 18, 2015 at 3:47 pm #489556Thank 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 youAugust 19, 2015 at 12:10 pm #489973well 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, 2 months ago by Guenni007.
August 20, 2015 at 6:51 am #490561Hi @druzes,
Did you try out @Guenni007’s last suggestion and did you have any luck with it?
Thanks,
Rikard -
AuthorPosts
- You must be logged in to reply to this topic.