Loading...
 
Features / Usability

Features / Usability


Why doesn't the "Bottom" module extend all the way across the page?

posts: 11 United States

I want to center a MenuPage module that I am using to display the footer for my site. It seems that the module is centered relative to the "Bottom" module area when I put it in there, but the problem is that the Bottom doesn't extend across my screen (see attached photo). which results in the MenuPage module being off-center relative to the rest of the page. Why is this and is there a a way I can fix or workaround this?

In case it's relevant, I am using a 4K (3840x2160) monitor, but I believed this happened on my 1080p monitor as well. Thank you ahead of time.

posts: 4656 Japan

Hi,
I don't see the photo so will just respond about the typical situation. The page footer has a "container" div just as the page's header and middle sections do, to contain content, so if the "Fixed Width" option is on, then all the container divs are restricted to a width of 1170 pixels to prevent lines of text, for example, from going the full width of wide displays; this kind of limiting width is generally considered good for readability, etc.

Do you think this Fixed Width limit is what's causing the restriction in your site footer? If so, either the Fixed Width option can be turned off, although that causes the header and page middle to also go full width of the browser window, or you can add a custom CSS rule to only widen the container div in the page footer:

.main-footer .container { max-width: 100% !important; }

This should be input on tiki-admin.php?page=look under the in the Customization tab, in the Custom CSS textarea.

If I misunderstood your situation or if this fix doesn't get the results you want, please post again with the details.

-- Gary

posts: 11 United States
I have already set fixed width off in the "Look" section. I also tried the CSS but it didn't seem to make any difference when applied. In case it helps I am using the Tiki Wiki theme. Let me know if there are any other details that could be helpful.

posts: 8633 Israel

I think I understand the issue. ;-)

It is something I have to tweak every site since 19 I think (most WP template).
It should be possible to set body for device full width (so you can have header and bottom full width) and it should be possible to apply the fixed width to the middle row. (or set left and right margin for better responsive ?)

posts: 11 United States
I have the "fixed width" option in the "Look" section unchecked, and that allows everything but the "bottom" module area to expand to the size of the screen. Is this what you are talking about?
posts: 8633 Israel
Evan Thomas wrote:
I have the "fixed width" option in the "Look" section unchecked, and that allows everything but the "bottom" module area to expand to the size of the screen. Is this what you are talking about?


I’m talking about tiki main layout element (header, topbar, middle and footer) width in general.
It would be nice to be able to set their width independently.

I understand you want to have something like this (bottom) : https://www.bernardsfez.com
You have to add some css to allow footer to be 100% width as well as a container class for your module (I used bootstrap : w-100).

Happy end of the year holidays.


posts: 32 Germany

I jut updated a site from tiki 18.4 to 22.0. The result in the bottom module was the same. The bottom module doesn't across the whole width any more.

My solution:
Settings>Modules>Custom Modules
Name: footer_maschinfo
Data:

here begins the code in the Data box (no idea how to tell the editor to show it right; the CODE thing do not work as expected)
replace all # in front of the divs with <

Copy to clipboard
#div class="row"> #div class="col-sm-12 col-md-6 col-lg-6"> {wiki}{literal} ((Impressum|Impressum)) ((Impressum|Datenschutz)) {/literal}{/wiki} #/div> #div class="col-sm-12 col-md-6 col-lg-6"> {wiki}{literal} ((Infos für Authoren|Infos für Authoren)) [https://www.spreadshirt.de/shop/user/romoxi/|Spreadshirt] {/literal}{/wiki} #/div> #/div>

"here ends the code"

Use in your custom CSS the name of your module:
Look&Feel>Customation>Custom CSS
.box-footer_maschinfo{width: 100%;}

Thats it

Bob


Upcoming Events

1)  18 Apr 2024 14:00 GMT-0000
Tiki Roundtable Meeting
2)  16 May 2024 14:00 GMT-0000
Tiki Roundtable Meeting
3)  20 Jun 2024 14:00 GMT-0000
Tiki Roundtable Meeting
4)  18 Jul 2024 14:00 GMT-0000
Tiki Roundtable Meeting
5)  15 Aug 2024 14:00 GMT-0000
Tiki Roundtable Meeting
6)  19 Sep 2024 14:00 GMT-0000
Tiki Roundtable Meeting
7) 
Tiki birthday
8)  17 Oct 2024 14:00 GMT-0000
Tiki Roundtable Meeting
9)  21 Nov 2024 14:00 GMT-0000
Tiki Roundtable Meeting
10)  19 Dec 2024 14:00 GMT-0000
Tiki Roundtable Meeting