NO BUG: GRID | Custom CSS Code | Bricks Settings | Page Settings in the Builder

[Matze202]

Browser: Firefox 135.0 (64-Bit)
OS: Linux Minst
URL: not online

I have put the following CSS configuration into the Bricks settings.

body{
  min-height: 95vh;
  min-width: 100vw;
  display: grid;
  grid-template-columns: 300px auto;
  grid-template-rows: auto 100px;
  grid-template-areas: 
    "header main"
    "header footer";
  column-gap: 10px;
  row-gap: 15px;
}
body>header{
  grid-area: header;
}
body>main{
  grid-area: main;
}
body>footer{
  grid-area: footer;
}

Unfortunately, these are not resolved correctly by the Bricks Builder, so that the Bricks Builder does not arrange the relevant content properly internally.

Even if I put them in the page settings instead of the Bricks settings in the builder, they are not resolved correctly for the page view.

I also noticed that the CSS entries in the page settings can only be viewed and adjusted in the respective template in which they were entered. But I actually thought that this was a configuration for the entire website and not for the template in question.

[sinanisler]

firstly you never want to make your body tag as grid never ever ever

secondly use the existing sections, containers and grid feature with them ?
why need css at all bricks builder has grid and works fine O_O

@Matze202

onfiguration for the entire website and not for the template in question.

there is multiple ways to do this please learn the templates and conditions with them.

there is bricks settings for custom codes as well to load css js everywhere learn that as well.

[Matze202]

Hi @sinanisler ,

as you can see from my CSS code, I don’t need the grid structure within a template (sections or containers, etc.), but I need it to position the header, content and footer areas above it.

Unfortunately, I can’t do anything with the internal grid settings in this required work level, otherwise I would have liked to use them for this.

[timmse]

Hi Matze,
If you want to go this way, use .brx-body or body.brx-body instead of body; otherwise, your body styles will be overwritten by the .brx-body default styles.

The .brx-body defaults:

Best regards,
timmse

[Matze202]

Hi @timmse ,

Thank you, I have now adjusted the code in the Bricks settings.

body.brx-body{
  min-height: 95vh;
  min-width: 100vw;
  display: grid;
  grid-template-columns: 300px auto;
  grid-template-rows: auto 100px;
  grid-template-areas: 
    "header main"
    "header footer";
  column-gap: 10px;
  row-gap: 15px;
}
body.brx-body>#brx-header{
  grid-area: header;
}
body.brx-body>#brx-content{
  grid-area: main;
}
body.brx-body>#brx-footer{
  grid-area: footer;
}

Now at least everything is no longer slapped on top of each other at the edge in the builder.

Unfortunately, the content is not positioned as desired in the builder, but is just listed in a row one above the other.

I have replaced the tags for header, main or article and footer with the IDs.

Do you have any other tips as to why I can’t get the view in the builder to look the same as in the frontend?

[timmse]

Because the markup in the builder is slightly different:

body.brx-body,
.brx-body.iframe.mounted {
  min-height: 95vh;
  min-width: 100vw;
  display: grid;
  grid-template-columns: 300px auto;
  grid-template-rows: auto 100px;
  grid-template-areas: 
    "header main"
    "header footer";
  column-gap: 10px;
  row-gap: 15px;
}
body.brx-body>#brx-header,
.brx-body.iframe.mounted > #brx-header {
  grid-area: header;
}
body.brx-body>#brx-content,
.brx-body.iframe.mounted > #brx-content {
  grid-area: main;
}
body.brx-body>#brx-footer,
.brx-body.iframe.mounted > #brx-footer{
  grid-area: footer;
}

[Matze202]

Great @timmse , thank you very much, now I just have to fix the caching problem so that I don’t have to wait for hours after each adjustment until I can see the result in the frontend.

[timmse]

Simple rule: no caching or other optimization plugins during development because they usually cause more headaches than advantages.

[Matze202]

Yes, I completely agree with you, but if you take a look at the screenshot in the other post, you will see that there is no caching plugin installed.

But it is a staging page of a previous one that I am currently revising, where I have uninstalled everything that is unnecessary for the implementation (such as caching and cookie plugins).

There are still some leftovers in there and the service worker from a PWA plugin that is also no longer installed was causing these problems.