I am new to web site design - just trying to pick it up with Site Designer - and I've built a basic site that looks good for what I am trying to do. When I click the icon for a smartphone in the toolbar, the site looks good but when I choose Device View from the top toolbar icon, it cuts off the top and bottom of the middle part of my page but still shows a button if I scroll down. From a desktop browser, it works just as expected. I am new to this so I don't know what I need to change to make it show the full page in a mobile/Smartphone browser.

Hi
I am out for the rest of today, so unable to help if someone else chips in first, then great, if not I can do you a quick step by step tutorial to show the process

What we will need though, is confirmation of the framework you are using (I think it is the materialize one. but hard to tell from an image.

Hi again
actually one of the first things you could try is to either reduce the padding (or margin) on the body, or the mail element that holds the content at the smallest breakpoint, This should make the content spread a little bit, therefore reducing the height.

You could also try reducing the font size font the header text, by a few px, this would also reduce the height, perhaps even a combination of both.

There are some additional height settings you could make, (some custom CSS, others built into Site Designer) Min/Max height, but that depends on if there is going to be any more content/sections below the button at the bottom of the page.

I should also add that you are viewing the canvas workspace (at mobile device width) at 70% which obviously makes things appear smaller than they are in real life.

I should also add again, that the "Device View" and the "Preview" buttons are apps, and do not actually display exactly what people who view the website, might actually see (it probably is close but depends on the device they are viewing from.) I used to always allow a few PX top and bottom of the viewport height, especially at mobile device widths, but nowadays there is a new CSS property which automatically adjusts the device view to the actual viewport device, regardless of what the browser may have at the top or the bottom when they are viewing it,, however, this is a custom CSS code and only works on exported files that are uploaded to the hosting service, but for the moment I would suggerst that you use the viewport heights and widths settings built into Site Designer.

Hi Rod,
The phone, tablet, and laptop/desktop icons to the left only have to do with the width of the canvas, not the height, and are loosely linked to the breakpoints. The Device view replicates the view on a phone. Phones are different in size, therefore, the Device view can be edited. So, if you add the dimensions of your own phone, you should get a fairly close view of what it's going to look like.
See illustration: https://eikweb.com/stuff/device-view.jpg