Not logged in. · Lost password · Register
Forum: General Help and Support › Templates and Layout RSS
Bootstrap3 page width
Changing the width of the main content container, regardless of sidebar settings.
Avatar
cgalo 2019-05-06, 15:39 #1
Member since Nov 2018 · 4 posts
Group memberships: Members
Show profile · Link to this post
Subject: Bootstrap3 page width
Hi,

I am wondering how I can change the width of the main container/page/content/panel. I really like the desktop width that is set when both sidebars are active, like in this wiki: smw.fulaus.com. I would like to have the width set like that without having to enable both sidebars

If the navbar content, breadcrumbs area width, and footer can also fall within the same horizontal range, that would be nice too. Whatever is easiest. Of course, this shouldn't affect the mobile site.
Avatar
Michaelsy 2019-05-06, 17:50 #2
Member since Jun 2015 · 969 posts · Location: Düsseldorf, Germany
Group memberships: Members
Show profile · Link to this post
This answer here does not quite match your goal but it might be a good starting point.

HTH - Michael Sy.
By Patreon.com a few eurons can be fed into the code phasers of
the DokuWiki engine. Besides, Andi's posts are worth reading.
Avatar
cgalo 2019-05-06, 21:14 #3
Member since Nov 2018 · 4 posts
Group memberships: Members
Show profile · Link to this post
Nice, I had stumbled upon that thread before.

I was wondering if there is a way of not losing the mobile capability. (Why would it lose its mobile capability?)

Is there a way of getting a more conventional fix? Like, what documentation should I read?
Avatar
Michaelsy 2019-05-06, 21:59 #4
Member since Jun 2015 · 969 posts · Location: Düsseldorf, Germany
Group memberships: Members
Show profile · Link to this post
Quote by cgalo:
(Why would it lose its mobile capability?)
Because the above linked CSS rules apply to all screen sizes.

Quote by cgalo:
if there is a way of not losing the mobile capability.
The CSS rules must be different by different screen widths.

Quote by cgalo:
Like, what documentation should I read?
https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

If you are developing a solution, please publish it here.

HTH - Michael Sy.
By Patreon.com a few eurons can be fed into the code phasers of
the DokuWiki engine. Besides, Andi's posts are worth reading.
This post was edited on 2019-05-06, 22:07 by Michaelsy.
Avatar
cgalo 2019-05-06, 22:56 #5
Member since Nov 2018 · 4 posts
Group memberships: Members
Show profile · Link to this post
The following works pretty well.

All the content in the site, including header and footer content, now fit in the specified width percentage.

The page content, takes up the width percentage specified, but as a percentage of the specified percentage. (e.g. 80% of 80%)

I also experimented and enabled a sidebar. No issues, in fact, the main page content is just pushed to either side comfortably.

Check it out at cg.fulaus.com!

@media (min-width: 768px) {
    .container {
        width:90%;
    }
}

@media (min-width: 992px) {
    .container {
        width:85%;
    }
}

@media (min-width: 1200px) {
    .container {
        width:80%;
    }
}

There are some caveats: The dokuwiki style tools layout doesn't move to the border of the content. TOC button also doesn't stick inside. Config settings table layout becomes a mess.
This post was edited 2 times, last on 2019-05-07, 00:44 by cgalo.
Edit reason: I just learnt that element order matters in css. Who would've thought
Close Smaller – Larger + Reply to this post:
Verification code: VeriCode Please enter the word from the image into the text field below. (Type the letters only, lower case is okay.)
Smileys: :-) ;-) :-D :-p :blush: :cool: :rolleyes: :huh: :-/ <_< :-( :'( :#: :scared: 8-( :nuts: :-O
Special characters:

Go to forum
Imprint
This board is powered by the Unclassified NewsBoard software, 20150713-dev, © 2003-2015 by Yves Goergen
Current time: 2020-02-17, 07:24:50 (UTC +01:00)

Global DokuWiki Links