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;
}
Code: Select all
<div class="headerbar" role="banner">
<div class="inner">
<div style="height: 258px;">
.....
.....
.....
I think the page isn't paying attention any more because you dropped a <div> somewhere out of the template.
<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">
.<div id="page-body">
and <div id="page-footer">
are now outside <div id="wrap">
, so now they are unconstrained on width....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;"> ====> In my opinion, you do not need this CSS-Statement.
<div style="height: 258px;">
to just <div>
..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.@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."<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.Code: Select all
@media (max-width: 700px) {
.headerbar {
height: 0px;
background-size: cover;
padding-top: 23.26%;
}
}
Code: Select all
<! - EVENT overall_footer_content_after ->
</div> <!-- end page body -->
Code: Select all
</div> <!-- end wrap -->
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;
}
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.".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.<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.