Widen Discussion List?

User31

Hello friends, I would like to acquire the necessary CSS code magicka with which to stretch the main page discussion list across the full width of the page while also leaving a 15px gap at the edges.

So far, without success, I've tested a few variations of this code:

.DiscussionPage-list { 
  color: white !important;
  background: rgba(0, 0, 0, 0.9) !important;
  margin-left: 15px !important;
  margin-right: 15px !important;
}

(☝️🫠I added the margins left/right, but nothing happened.)

Surely there are some powerful code mages amongst the Flarum community who may know of such a CSS code spell to achieve this end...?

PS, here's a visual example:

treyb

User31 Adding the below should fix it on your view.

.container {
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
    width: 100% !important;
}

Capybara

User31 Can you share your website? I'm interested in some of the topics from your screenshot. Recently started to customize css styles on my forum

User31

treyb

🫠By the gotts!!
That is a beautiful sight!!
You are a powerful code mage indeed!!
Thank you kindly good sir/& or ma'am!!

Pity about the discussion posts though...

clarkwinkelmann

You mean only for the "tablet" (medium) view in your screenshot or also the "desktop" / full-page view? Do you want the side navigation permanently placed above the discussion list on the tags page? I don't have the code, but you can see in the Tags extensions how the side navigation is permanently moved, then the code for the list itself should be relatively simple.

User31

clarkwinkelmann
🤔Yeah, ahh, I guess it'd probably be a lot better if it was the same across all screen sizes.

And regarding the side navigation.
I'm sort of loosely thinking you're possibly referring to that slider panel thing...maybe? I'm not sure.
I removed the slider thing earlier today with this code:

/*DISC-PAGE-SIDE-NAV BEGIN*/
@media (min-width: 768px) {
  .DiscussionPage-nav {
  display: none !important;
}
.DiscussionPage-stream {
  margin-left: 15px !important;
  margin-right: 15px !important;
  }
}
/*DISC-PAGE-SIDE-NAV END*/

treyb

User31 Did you remove the side nav from your site? The CSS is set as a grid and is saving that space for navigation.

User31

Capybara

Certainly Capy,
Λsylum
🙂👍

JHe

Your website homepage is very unique!

User31

JHe

😄Thank you, I appreciate the kind euphemism.

The whole thing is a work in progress/concept project/learning experience. It's currently still far from what I intend to achieve—(much of which will more than likely require coding expertise magnitudes beyond my (laughable) level of comprehension.)

Ultimately though, I am going for "unique"....😁to the extreme.

User31

treyb

At the moment I'm under the impression that the side nav has been removed -(with the CSS code shown above in post #6 to Mr clarkwinkelmann.)
I'm guessing I am probably mistaken though aren't I?

🤔Thinking I'll go try playing with that code, maybe adding something like:

.DiscussionPage-grid {
  display: none !important;
}

EDIT: note, the code above doesn't work.