Sydney project - white space between project images

Hi Kharis,

my website was working fine but now there is some problem with projects section on home page there is white space between every image on desktop and on mobile version please help so it look normal your help will be really appreciated also here is the image


and my website link is https://www.kitchentek.com.au/

regards

Fatima

Hello Fatima,

As checked, it looks good on larger screen.

Have you been able to manage the issue by yourself?

Please share us screenshot to the issue on your mobile screen.

What is the resolution of your device?

Stay safe.
Have an excellent day ahead :slight_smile:

Regards,
Kharis
aThemes Support

Hi Kharis,
Thanks for reply here i am not able to resolve the issue and i checked it in incognito mode on mobile, desktop and laptop and the white space is still present there here is the desktop resolution 1920x1080, laptop 1440x900, mobile 412x869, screen shots here


website is https://www.kitchentek.com.au/

your help really appreciated
regards
fatima

Hello Fatima,

Thank you for adding some details along with the screenshots.

Let’s address the issue on larger screen first.

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (min-width: 1200px) {
      .roll-project .project-item a {
        display: block;
      }
      .roll-project .project-item a img {
        object-fit: cover;
        display: block;
        width: 100%;    
      }
    }

Let me know how it works for you.

Regards,
Kharis
aThemes Support

Hi Kharis,

Thanks for reply i applied the css and on my desktop it looks good on other devices problem still persist.

Regards
Fatima

Hi Kharis,

Waiting to resolve the issue on other devices please.

Regards
Fatima

Hi Fatima,

My apologies for the delay in response.

Try adding this extra CSS code:

    @media only screen and (max-width: 767px) {
      .roll-project .project-item a {
        display: block;
      }
      .roll-project .project-item a img {
        object-fit: cover;
        display: block;
        width: 100%;    
      }
    }

I hope this reply helps.

Stay safe.
Have an excellent day :slight_smile:

Regards,
Kharis
aThemes Support

Hi Kharis,
thanks for your reply i have already applied this code and it only fixed the desktop screen problem but on mobile screen pictures still look weird and short with white space also the main slide image is not looks fit for mobile screens. I realized that the mobile version is all messed up header image, other images, fonts are somewhere shown too small as well please kindly help me i dont know what happened. plz help
Your team and theme support is beyond best its super awesome thanks in advance.

please have a look my website is https://www.kitchentek.com.au/

Regards
Fatima

Hi Kharis,

Please let me know if you need access of my website admin dashboard to look into the problem will be very thankful to you.

Regards
Fatima