Mobile header

JordielcoJansen · August 2019

Hi

On mobile the header image is cropped at the bottom.

So I won't see the whole image...

You see what I mean here: https://feestbeestje.nl/wp-content/uploads/2019/08/Schermafbeelding-2019-08-11-om-12.48.05.png

I want to display the bottom of the header.

(it is ok not to see the whole width but I don't want the crop in height)

I tried this CSS but it does not work yet...

@media only screen and (max-width: 600px) {
header {
position: relative;
bottom: 0px;
}
}

Hope you can help

Thanks

Pablo · August 2019

Hi,
Please always attach a link so we can check it out. If the page is offline(localhost) then our help will be limited, you will have to contact us when the page is online. Also please make sure that the page is not under maintenance before you provide us the link

thanks

JordielcoJansen · August 2019

The site is:

https://feestbeestje.nl/

The problem you see here:

The monkey in the tree is half: https://feestbeestje.nl/wp-content/uploads/2019/08/Schermafbeelding-2019-08-11-om-12.48.05.png

JordielcoJansen · August 2019

it is on every page for example: https://feestbeestje.nl/cv/

Pablo · August 2019

Hello,

Change the size of the "Subheader" image in Theme Options > Header & Subheader > Header to "Cover"

Thanks

JordielcoJansen · August 2019

Thank you! Solved

JordielcoJansen · August 2019

One more question about this.

Is it possible in the betheme to choose an entirely different header only for mobile?

Thanks!

Pablo · August 2019

Unfortunately not.

You would have to create a "@media queires" to achieve that.

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

This documentation above should explain you everything.

Thanks

JordielcoJansen · August 2019

OK, thanks for this link!

JordielcoJansen · August 2019

I was trying some css but it does nor work yet:

@media only screen and (max-width: 600px) {

Header_wrapper {
background-image: url("https://feestbeestje.nl/wp-content/uploads/2019/08/achtergrond-mobiel.png");

background-position: top;
}
}

Pablo · August 2019

You're missing the "#" before the "Header_wrapper" name.

Also, this image is added to the #Subheader, not #Header"_wrapper.

Oh, you should use the !important rule too.

https://www.geeksforgeeks.org/how-to-apply-important-in-css/

Thanks

Mobile header

Comments