0

I have a header image which looks great on desktop, however, when accessing the site on a mobile device, the image gets cut off in the middle.

How can I make it that the image automatically rescales when accessing the page on a mobile device, so that its width matches the width of the screen.

I have tried adding the following CSS code, but somehow, it doesnt seem to reference to the header image:

header-showcase {
height: auto;
max-width: 100%;
}

Here is the link to the site I am working on: http://www.mathiasprobst.com

Thank you very much in advance.

0

Try using these codes:

.header-showcase img {
height: auto;
max-width: 100%;
}
  • I added this code; unfortunately the problem persists. When opening on a mobile device, the header image is still too large and gets cut off in the middle. – Mathias Probst Jan 6 at 15:03

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.