Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1281311

    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?

    #1281693

    Hey Pako,

    Could you please attach some screenshots of the issue?

    I could not reproduce what you’re getting.

    Best regards,
    Victoria

    #1281845

    Hi,

    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:

    Current

    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:

    Wrong

    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.

    Correct

    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 :).

    • This reply was modified 9 months, 2 weeks ago by  Werk32.
    #1282279

    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,
    Victoria

    #1282287
    This reply has been marked as private.
    #1283115

    Hi,

    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

    #1283279

    Awesome! Thank you, that works brillant!

    #1283287

    Hi,

    I’m glad this was resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘Masonry Portfolio Columns’ is closed to new replies.