Mobile cropping different to desktop

When I view the site on a mobile the main navigation page is cropped, I'd like it to mirror the desktop appearance, so images are not cropped when displayed - is it possible to change this?

The URL is https://jamieroberts.london/

Hi, here's a code snippet to display the main navigation page on mobile view in the same manner as desktop view:

@media only screen and (max-width: 640px) {
	body#collection-64d776f4e7e1d17768b92716 img.js-index-item-image {
		width: 100% !important;
		height: 100% !important;
		left: 0 !important;
		top: 0 !important;
		object-fit: cover !important;
		object-position: center !important;
	}

	body#collection-64d776f4e7e1d17768b92716 .index-item-height-large:not(.index-item-width-grid) .index-item {
		height: 30vh !important;
	}
}

Thank you Lesum, I tried adding this in the DESIGN > CUSTOM CSS pane but it didnt appear to change anything - am I doing it right? Images below, thanks

2 hours ago, visitjamie said:

Thank you Lesum, I tried adding this in the DESIGN > CUSTOM CSS pane but it didnt appear to change anything - am I doing it right? Images below, thanks

Remove the previous code and the code below.

@media only screen and (max-width: 767px) {
  #collection-64d776f4e7e1d17768b92716.index-item-height-large:not(.index-item-width-grid) .index-item {
    height: 56vw !important;
  }
}

That has fixed the issue! Thanks so much Web Solutions and Lesum

You're welcome!