How can i align "header" and "footer" to "main_content" ?

[Viper013]

Hello everyone,

I am currently working on adapting my old theme to the new SMF version 2.1.4. (SMF Default Theme - Curve2)

It works so far, but I'm stuck on one problem.
By default the "header" and "footer" are full-width.

How can I bring the "header" and the "footer" into alignment with the "main-content" ?

I would be very grateful for a little help.

Thanks
Steffen

[Viper013]

... does nobody really have any ideas ?

[Mr.Truckman]

Hello everyone,

I am currently working on adapting my old theme to the new SMF version 2.1.4. (SMF Default Theme - Curve2)

It works so far, but I'm stuck on one problem.
By default the "header" and "footer" are full-width.

How can I bring the "header" and the "footer" into alignment with the "main-content" ?

I would be very grateful for a little help.

Thanks
Steffen

File Edits / index.css

find:

Code Select Expand

/* The top bar. */
#top_section {
  padding: 0 5%;
  border-bottom: 1px solid #bbb;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16);
  background: #fff;
  clear: both;
}
replace:

Code Select Expand

/* The top bar. */
#top_section {
  width: 85%;
  margin: 0 auto;
  padding: 0 5%;
  border-bottom: 1px solid #bbb;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16);
  background: #fff;
  clear: both;
}

find:

Code Select Expand

/* The footer with copyright links etc. */
#footer {
   padding: 10px 5%;
   background: #3e5a78;
   border-top: 3px solid #b2b6bd;
   flex: none;

}
replace:

Code Select Expand

/* The footer with copyright links etc. */
#footer {
   width: 85%;
   margin: 0 auto;
   padding: 10px 5%;
   background: #3e5a78;
   border-top: 3px solid #b2b6bd;
   flex: none;

}

[Viper013]

Hi Mr. Truckman,

thank you very much for your help.

Works perfectly for the PC, ... but unfortunately it is no longer responsive on mobile devices.
There, the "header" and "footer" are now significantly smaller than the "main_content".

But many thanks for your efforts.

Greetings
Steffen

[TwitchisMental]

Can you provide a link to your site?

Have you tried using the inspect element tool to see what needs changed specifically?

[Viper013]

... here is the link to the site.

I tried the Firefox_Inspektor, ... but i am not able to handle the problem. 

Link:    https://2-test.modellbauforen2.1.sklein.eu/index.php

User: Test
PW: test1234


Its just a Test-Site before i am upgrading my Forum to SMF 2.1.4

Thank you 

[Julius_2000]

Hi Mr. Truckman,

thank you very much for your help.

Works perfectly for the PC, ... but unfortunately it is no longer responsive on mobile devices.
There, the "header" and "footer" are now significantly smaller than the "main_content".

But many thanks for your efforts.

Greetings
Steffen

The most likely reason is that in your responsive.css, there's no individual width specified for smaller devices, now that you changed it in index.css. As a result of this, the 85% width is applied to all screen sizes, making it even smaller on smaller screens (e.g. 85% of a 720px screen width).

Just add a width of 100% to a media query for a screen width of like 720px for example.

For instance in responsive.css:

Code Select Expand


@media (max-width: 720px) {
      #header, #footer {
           width: 100%;
      }
}


[Viper013]

Hi Julius,

the hint to the responsive.css was the key and now it works.

Thank you very much.


Greetings
Steffen

[Julius_2000]

Aber gerne!