Okay
  Public Ticket #2403954
Text position recent projects element
Closed

Comments

  • tomvanluijn started the conversation
    May 15, 2020 at 11:52am

    I would like to change the project name + link to project to the bottom of the page just above the back and forward arrows. 

    How can i change the position of this text?


    Kind regards,

    Tom.

  •  2,979
    Andrew replied
    May 15, 2020 at 1:33pm

    Hi Tom,

    Use the following custom css in Salient > General settngs > CSS/Script related:

    .nectar_fullscreen_zoom_recent_projects .project-slide .project-info{
    top:70%;
}

    Kind regards.

  • tomvanluijn replied
    May 15, 2020 at 1:39pm

    Awesome thanks. Is there a way to make a difference for mobile/desktop? 

  •  2,979
    Andrew replied
    May 15, 2020 at 1:43pm

    Hi Tom,

    The first is form mobile. Second desktop:

    /*Mobile*/
@media only screen and (max-width: 768px){
    .nectar_fullscreen_zoom_recent_projects .project-slide .project-info{
    top:40%;
}
}
/*Desktop*/
@media only screen and (min-width: 768px){
    .nectar_fullscreen_zoom_recent_projects .project-slide .project-info{
    top:70%;
}
}

    Thanks.

  • tomvanluijn replied
    May 15, 2020 at 1:47pm

    Great, works as a charme. Can i make the text size smaller without changing all the H1's ?

  •  2,979
    Andrew replied
    May 15, 2020 at 1:53pm

    Hi Tom,

    Try the following:

    @media only screen and (min-width: 768px){
   .nectar_fullscreen_zoom_recent_projects .project-slide .project-info h1 > span {
    font-size: 40px;
}
}

    Thanks.

  • tomvanluijn replied
    May 20, 2020 at 6:31am

    It seems that the spacing between the project namen and "view project" also gets bigger. Can i make the space smaller?

    I'm using the following css:

    /*Mobile*/
    @media only screen and (max-width: 768px){
        .nectar_fullscreen_zoom_recent_projects .project-slide .project-info{
        top:68%;
    }
    }
    /*Desktop*/
    @media only screen and (min-width: 768px){
        .nectar_fullscreen_zoom_recent_projects .project-slide .project-info{
        top:75%;
    }
    }
    /*text size landing Desktop*/
    @media only screen and (min-width: 768px){
       .nectar_fullscreen_zoom_recent_projects .project-slide .project-info h1 > span {
        font-size: 60px;
    }
    }
    /*text size landing Desktop*/
    @media only screen and (max-width: 768px){
       .nectar_fullscreen_zoom_recent_projects .project-slide .project-info h1 > span {
        font-size: 40px;
    }
    }


  •  2,979
    Andrew replied
    May 20, 2020 at 8:24am

    Hi Tom,

    Try the following css:

    .project-slide .project-info .container a {
    margin-top: 0;
}

    Kind regards.