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