SOLVED: Problem with code block widget in custom CSS grid (use custom css)

[davidovmihail]

Bricks Version: 1.4.0 Beta

I try to create a layout with CSS grid (using custom CSS code) if I add brick widgets then everything is ok, but if I add the code block widget in a container then everything breaks

my back end

my front end

this is a problem with the code block widget ( i delete this element) and you can see my layout is ok)

[timmse]

Hi @davidovmihail,
it would be really helpful if I could inspect the code here: https://web-testsite.ru/

Best regards,
timmse

[davidovmihail]

----------css for grid-----------

.grid-container {
grid-template-columns: repeat(4,minmax(20%,1fr));
display: grid;
grid-gap: 1em;
align-items: stretch;
flex-wrap: wrap;
}

.item1 {grid-column: span 1;}
.item2 {grid-column: span 2;}
.item3 {grid-column: span 3;}
.item4 {grid-column: span 4;}

---------button style for button in code block-----

button {
font-size: 16px;
line-height: 24px;
font-weight: 600;
letter-spacing: 0px;
padding: 1em 2em;
border: none;
border-radius: 16px;
cursor: pointer;
background-position: center;
}

button:hover {
background: #FFB900 radial-gradient(circle, transparent 1%, #FFB900 1%) center/15000%;
color: #141414;
transition: background 0.6s;
}

button:active {
background-color: #FF880D;
background-size: 100%;
transition: background 0s;
}
-----color style for button-----

.btn-prim{
color: #fff;
background-color: #5B16D7;
}

.btn-sec{
color: #5B16D7;
background-color: #F2ECFD;
}

@media (max-width: 640px) {

.grid-container {
display: flex;
flex-direction: column;
}

}

[davidovmihail]

i set home page (sample page)

code in code block widget

This is the content for Layout H2 Tag

This is the content for Layout P Tag

My button

[timmse]

Unfortunately, there is no code block in your markup now…
Or you have hidden it so well that even searching for “code” doesn’t give a hit

[davidovmihail]

I tried to shoot a screencast, and now all works ok with the same code…

[timmse]

Maybe it helped that you closed the button tag
This is a screenshot from your initial request:

I’ll mark this as solved.

Best regards,
timmse