Image with text overlay won't resize for mobile or full-screen

Store Design
1

Hello,
We have added in an image of our new logo on our home page and it will not automatically resize for full-screen or mobile viewing (www.mitchsmeals.com). It continues to cut off important information. Can you please share how we can fix this without impacting the quality of the image uploaded?
Thank you!

2

@mitchsmeals

can you try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
@media only screen and (max-width: 749px) {
.hero--medium {
    height: 200px;
}
}
3

Thank you so much for the fast reply @KetanKumar !

This has resolved the issue for the mobile view yet the “full screen” desktop view still cuts off slightly at the top and bottom. Do you have any coding adjustments to avoid this too please? :slightly_smiling_face:

1 Like
4

@mitchsmeals

yes, please add this code also

@media only screen and (min-width: 750px) {
.hero--medium {
    height: 750px;
}
}
5

Thank you so much!!! All working perfectly now :slightly_smiling_face:

1 Like
6

@mitchsmeals

its my pleasure to help us