Projects (Portfolio) Featured Images in Mobile View

Hi,

When viewing on mobile, the featured images shown in the Sydney FP: Portfolio widget have no spaces in between them.

I added some custom CSS (following your advice) to add spacing between the columns on desktop view, but when the images are shown in rows on mobile, there’s no spacing.

Please can you advise?

Thanks
Sophie

Hello Sophie,

Please try to replace this CSS code:

@media only screen and (min-width:480px){
    .roll-project .project-item{
        padding: 20px;
    }
  
    .roll-project .project-item .project-pop {
        width: calc(100% - 20px);
        width: -webkit-calc(100% - 20px);
        width: -moz-calc(100% - 20px);
        height: calc(100% - 20px);
        height: -webkit-calc(100% - 20px);
        height: -moz-calc(100% - 20px);
    }  
}

…with this:

.roll-project .project-item {
    padding: 20px;
}
  
.roll-project .project-item .project-pop {
    width: calc(100% - 20px);
    width: -webkit-calc(100% - 20px);
    width: -moz-calc(100% - 20px);
    height: calc(100% - 20px);
    height: -webkit-calc(100% - 20px);
    height: -moz-calc(100% - 20px);
}

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

Thanks Roman, that’s fixed it! :slight_smile:

Great! You are welcome Sophie :slight_smile:

Kind Regards, Roman.