Tagged: ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • January 29, 2016 at 7:57 pm #574784
    icubra

    Hi,
    Is there a way to control at which screen resolution portfolio grid number of columns changes from 4 columns to 3 and then to 2?
    At this point it seems that number of columns jumps directly from 4 to 2. I would like to have 3 as an option if it’s possible
    and to set resolution when it changes.
    This is the page in question:

    Projects

    Regards, Igor

    January 30, 2016 at 1:39 pm #574990
    Vinay

    Hey icubra!

    Yes it is possible please use the below css in Enfold > Quick CSS please feel free to adjust the values to suit you

    
@media only screen and (max-width: 989px) and (min-width: 768px) {
    .av_one_fourth  {
        width: 28%!important;
        float: left!important;
        clear: none!important; 
        margin:20px!important	 
}
}

    Regards,
    Vinay

    January 30, 2016 at 2:51 pm #575006
    icubra

    Hi Vinay,
    Thank You for quick response!
    That worked really well for home page, but it made some unnecessary changes in Projects Page (see below).
    Changes made four column portfolio grid on Projects Page get spacing between columns.
    When I set margins to 0px homepage goes wrong on setted resolution (max-width: 989px) and (min-width: 768px).

    Actually I was looking for a change in Projects Page.
    Is there a way to set spacing between columns and rows just for this page?
    Is there a way to set minimal height for portfolio grid content box on setted resolution (max-width: 989px) and (min-width: 768px).?

    Regards,
    Igor

    January 30, 2016 at 7:19 pm #575061
    Vinay

    Hey!

    Please replace the earlier code with the code provided below. this code will affect only the homepage. Feel free to change the max width and min width of the screen.

    
@media only screen and (max-width: 989px) and (min-width: 768px) {
    .home .av_one_fourth  {
        width: 28%!important;
        float: left!important;
        clear: none!important; 
        margin:20px!important	 
}
}

    It’s not clear what you want to do on the portfolio page. Once the homepage is set please let us know what you want to do on the other pages with a mockup if possible and we might need admin login credentials with permission to add css code we will surely help you.

    Cheers!
    Vinay

    January 31, 2016 at 12:45 pm #575286
    icubra

    Hi Vinay,
    Thank You for quick response and help.

    I was looking for fixed height of portfolio grid content box (.grid-content height) on chosen resolution.

    Projects

    I managed to set it with this code (don’t know if it’s right or wrong but it works).

    @media only screen and (max-width: 1200px) and (min-width: 768px) {
    .grid-content { height: 90px; }
    }

    Now looking for a way to set vertical alignment of text (titles of projects) on the projects page but with no success.
    http://prntscr.com/9x54tg
    How can this be done?

    I appreciate your help,
    Regards, Igor

    February 1, 2016 at 11:02 pm #576072
    Vinay

    Hi!

    Please check the site now we have made the changes and added the below css code

    h3.grid-entry-title {
	    position: absolute!important;
    left: 20px!important;
    right: 20px!important;
    top: 50%!important;
    transform: translateY(-50%)!important;
}

    Cheers!
    Vinay

    February 3, 2016 at 8:20 pm #577320
    icubra

    That worked great Vinay!
    Thank you for the support.
    Cheers

    February 5, 2016 at 10:59 am #578413
    Vinay

    Hey!

    Glad we could help you with this. we really appreciate if you rate our theme on themeforest :)
    Please feel free to get in touch with us if you have any questions.

    Thank you for using Enfold :)

    Regards,
    Vinay Kashyap

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Portfolio grid number of columns change due to change of screen resolution’ is closed to new replies.