Zoomed in header on mobile version

[Wayne Luke]

I am sorry, I haven't had time to sit down and hand code a solution for this. You would have to follow the article above and write the code you need to show properly scaled images at different resolutions.

[niels94]

Any help, please?

[niels94]

There is no way to "turn off" responsive.

Personally, I would use multiple images tailored to the different viewport sizes and load them with media queries. Then you can control height, whitespace and distortion.

Hmm okay, thank you for the info.

I have no idea how I should start on that. Can you help me? I have no experience with CSS.

I'd need the CSS for mobile phones and tablets. I hope you're able to help me with this.

[Wayne Luke]

There is no way to "turn off" responsive.

Personally, I would use multiple images tailored to the different viewport sizes and load them with media queries. Then you can control height, whitespace and distortion.

[niels94]

If you set Background Repeat to none, it will not repeat your header image. However you'll end up with some white space due the height of 366 pixels that you're applying in the CSS. It is really tricky because we don't currently apply responsive resizing via Javascript and it is a background so you don't have as much control..

Thanks for the info. I see that there's a white space now. I tried to remove the 366 space, because I don't mind it being a little smaller. But that makes my whole header suddenly very small. I have no idea how to fix this and if it's fixable.

Is there maybe a way to turn off the "mobile responsive" version? So that you're able to see the desktop version on mobile?

[Wayne Luke]

If you set Background Repeat to none, it will not repeat your header image. However you'll end up with some white space due the height of 366 pixels that you're applying in the CSS. It is really tricky because we don't currently apply responsive resizing via Javascript and it is a background so you don't have as much control..

[niels94]

Background color: Transparent
Background image: url(http://i59.tinypic.com/x5tw5i.png)
Background repeat: /
Units: /
Horizontal & Vertical Offset: 0

[Wayne Luke]

What do you have set for the header_background style variable?

[niels94]

You can try using CSS like this:

#header {background-size:contain}

Depending on your image this may work for you. You can also try:

#header {background-size:cover}

You can also explicitly set the size for different devices using media queries. Something like:

[USER="3396"]media[/USER] only screen and (max-width: 320px) {
#header {
background-size: 320px 30px;
height: 30px
}
}

If these don't work for you, then you might need multiple sizes of the image and use media queries to load the one that is most appropriate depending on screen size. You can read about this here:
http://www.smashingmagazine.com/2013...ground-images/

Hi Wayne! Thank you for all the information. The second and third code don't change anything for me.

However, the first one does seem to do something, but not correctly. It shows up on my mobile 4-5 times underneath eachother.

Here's my CSS I'm using now, maybe it helps:

#header .header-cell {
height: 366px;
}

body {


background: url(http://i59.tinypic.com/1z1fp1d.png) no-repeat center center fixed !important;


-webkit-background-size: cover !important;


-moz-background-size: cover !important;


-o-background-size: cover !important;


background-size: cover !important;


}

#footer-copyright { text-align: center; }

#header .toolbar > ul li {
bottom: -200px;
position: relative;
}

.forum-list-container .category-header { background: url(http://i59.tinypic.com/35bcu88.png); }

[Wayne Luke]

You can try using CSS like this:

#header {background-size:contain}

Depending on your image this may work for you. You can also try:

#header {background-size:cover}

You can also explicitly set the size for different devices using media queries. Something like:

        [USER="3396"]media[/USER] only screen and (max-width: 320px) {
            #header { 
                background-size: 320px 30px; 
                height: 30px
            }
        }

If these don't work for you, then you might need multiple sizes of the image and use media queries to load the one that is most appropriate depending on screen size. You can read about this here:

http://www.smashingmagazine.com/2013/07/22/simple-responsive-images-with-css-background-images/

[niels94]

Hi guys,


I'm using a customized header on my forum and when I'm check the forum on my mobile, everything is nice and responsive, except for the header. It only shows a zoomed in part of the header. I'm using vbulletin 5 cloud.

1. Is there any way to make the header responsive?

2. Is there any way to "enable" the desktop version for mobile?


Thanks in advance,

Niels