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:
Thank you very much in advance.
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
Thank you very much in advance.
Share Improve this question edited Jan 12, 2019 at 16:59 Mathias Probst asked Jan 6, 2019 at 1:36 Mathias ProbstMathias Probst 11 bronze badge1 Answer
Reset to default 0Try using these codes:
.header-showcase img {
height: auto;
max-width: 100%;
}