-
Posts
-
Hi,
i use at my Website a masonry portfolio. I decided to use special bigger tiles with the keywords portrait or lanscape, or both. Now i recognized, that the masonry will have 6 columns when you go to fullscreen. I want to have only 4 of them. I can´t set 4 in the masonry settings, because ipad is showing also four tiles then, but they are then too small and must be 3 columns.
So i used the shortcode:
@media only screen and (min-width: 1340px) { #top .container .av-masonry-entry { width: 25%; }}This code works fine and the masonry will have only four columns, when site is maximized. But now the langscape tiles are gone and where not longer displayed. I think its about the 25% limitation. Is there a way to fix it?
Hey Pako,
Could you please attach some screenshots of the issue?
I could not reproduce what you’re getting.
Best regards,
VictoriaHi,
i will try to explain.
If you go to this Website, you will see a Database, with Pictures.
Normaly in Fullcreen it looks like this:
You can see, that there are 6 columns in Fullscreen. Some more important entrys use the picture over two columns, normally they use only one. For example here the “Kernkraftwerk” is using 2 columns and 2 rows.
For a better view, i wanted to use in fullcreen only 4 columns. So i set the specific setting in the options of this massonry. That works brilliant, but on the ipad, there are 4 columns used too, which is too much. For this screen size i prefer 3 columns.
So i used the code below to force the 4 columns in fullcreen, and left the setting in the theme by default, so that other screen sizes which are less than big as 1340px, can be automaticaly forced to use 4, 3, 2 or 1 column.
@media only screen and (min-width: 1340px) { #top .container .av-masonry-entry { width: 25%; }}The code forced the 4 columns on fullscreen correctly BUT the important entrys now forced to use only one column now. For example:
You see that the “Kraftwerk” is using now only 1 column.
Now i want your help to fix this problem. The Result should be like the picture below. 4 Columns with bigger pictures on important entrys like below.
The hope is, to edit or add a code somewhere, to say to the theme… hey, 4 columns are maxiumum. All other you can handle by yourself. Somewhere in the deep of the theme, there should be a trigger, on what site the masonry decides to use 6,5,4….1 Columns on the specific screen size.
Thank you in advance for you help and sorry for the english :).
Hi Werk32,
Well, the masonry is not using these columns and the position of every element is calculated with JavaScript. So the css you’re trying to add will not have any effect.
Best regards,
VictoriaHi,
Thanks for contacting us!
Please add following code to Quick CSS :)
@media only screen and (min-width: 1800px) { .responsive.html_av-framed-box .av-masonry-col-flexible .av-masonry-entry.av-landscape-img { width: 49.80%; } .responsive.html_av-framed-box .av-masonry-col-flexible .av-masonry-entry { width: 24.90%; }}Best regards,
Yigit
- The topic ‘Masonry Portfolio Columns’ is closed to new replies.