My only question is how can I stop the featured images that comprise the portfolio grid layout from being cropped in the upload process? I found this article from a search, and I have to say your code (and your easy to follow explanation of each section) got me up and running with my own customizations in less than 15 minutes. I really appreciate success stories like this . So for a while now people have wanted to do more with the standard Divi portfolio grid. We want the images to be square and what’s happening is they are displaying square but the dimensions are not square. You may also adjust the font sizes on a few different screens by adjusting these mobile queries at the end of the custom CSS. Geno, this works great and thanks for posting these tips. I would double check the first part of most of these tutorials which is adding a class to elements on the page. If Light is currently selected, then switching it to Dark should resolve this for you. Oh nooo! How can I reimplement the title underneath the image for tablets and phones. This code will change the number of columns in the Portfolio module from 4 columns to 3 columns. Everything else works just fine, it’s just still showing 4 columns. Designed by Elegant Themes | Powered by WordPress. If not, go to Appearance>Divi Theme Options>ePanel>Custom CSS (which is located at the bottom of the ePanel). It doesn’t matter if I use square or rectangle images. I think that the text color causing this. Please help me how can i do that. Thanks!! I would love your input, though, on a couple things: In the General Settings right below Categories is the Show Title option. Thanks for the link to your page, that is helpful. Select Save & Exit and Update the page. Now you are going to insert a Portfolio Module into that section. I’m very new to css and perhaps I am copying the code into the wrong place. One question, if you don’t mind…. Do I need to do anything else? I wish that were the case. Please make it happen for 2017, pretty please . It is on our list of things to do one day. Do you have any idea which part of the code I need to update to fix this? Right now, there’s nothing when the screen size is reduced. Divi is a registered trademark of Elegant Themes, Inc. You can easily do this by applying a new class to the module and adding a little CSS to your child theme or the Custom CSS section in the Divi Options panel. Any way to display the top of the image rather than the center on the preview? If Dark is already selected then go to the Advanced Design Settings tab and scroll down the the Title Text Color. Any ideas? It has also been designed to work on screens larger that 981px so that it does not ruin the mobile or tablet experience. I recommend changing it to 2. The next batch of code handles all the hover effects. If you want the icon back just remove this code all together. But now there is a way to give the native Divi Portfolio Grid some new options without the cost of a premium plugin and without having to have an extra plugin at all. Thank you for replying so quickly. Sorry. First thing you need to do is create a unique section for the Portfolio Grid, 1. Transform a Divi Menu Item Into a CTA Button, http://divisoup.com/four-more-linkable-image-hover-effects/, https://divi.space/divi-tutorials/how-to-change-the-size-aspect-ratios-of-the-portfolio-grid-images/, http://javelina.cloudaccess.host/results/, http://www.northbrisbanehomeloans.com.au/, https://viveunaexperiencia.com/experiencias/gastronomia/, https://pic.ito.ph/images/2018/09/09/3columnissue.th.png. It would take a bit of custom CSS to apply those hover effects but it is doable. I hope you find this article useful. here’s the full snapshot. Since mobile users dont have the option to hover and they can only touch, it pretty much renders the effect useless anyways. Or if you just wanted to add some similar hover effects to just images, check out this cool tutorial: http://divisoup.com/four-more-linkable-image-hover-effects/, Thank you so much for this cool effect. 6. I used mobile queries to prevent it from being applied in mobile. Geno is an entrepreneur who has been designing websites since 1996. You will find some that are very similar https://quiroz.co/category/menus/, I need your help please. 2) I’d like to keep the titles static on mobile so that they’re always present, but not readily finding the CSS to do that. and https://viveunaexperiencia.com/experiencias/gastronomia/ If you are working with a child theme you can go to Appearance>Editor and open your stylesheet. Can you point me in the right direction? Hello, why in mobile version not work this code? You would have to add a lot of additional css & mobile queries to get it looking good on small devices. i really need it. I’ve been struggling with creating a 3 column portfolio grid… and have tried at least 5 different solutions from the ET support forum with no success. But you can always change this code if you want it to work on smaller devices. In General Settings, change the setting to Grid and disable the Categories, 5. He also enjoys all things design, traveling, hanging out with friends, encouraging other believers, and experimenting with new technologies. Then I update the file but there is no change in my page. There are a couple of things that could be happening. Now lets start to dazzle things up a bit with some CSS. Sorry, I’ve pasted the thumbnail.