Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #602940

    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

    #603869

    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

    #604315

    Thanks Vinay! It works perfectly!

    Best,
    Catherine

    #604385

    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

    #605001

    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

    #605740

    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

    #606181

    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

    #607456

    Hi,

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

    Regards,
    Catherine

    #607615

    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

    #611138

    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

    #611455

    Hey!

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

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

    Best regards,
    Yigit

    #611469

    Perfect! Thanks for your help.

    Regards,
    Catherine

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.