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
... does nobody really have any ideas ?
Quote from: Viper013 on November 14, 2023, 06:52:45 AMHello 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:
/* 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:
/* 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:
/* The footer with copyright links etc. */
#footer {
padding: 10px 5%;
background: #3e5a78;
border-top: 3px solid #b2b6bd;
flex: none;
}replace:
/* The footer with copyright links etc. */
#footer {
width: 85%;
margin: 0 auto;
padding: 10px 5%;
background: #3e5a78;
border-top: 3px solid #b2b6bd;
flex: none;
}
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
Can you provide a link to your site?
Have you tried using the inspect element tool to see what needs changed specifically?
... 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 (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 :)
Quote from: Viper013 on November 17, 2023, 09:43:47 AMHi 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:
@media (max-width: 720px) {
#header, #footer {
width: 100%;
}
}
Hi Julius,
the hint to the responsive.css was the key and now it works.
Thank you very much.
Greetings
Steffen
Aber gerne!