Logo not resizing and content not coming in until scrolling on mobile phones

On your site I can see that you have not added a logo in the logo area at the top left of the header.

The options are to display a site logo or the site title as text, and it looks like you have kept this as the text based site title, and it appears to be be displayed correctly.

If I have misunderstood the issue, please let me know and I’ll take another look.

For the 3 content boxes, you can disable the animation effect that makes the content only appear when you start to scroll to where the content is located on the page.

To turn off this option, go to ‘Appearance’ > ‘Customize’ > ‘Theme Options’ and de-select the ‘Enable Reveal Animations’ option.

I just realised you may be referring to the background image of the page title area.

If this is the case, I can see that you have added your own custom CSS code that is forcing this area to have a fixed width and height.

As you have defined a fixed width and height for this section, then it will not be able to scale appropriately on smaller/narrower devices such as mobile, because the fixed width/height will always take priority.

Thanks UXL, that helped.

i want to put the grey border around all my field and boxes now. Is there a way to do that?

If I am understanding correctly, you can try adding the following custom CSS to Appearance > Customize > Additional CSS:

.featured-post,
.featured-post:hover {
    box-shadow: 0px 0px 0px 4px rgba(50, 59, 68, 0.45);
}

That is the same semi-transparent border effect that is around each of the circular icons.

If it is something else that you want to add a border to, please let me know and be as specific as you can regarding what exactly you want to put a grey border around.