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.
Try using these codes:
.header-showcase img {
height: auto;
max-width: 100%;
}