Hello Diane

Sorry, I could not properly get your issue. Please share a screenshot of your issue to understand it better.

Best regards

This is desktop view - everything looks good: https://dianec16.sg-host.com/ms-desktop.jpg

When I resize my browser window, or view on a mobile device, the logo gets blurry and the heading text in our hero section gets cut off:

https://dianec16.sg-host.com/ms-tablet.jpg

https://dianec16.sg-host.com/ms-mobile.jpg

Please use this CSS to Template Options -> Custom Code -> Custom CSS

#sp-main-body {
    position: relative;
    top: 150px;
}

Thank you, that fixed the issue with the text getting cut off.

Regarding the images, I have a desktop version and a mobile version. How can I keep it from switching to the mobile version on my desktop when the browser window is sized down?

In the row setting -> style, there is an option to hide row for desktop and mobile. Use that option.

Sorry if I wasn't clear, I'm referring to our logo. I have a desktop version that is 130px high and a mobile version that is 260px high. On my desktop, when I resize the browser, the mobile version displays and it is blurry. How do I tell the template to display the desktop version of my logo when I resize the browser?

Oh! You are talking about the logo. I think for desktop 260px works well and for mobile 130px works well. Have you uploaded two logos on Template Options -> Basic -> Logo?

Yes, I have already set a desktop and mobile version of my logo. The problem is that on my desktop, when I resize the browser, the mobile version displays (not the desktop version) and it is blurry. How do I tell the template to display the desktop version of my logo when I resize the browser?

When you resize the browser to the size of mobile device scren, it will show the mobile logo. No option to change this. Upload a higher resolution logo to avoid blurriness.