How to centralize an element inside a wrapper without margin, without flex and without grid?

HTML & CSS
1

In Drupal framework with the complex and extremely complicated design theme Olivero I have an element, the website’s sidebar wrapper, which contains two sidebar regions.

Often in mobile displays (under 1000px), this wrapper will just stick/juxtapose to the right of its parent element due to some grid behavior which I don’t intent to try to backward-engineer, but just hack if I can.

This didn’t centralize it this wrapper

margin: 0 auto 0 !important;

Giving to its parent element this didn’t centralize it:

display:flex !important;
justify-content: center !important;

Giving to its parent element this didn’t centralize it:

display: grid !important;
justify-content: center !important;

Is there a more “brutal” command to force the element to appear centralized in mobile displays (under 1000px) no matter what flex or grid directives it got?
Something with position and position offsets perhaps?

1 Like
2

Rather than taking just about every tool off the table, why not investigate what is going on with the parent that might be preventing the element from being centered? I suspect that there is something going on there that might be a simple fix. Is there room in the parent? Is the parent having some pretty specific and harsh CSS rules being applied to it?

1 Like
3

Like @Martyr2 says, rather than brute force it, figure out which style is being applied to the element, and see if you can mitigate it from there.

Right click on the abhorrent element, and inspect the element to bring up the developers tools. You can either scroll through the styles tab there and see how each style is applied, or use the compute tab which shows ALL of the applied styles in one space. You can use the arrows to drop down and see which line of which css file is being applied.

screen shots of inspect element

image

image
image348×616 16.4 KB

4

I am quite lost with this.

Both main parent elements of this wrapper are <div id="#main"> AND div class="sidebar-grid grid-full".
When I inspect both, I mostly find grid and flex directives which I just wont to battle in this complicated design theme Olivero.
Please, in your free time, check the problem in-vitro in this page and suggest a good approach to centralize the wrapper of the two sidebars.

5

Examples:

Untitled
Untitled923×435 20.8 KB

2
2900×479 14.2 KB

6

It’s doing exactly what you told it to (even if it’s not what you want)

.sidebar-grid > .site-main > .region--content-above, .sidebar-grid > .site-main > .region--content {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    grid-column: 1 / 9;
}

Your grid is split into 11 columns. In this selector, you’re telling it to start in column 1, which is the far right column since its a RTL site, then it ends in column 9. This leaves two columns of space on the left.

You could try grid-column 2/10 but I’m not even sure you need grid for .region-content. Seems like overkill since you’re essentially working as one column.

1 Like
7

It’s all Drupal, I never wrote grid code :slight_smile:
Is there any hack which is not grid particularly for that sidebar?

8

On that page when the hamburger shows you could do this.

@media screen and (max-width:999px){
  .grid-full{display:block!important;}
}

Its just one column so no need for the grid at all on that page (haven’t checked other pages).

2 Likes
9

Currently:

.grid-full {
    display: grid !important;
    grid-template-columns: auto !important;
    grid-column-gap: unset !important;
}

As this effects all pages, I tried to be selective with the following code, but it didn’t help:

.grid-full .two_new_sidebars_based_on_original_one {
    display: block !important;
}
10

That targets the wrong element… The class name would have needed to be on the parent element or indeed higher up the tree and the style order reversed.

Assuming you leave that new class in place you could use the :has selector instead and do this:

@media screen and (max-width: 999px) {
  .grid-full:has(.two_new_sidebars_based_on_original_one) {
    display: block !important;
  }
}

It’s.grid-full that needs the css not the children as its .grid-full that defines the grid and the children sit in the grid.

The :has selector has about 90% support but if you don;t want to use it you would need to move your class upwards on to .grid-full like this.

<div class="sidebar-grid grid-full two_new_sidebars_based_on_original_one">
    <main role="main" class="site-main"> 
        <div class="region region--content-above grid-full layout--pass--content-medium">
    etc.....

Then the css would be this:


@media screen and (max-width: 999px) {
  .grid-full.two_new_sidebars_based_on_original_one {
    display: block !important;
  }
}
11

If I don’t want to change the Drupal markup more than I already did (wrapping the two sidebars in <div class="two_new_sidebars_based_on_original_one">) is there any hack left in that situation?

It can also be a JavaScript illusion of some sort (I don’t know almost anything about graphical tweaks with JavaScript).

12

Yes I already gave you a solution for that using the :has selector:)

@media screen and (max-width: 999px) {
  .grid-full:has(.two_new_sidebars_based_on_original_one) {
    display: block !important;
  }
}
1 Like
13

That’s seemingly fantastic for me (the web browser support issue is minor for me in that case).

So please let me get straight what this actually does.

Pseudocode:

SELECT ANY ELEMENT WITH THE CLASS grid-full
IF IT **HAS** AT LEAST ONE CHILD ELEMENT WITH THE CLASS two_new_sidebars_based_on_original_one
THEN GIVE ANY SUCH CHILD ELEMENT THE FOLLOWING **EXCEPTIONAL** CSS DIRECTIVES

Is that a good way to put it?

:slight_smile:

1 Like
14

The rule is applied to the element called .grid-full only if it has a descendant called .two_new_sidebars_based_on_original_one.

If no such named descendant exists then the rule is not applied.

2 Likes