Mobile friendly version of the board can see background and logo is the wrong size

[Genebaby]

I've been busy upgrading the look of my forum and have almost achieved success. It started because the mobile version no longer showed the menu once I enabled all connections to be secure.

When mobile support came along I didn't do anything and it looked great, a smaller and easy to navigate version of the board.

I use Tapatalk so I don't use mobile but many of my members do I realise, so I went to check and it has the menu back, but is otherwise very different.

It used to look like this:

But now it looks like this:

The site logo is oversized and the background image is appearing underneath.

Earlier I set the background to not move and the forum scrolls inside it, just like it used to do.

Any thoughts on how to fix this? I didn't think the mobile version would ever look at the background.

My forum is at: https://vvforums.com

Thanks,

Vic

[Mick]

Why don’t you post your url properly? https is part of the url and should be included otherwise people are left guessing

[Genebaby]

I had it set with my host that all traffic goes to HTTPS, with or without www and if they go via to http, so it's all the same.

I see did make a mistake with my link, just noticed that, I'll fix it.

[Talk19Zehn]

Hello, on the fly ..., test this: background-image and something else ...

Code: Select all

html, body {
    color: #CCCCCC;
    background-color: #161616;
    background-image: url('./images/tlo.jpg');
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: top center;
}

Code: Select all

.wrap {
    padding: 15px;
    max-width: 1152px;
    margin: 0px auto;
    border-bottom: 2px solid #AE1373;
    background-color: #363636;
}

Code: Select all

.headerbar {
    margin-bottom: 7px;
    padding: 5px;
    overflow: hidden;
    border-radius: 7px;
    height: 258px;
}

html: overall_header

Code: Select all

<div class="headerbar" role="banner">
					<div class="inner">
            
			<div style="height: 258px;">
.....
.....
.....

===> <div style="height: 258px;"> ====> In my opinion, you do not need this CSS-Statement.

[Genebaby]

Thanks!!

I made those changes and it has cleaned up the mobile look, the background coming in looked really bad I noticed when checking unread posts and there weren't any, it was very strange.

I think I put that section in overall_header as a result of making the changes to my banner picture from my searches. I removed it and the banner is fine, though it seems the forum is a bit wider than before, and a bit lower down, I'll look into that.

The banner picture is still not right on mobile, but the main board is great now. Do you have an idea about making the banner resize on mobile, I did think it was automatic, but maybe not.

[Genebaby]

Ahh, crap. I was trying to adjust the width of the forum and found this info to adjust max-width in common.css.

I found it at 1125px so I just tried it at 1100px to start and the top banner separated from the rest of the forum and the rest of the forum got very wide!! I changed it back, no change. I changed it to 900 no change.

It's like it wasn't paying attention to that setting before and now it doesn't care what I put there. Help!!!!

[EA117]

Ahh, crap. I was trying to adjust the width of the forum and found this info to adjust max-width in common.css.

I think the page isn't paying attention any more because you dropped a <div> somewhere out of the template.

The <div id="wrap">, which is what's expected to control the width, is now only encapsulating <div id="page-header"> and <div id="phpbb-navbar" class="phpbb-navbar">.

The <div id="page-body"> and <div id="page-footer"> are now outside <div id="wrap">, so now they are unconstrained on width.

Perhaps look at earlier copies of the template and see where a <div> might have been dropped. Note that when Talk19Zehn said:

===> <div style="height: 258px;"> ====> In my opinion, you do not need this CSS-Statement.

...they meant only the CSS wasn't needed, not the entire <div>. Just in case that's the <div> which has now disappeared. The intended change was from <div style="height: 258px;"> to just <div>.


The site logo remains large in the mobile view because nothing has overridden the .headerbar { height: 258px; } which was asserted. So you're getting exactly that height in the mobile view too, and the background is set to proportionally fill the space.

In general, "you can't size the <div> to be however large the background image needs to be". But because the mobile view has effectively made this headerbar <div> empty by setting everything to display:none anyway, we do have one particular option available which doesn't take much to implement:

Since your current desired site logo is 1152x268, we can say the desired aspect ratio is 23.26%. If inside a @media (max-width: 700px) block we put .headerbar { height: 0px; background-size: cover; padding-top: 23.26%; }, now the <div> sizes on mobile to be "as large as necessary to show a correctly-scaled version of the background image."

The caveat is that now the <div class="headerbar" role="banner"> is "useless", in that you can't put anything inside of it (search bars, other text, etc.) because the <div> is now full of padding. But that's not a problem currently, because all the content in this <div> had been set to display:none on mobile anyway. Whenever you do want to add some content there in the future, you'll have to get a more creative solution.

So by throwing this into the bottom of your /styles/lucid_lime/theme/responsive.css:

Code: Select all

