Adjustment of the Portfolio Category page

Hey Zdeněk,

Thank you for the inquiry.

1.) You can use this css code to adjust the padding between the portfolio items.

.grid-sort-container .grid-entry {
    padding: 10px;
}

2.) To enable the excerpt, edit the element, then go to the Content > Excerpt panel and adjust the settings accordingly.

3.) Did you add this css code?

body .unit.alpha, body .units.alpha, body div .first {
    margin-left: 0;
    clear: left;
}

This modification affect the layout of the grid on tablet view.

Best regards,
Ismael

Hi,

Thank you for the update.

2.) Did you use the Portfolio Grid element? If you need to enable the excerpt in the category or archive pages, please edit the taxonomy-portfolio.php file, look for the avia_post_grid around line 30 and set the “contents” parameter from “title” to “excerpt”.

3.) You may need to toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css code. Make sure to purge the cache afterwards.

body .unit.alpha, body .units.alpha, body div .first {
    margin-left: 0;
    clear: none !important;
}

Best regards,
Ismael

Hi Zdenek,

Thanks for your patience!

I have updated your staging site to Enfold 5.4 and then changed the CSS Code in the Quick CSS field to the following one

@media only screen and (min-width: 480px) and (max-width: 767px) {
body .unit.alpha, body .units.alpha, body div .first {
    margin-left: 0 !important;
    clear: none !important;
}
}

I can no longer reproduce the issue. Could you please review your website?

Best regards,
Yigit

Hi,
Unfortunately, I don’t have an iPad but when I test on browserstack.com/live on a iPad Pro 12 I don’t see the gap from the missing item:


Perhaps your iPad is still showing you the cache, Please note that testing with iPads & iPhones can be hard to clear the cache, often you need to also clear the history to fully purge the cache, following these steps for Safari and note Step 4 where you will Clear the History.

Best regards,
Mike

Hi,
Thanks for your screenshot I tried to recreate this in Chrome Dev Tools between 480px – 711px and I couldn’t recreate the error, until I realized that I was looking at your testweb site and not your live site, when I tested your live site I saw the error.
Please check the same page on the two sites linked below and see if the same is true for you, if it is do you know what is different between the two sites?
Perhaps some CSS, a script, or a plugin?

Best regards,
Mike

Hi,
Thanks for the feedback, we will leave this open until we hear back from you.

Best regards,
Mike

Hi,
Glad to hear that you have this sorted out, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike