Fix Vizio image alignment

Use of ::before was possibly a little complicated. I've added an explicit
element for the image and displayed using flexbox.
This commit is contained in:
Ben Sturmfels 2025-07-23 22:45:25 +10:00
parent c4f6187263
commit 35d1e568fa
Signed by: bsturmfels
GPG key ID: 023C05E2C9C068F0
3 changed files with 4 additions and 40 deletions

View file

@ -18,7 +18,7 @@
{% block on-page-css %} {% block on-page-css %}
<style> <style>
.case-header { .case-image {
background: url("{% static 'img/vizio-image.webp' %}") right center no-repeat; background: url("{% static 'img/vizio-image.webp' %}") right center no-repeat;
background-size: cover; background-size: cover;
} }

View file

@ -1611,21 +1611,7 @@ Court Case Page Styles (MT/2025)
================================================================================================ */ ================================================================================================ */
.case-header { .case-header {
position: relative;
overflow: hidden;
}
.case-header::before {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0; width: 50%;
background: var(--washed-green); background: var(--washed-green);
z-index: 0;
}
.case-header > * {
position: relative;
z-index: 1;
} }
.case-bar { .case-bar {
@ -1637,18 +1623,10 @@ Court Case Page Styles (MT/2025)
} }
.case-info { .case-info {
width: 100%;
max-width: var(--max-site-width); max-width: var(--max-site-width);
display: grid;
grid-template-columns: 1fr 1fr;
margin: 0 auto; margin: 0 auto;
} }
.case-info > * {
padding: 100px 0;
margin-right: 150px;
}
.case-info h1 { .case-info h1 {
margin: 0 0 10px; margin: 0 0 10px;
padding: 0; padding: 0;
@ -1671,25 +1649,10 @@ Court Case Page Styles (MT/2025)
} }
@media screen and (max-width: 66.999em) { @media screen and (max-width: 66.999em) {
.case-header {
background: var(--washed-green) !important;
}
.case-header::before {
display: none;
}
.case-info { .case-info {
grid-template-columns: 1fr;
text-align: center; text-align: center;
padding: 50px 20px 0; padding: 50px 20px 0;
} }
.case-info > * {
margin: 0;
}
} }
.case-content { .case-content {

View file

@ -12,11 +12,12 @@
{% block outercontent %} {% block outercontent %}
<section class="case-header"> <section class="case-header">
<div class="case-info"> <div class="case-info flex">
<div> <div class="case-info w-50-l" style="padding: 100px">
<h4>Court Case</h4> <h4>Court Case</h4>
{% block case-info %}{% endblock %} {% block case-info %}{% endblock %}
</div> </div>
<div class="case-image w-50-ns dn db-l"></div>
</div> </div>
<div class="case-bar"></div> <div class="case-bar"></div>
</section> </section>