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:
parent
c4f6187263
commit
35d1e568fa
3 changed files with 4 additions and 40 deletions
|
@ -18,7 +18,7 @@
|
|||
{% block on-page-css %}
|
||||
<style>
|
||||
|
||||
.case-header {
|
||||
.case-image {
|
||||
background: url("{% static 'img/vizio-image.webp' %}") right center no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
|
|
@ -1611,21 +1611,7 @@ Court Case Page Styles (MT/2025)
|
|||
================================================================================================ */
|
||||
|
||||
.case-header {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.case-header::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0; top: 0; bottom: 0; width: 50%;
|
||||
background: var(--washed-green);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.case-header > * {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.case-bar {
|
||||
|
@ -1637,18 +1623,10 @@ Court Case Page Styles (MT/2025)
|
|||
}
|
||||
|
||||
.case-info {
|
||||
width: 100%;
|
||||
max-width: var(--max-site-width);
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.case-info > * {
|
||||
padding: 100px 0;
|
||||
margin-right: 150px;
|
||||
}
|
||||
|
||||
.case-info h1 {
|
||||
margin: 0 0 10px;
|
||||
padding: 0;
|
||||
|
@ -1671,25 +1649,10 @@ Court Case Page Styles (MT/2025)
|
|||
}
|
||||
|
||||
@media screen and (max-width: 66.999em) {
|
||||
|
||||
.case-header {
|
||||
background: var(--washed-green) !important;
|
||||
}
|
||||
|
||||
.case-header::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.case-info {
|
||||
grid-template-columns: 1fr;
|
||||
text-align: center;
|
||||
padding: 50px 20px 0;
|
||||
}
|
||||
|
||||
.case-info > * {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.case-content {
|
||||
|
|
|
@ -12,11 +12,12 @@
|
|||
{% block outercontent %}
|
||||
|
||||
<section class="case-header">
|
||||
<div class="case-info">
|
||||
<div>
|
||||
<div class="case-info flex">
|
||||
<div class="case-info w-50-l" style="padding: 100px">
|
||||
<h4>Court Case</h4>
|
||||
{% block case-info %}{% endblock %}
|
||||
</div>
|
||||
<div class="case-image w-50-ns dn db-l"></div>
|
||||
</div>
|
||||
<div class="case-bar"></div>
|
||||
</section>
|
||||
|
|
Loading…
Add table
Reference in a new issue