front page only fills top half of page on ipad

How is your boss expecting to turn a 2:1 (ish) ratio image into a a 2:2 (ish) ratio image?

Andrew thanks for pointing that out,

so in short you are saying that I just need to change the ratio of these pictures? will that help to fill up the ipad? also if I change the ratio of the images with the ipad in mind, does that mean I will have to do a media query for the ipad?

Before getting to the solution, these are the issues you might face:
– When using a 2:2 ratio image at desktop, you might have to cut off part of the height so that it’s not massive.
— This might affect the way your slider calculates its height, it shouldn’t but it might so watch out for any large gaps below your images.
— Think about loading times for your site

Maybe you could incorporate ‘srcset’ into your slider images, but this will probably require a lot of work in the Dashboard to accept multiple images per carousel slide + a lot of work in the template of the carousel. This would be the ideal solution, but it can be a lot of work.

Or you could continue using the same 2:1 ratio image on desktop and then mimick a 2:2 ratio image on tablet by expanding the image in height and then cutting off any excess width – but you might find that you will need a massive image on desktop for this not to look blurry on tablet.

It might be good to let your boss know that this is not a simple fix and you need some time to explore the best options. Then you can come back to him with the options and explain why this is taking so long – so that you don’t get fired ??

okay I’m going to try the 2:2 in the ways you mentioned above when I get home in about an hour, then i’ll get back to you here. Please stay with me on this and thank you for your guidance, I really appreciate it!

so I tried the 2:2 ratio image that Andrew suggested and it looks much better on the ipad. you can see what I did in https://www.visioncy.org/test3, to see ipad view just type this url https://mobiletest.me/ipad_mini_emulator/?u=https://www.visioncy.org/test3 , its not yet refined but looks better than before. thank you Andrew.

My problem now is the 2:2 pic doesn’t look good on desktop, its too long(height), this page is meant to have no scroll on desktop but when I use the 2:2 image I now have to scroll down to the 3 buttons at the bottom. can someone please help me on how to do a media query for ipad so that I can use different size images for ipad and desktop. I’m not an expert so if there is any other method please let me know. thank you.

Maybe try some CSS to cut the image off so that it appears shorter:

@media screen and (min-width: 940px) {
.vc_images_carousel {
    height: 500px;
    overflow: hidden;
}

.vc_images_carousel img {
    margin-top: -100px
}
}

trying this now.

it worked just as you said it would :). Thank you so much Andrew! you can see how it looks on visioncy.org/test3. how can I apply a different image for ipad version only? because the picture is too stretched this way, but I believe if we can use the media query you sent me to use a different image by defining the url?

Thank you so much for your patience with me, I’m sorry I keep asking questions.