Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • March 24, 2016 at 11:40 am #602940
    CatherineCBrand

    Hello,

    I would like to have my Enfold portfolio grid to appear in 1 column when the screen size has a max-width of 650px (instead of 480px). Could you please tell me how to do it?

    Many thanks,
    Catherine

    March 27, 2016 at 10:09 am #603869
    Vinay

    Hey CatherineCBrand!

    To make the portfolio grid items collapse at 650px width please use the below css in Enfold > General Styling > Quick CSS 

    @media only screen and (max-width: 650px) {
.responsive #top #wrap_all .grid-sort-container .grid-entry {
    clear: both!important;
    width: 100%!important;
    left: auto!important;
}}

    Cheers!
    Vinay

    March 29, 2016 at 9:28 am #604315
    CatherineCBrand

    Thanks Vinay! It works perfectly!

    Best,
    Catherine

    March 29, 2016 at 11:48 am #604385
    CatherineCBrand

    Sorry, I have another question regarding the portfolio grid.

    I would like to make the right and left margins between each item wider to align images to the above text columns (link to print screen below). I tried to modify them but didn’t manage to do it. Could you please help me on this?

    Many thanks,
    Catherine

    March 30, 2016 at 7:22 am #605001
    Jordan

    Hey!

    Try using the below css in Enfold > General Styling > Quick CSS:

    #top .no_margin.av_one_third {
    width: 33.33%;
}

    Try adjusting the width down so that the images are aligned with the text above it. Adding wider margins may not work as the images are trying to keep in 3 columns without breaking out of the column.

    Regards,
    Jordan

    March 31, 2016 at 9:56 am #605740
    CatherineCBrand

    Hi Jordan,

    Thanks for your help! Is there a way to remove the right 20px margin on the last grid item of each line?

    Best,
    Catherine

    March 31, 2016 at 8:13 pm #606181
    Andy

    Hi!

    can you provide us a link to your site showing the elements in question please? we need to be able to inspect the elements.

    Regards,
    Andy

    April 4, 2016 at 9:24 am #607456
    CatherineCBrand

    Hi,

    Thanks for your reply. Please find the link below (private).

    Regards,
    Catherine

    April 4, 2016 at 2:32 pm #607615
    Yigit

    Hey!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab

     .grid-entry:nth-child(3n+3) .inner-entry {
    margin-right: 0!important;
}

    Regards,
    Yigit

    April 11, 2016 at 11:48 am #611138
    CatherineCBrand

    Thanks for your help !

    The last grid item of each line is now perfectly aligned to the right, but is also wider and higher than the others. Is there a way to modify this?

    Regards,
    Catherine

    April 11, 2016 at 4:59 pm #611455
    Yigit

    Hey!

    Please remove the code i posted above and use following one instead

    .grid-sort-container {
    width: 105%;
}

    Best regards,
    Yigit

    April 11, 2016 at 5:19 pm #611469
    CatherineCBrand

    Perfect! Thanks for your help.

    Regards,
    Catherine

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Enfold portfolio grid – have it in 1 column when screen size max-width 650px’ is closed to new replies.