Banner cut off on mobile

[ldub]

You can see that the banner gets cut off on mobile (horizontal cut off point circled in red below):

On your demo site, it doesnt look that bad because the banner's background is black. However, if the banner doesn't have a black background then it really sticks out. Is there any way to make it stretch/cover the banner vertically to fit the background?

[arichardmusic]

Yes, experiencing the same problem with the https://arichardmusic.netlify.com site that's in development. Very pronounced in this case because of the red photo background.

[ldub]

@arichardmusic as a quick stopgap, commenting out this line:

gatsby-theme-musician/theme/src/gatsby-plugin-theme-ui/componentStyles.js

Line 11 in ada534c

minHeight: ["60vh", null, 400],

helps with this problem. it does not make the background stretch, but instead makes the black portion smaller.

[charles-hood]

@arichardmusic as a quick stopgap, commenting out this line:

gatsby-theme-musician/theme/src/gatsby-plugin-theme-ui/componentStyles.js

Line 11 in ada534c

minHeight: ["60vh", null, 400],

helps with this problem. it does not make the background stretch, but instead makes the black portion smaller.

Is there a way to shadow this component to accomplish this?