I just updated the CSS code, using this:
` .slider-hero {
position: relative;
}
.background-slider {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
}
.inside-page-hero {
display: -ms-grid;
display: grid;
grid-template-areas: “left right”;
-ms-grid-columns: 50% 50%;
grid-template-columns: 50% 50%;
}
.page-hero-content {
-ms-grid-row: 1;
-ms-grid-column: 2;
grid-area: right;
}
@media (max-width: 768px) {
.inside-page-hero {
display: block;
}
}
@media (min-width: 768px) {
.hero-title {
position: absolute;
top: 50%;
right: 10%;
transform: translate3d(0%,-50%,0);
}
}
and setting these elements: https://prnt.sc/q4ja5f
Almost perfect, the mobile display “custom search & h1” as I want.
Now all that remains is to adjust the desktop display, can the team there help?