Creating a Responsive Design For Cross-Platform Devices

We have a page that contains 3 Stack-layouts and a grid. A banner image at the beginning then a grid (3x3) in a StackLayout then an image for the settings. The design is differing from device to device even in the same platform. There is unnecessary spacing and padding between the layouts (Snapshot 2). In the Snapshot 1 attached, the grid is going out of bounds and continues showing the images. In other cases, the icons in the grid are being re-sized automatically to a smaller size which doesn't look as preferred (Snapshot 2). We wish the page not to be scroll-able, it should fit as the size of the phone running it.
Problems and differences are also appearing on iOS devices especially in the 4S which has the smallest screen size of all. Attached is also our code file. Is there a way to make our whole design and layout responsive according the platform we're running it on? Should our images having specific resolutions to run properly?
Any help is much appreciated.