Divi Mobile Solution without Mobile Redirect

Mobile, Mobile, Mobile… yes that seems to be a major topic of conversation lately and it should be. We build a ton of mobile solutions for clients and developers using divi, but some still think you need a mobile redirect to accomplish this and you do not. Not even a little bit.

Now a mobile site is better than responsive but you can search my blog for posts that explain why responsive is not a perfect solution for mobile sites or you can contact me and I am happy to talk about it with you.

Anyway, I did a quick video that shows just how simple it is to deliver a true mobile solution without using a mobile redirect and Divi really makes this possible. The video below shows just how quick and easy it is. Trust me your mobile visitors will appreciate the mobile experience.

Place Pictures in Image Module without Stretching or Squeezing the Image

Using the image module can be a great solution for a portfolio or grid album look, but when some images are taken portrait and landscape you can have some images look great and some look squished or stretched. This can really hold true when viewing from a mobile device.

The solution is really quite easy by using a CSS property object-fit: cover. The object-fit CSS property specifies how the contents of a replaced element should be fitted to the box established by its used height and width.

So, if you have an image 1200 x 600 or an image 600 x 1200 they will just display in the image module correctly.

In my example below, you need to give your section holding the image modules a CSS Class of JSgallery

Then add a code module within the section and use this CSS style. <style> .JSgallery img {height: 220px; object-fit: cover;}</style>

This keeps everything looking great as a grid and when you click on the image for lightbox view it will open the true size of the image, whether its landscape or portrait.

A good live example of this can be seen HERE

Admin Dashboard view