Okay
  Public Ticket #2825273
mobile portfolio view in several collums
Closed

Comments

  •  5
    lejojo24 started the conversation
    July 14, 2021 at 1:03am

    Hi guys! On desktop I love my Salient portfolio with the "Masonry Style". But I would like to see it a similar way on mobile version. On mobile it just shows up in 1 collumn... On mobile I would like it to be as the mobile view of this theme:  https://impreza4.us-themes.com/


    So that it opens up a bit more, sometimes splits into 2 collumns.. As you see attached. Do you have a tip how I can adjust this? 


    Thank you very much in advance and BR

    - Jojo

  •  8,844
    Tahir replied
    July 14, 2021 at 6:47am

    Hey lejojo24 ,

    We can adjust the Mobile Portfolio Column using a small CSS snippet. Let us know which demo you need to adjust.

    Thanks

    ThemeNectar Support Team 

  •   lejojo24 replied privately
  •  8,844
    Tahir replied
    July 14, 2021 at 9:57am

    Hey Again,

    Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):

    @media only screen and (max-width: 690px) {
    body .portfolio-items .col.elastic-portfolio-item {
        width: calc(50% - 4px) !important;
    }
}

    Thanks

    ThemeNectar Support Team 

  •  5
    lejojo24 replied
    August 16, 2021 at 11:42am

    Hi again Tahir,


    i would please like to get the same support again. Because with this existing snippet, It is not working at the following page:

    At this page, I have a portfolio of projects: http://b3lj8t.myraidbox.de/6-2-copy
    On mobile screen, I would like it to show at one page. I'm using the demo "salient-slider-portfolio". Thank you! 

    Also there is the "Load more" Button, but I can't change the colour from black to another colour. Do you know how?

  •  8,844
    Tahir replied
    August 16, 2021 at 12:21pm

    Hey Again,

    Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):

    @media only screen and (max-width: 690px) {
    body .wpb_row .nectar-post-grid[data-columns][data-masonry="yes"] > div {
        width: calc(50% - 20px) !important;
    }
}

    Thanks

    ThemeNectar Support Team 

  •  1,878
    Judith replied
    August 16, 2021 at 12:24pm

    Hi There,

    To change the load more color please try this css:

    .nectar-post-grid-wrap .load-more {
        color: #fff;
    }

    Please let us know the number of columns you would want to see on the mobile projects segment?

    Thanks

  •  5
    lejojo24 replied
    August 16, 2021 at 12:34pm

    Hello Judith, thank you. On mobile I would like to see 4 collums. The portfolio have to be small. Because on mobile it all (incl. Heading + "Load More") has to fit on one page. So that you can see everything on one view, when you open it. 

    The previous CSS from Tahir did not work for that. And I was not able to modify it myself. Thank you in advance!

  •  1,878
    Judith replied
    August 16, 2021 at 1:27pm

    Hi There,

    Please try this css:

    @media only screen and (max-width: 690px){
    body .wpb_row .nectar-post-grid[data-columns][data-masonry="yes"] > div {
        width: calc(31% - 45px) !important;
        min-height: 140px !important;
    }
}

    Thanks.