@media (max-width: 700px) {
  .headerbar {
      height: 0px;
      background-size: cover;
      padding-top: 23.26%;
  }
}

The mobile site ends up looking like:

[Talk19Zehn]

Hello, correct EA117 and thanks.

@ Genebaby, can you please check your overall_header.html and overall_footer.html.
The validator finds an unnecessary closing DIV tag and generates an error message: Stray end day. An unnecessary closing day can destroy the layout (the forum is therefore probably 100% wide).
https://validator.w3.org/nu/

However, Lucid Lime (phpBB-3.2.7) is correct = overall_footer.html, please look:

Closing Tags = overall_footer.html, please compare my comments.
Line 1 and 2

Code: Select all

<! - EVENT overall_footer_content_after ->
</div> <!-- end page body -->

Line 61

Code: Select all

</div> <!-- end wrap -->

.... so the error must be in your customizations or possibly in an extension.

Please validate and clean up the error first.

Best regards

[Genebaby]

@ EA117 - Fantastic! Yes!!! I totally removed that statement, removing the <div> but I guess I didn't somehow notice until after I made the other change trying to change the width. It's back to how it was now, which is not perfect but a LOT better.

The mobile version is looking perfect now, thanks for that code. I'm not totally sure what the caveats you were talking about mean, so I am guessing it won't be an issue. The site is pretty close to how I want it to be, like before.

Before I try some more code from searches, is it ok to ask the best way to bring the whole forum up a little on the desktop. It starts sort of down from the top of the screen for some reason.

I'd also like to make it just a little less wide, so it sits inisde the backround image, or should I just play around with the picture for that?

@ Talk19Zehn - Yes, I have just finished fixing the missing <div> and it fixed the issue. It was 100% wide, and I never realised it was separate to the header in that way.

[EA117]

Before I try some more code from searches, is it ok to ask the best way to bring the whole forum up a little on the desktop. It starts sort of down from the top of the screen for some reason.

You can "move it up" by changing the padding: 20px 0 to just padding: 0 in CSS for body from /styles/lucid_lime/theme/common.css, such that this block would now look like:

Code: Select all

body {
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 10px;
	line-height: normal;
	margin: 0;
	padding: 0;
	word-wrap: break-word;
	-webkit-print-color-adjust: exact;
}

There is no other choice currently, since the solid background being revealed is hard-coded into the https://vvforums.com/styles/lucid_lime/ ... es/tlo.jpg background image. If you could Photoshop yourself 20px worth of blue curtains across the top of that background image, then you would have a choice to leave the 20px padding in and have the forum start "down" where it's currently at.

As you continue to see the effects of these different CSS changes you're making, be sure and also play with the F12 ("Developer") view of your web browser. The things you can see in there will begin to make more and more sense as you keep exploring. Eventually enough so to let you answer questions like "where is this space coming from on my site?"

[Genebaby]

Thanks, that padding setting did work, and it seems fairly obvious, but things keep breaking. I see now that the padding is fairly normal as it is on this site, but my old style wasn't fully like Pro Silver, which is why I did like it as well, but it didn't get updated.

Is it possible to change the width of the forum and header together? Is that in Common.css?

[EA117]

Is it possible to change the width of the forum and header together? Is that in Common.css?

Yes, it's the <div id="wrap"> that was mentioned earlier, which is supposed to contain everything on the page. So the CSS that controls the width of class .wrap is the CSS that controls the maximum width of "everything."

For the desktop site, this is in /styles/lucid_lime/theme/colours.css and is currently set to .wrap { max-width: 1152px; }. For the mobile site, /styles/lucid_lime/theme/responsive.css adds a @media (max-width: 700px) .wrap { min-width: 290px; } to make sure the site doesn't get any smaller than needed for display.

You have fixed the missing <div> issue, and everything appears correctly contained in <div id="wrap"> as intended. So changing the "max-width: 1152px" value to something else should have the effect of changing your width. Don't forget to purge the phpBB board cache after making the change.

Whether your site will look like the width changed might not be as straight forward. The problem is "that big area of solid color" that is hard-coded into the background image https://vvforums.com/styles/lucid_lime/ ... es/tlo.jpg.

You can make the site narrower, but once you get down under "max-width: 1145px" or so, making the site narrower is just going to reveal this solid color area in the background image. So even though the HTML is actually rendering narrower, it will look like "I'm just getting this thick dark border around the site" as your narrow site reveals more and more of the background image.

[Genebaby]

Thank you, I'll try that when I get home. There was a lot of updating, transferring and cache clearing on the weekend!

I'll see what I can do to match it up.

[Genebaby]

Thanks for your help guys, I've pretty much got a handle on these issues. Might not be finished with the questions, I'll see how I go by myself for a couple of other touch ups.