06 — OUR SPONSORS CODE
VERIFIED CURRENT MASTER ✓WHAT THIS CONTROLS
Live location: Our Sponsors Page → Unyson RAW Code
Captured: 22 September 2026
Master size: 419 lines / 9,447 bytes
Purpose: Sponsor introduction, responsive sponsor-logo grid, clickable sponsor links, logo sizing/balancing and the centred Christopher Crawford Artist / Designer sponsor tile.
DEPENDENCIES / DO NOT CHANGE BLINDLY
Media dependency: sponsor logos are loaded from WordPress uploads. Changing filenames, deleting Media Library assets or altering their URLs can break the grid even when this RAW Code is unchanged.
External links: each sponsor tile contains its own destination URL. Preserve verified sponsor destinations when changing artwork or layout.
Responsive behaviour: the grid changes from four columns to three, then two, then one at smaller breakpoints. The final Crawford tile has special centring rules.
Navigation: OUR SPONSORS also appears in the site-wide navigation controlled separately by HEADER-NAV V01.
Rollback rule: never overwrite this verified master. Future alterations become SPONSORS-RAW V02, V03, etc.
VIEW / COPY COMPLETE VERIFIED MASTER CODE
<style>
/* =========================
SPONSORS PAGE
========================= */
#shs-sponsors {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 10px 30px 50px 30px;
box-sizing: border-box;
}
/* INTRODUCTION */
#shs-sponsors .sponsors-intro {
max-width: 850px;
margin: 0 auto 45px auto;
text-align: center;
}
#shs-sponsors .sponsors-intro h1 {
margin: 0 0 18px 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 34px;
line-height: 1.2;
font-weight: 700;
color: #333333;
text-transform: uppercase;
}
#shs-sponsors .sponsors-intro p {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 17px;
line-height: 1.6;
color: #555555;
}
/* =========================
LOGO GRID
========================= */
#shs-sponsors .sponsor-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
align-items: stretch;
}
/* CLICKABLE LOGO BOX */
#shs-sponsors .sponsor-logo {
min-height: 170px;
}
#shs-sponsors .sponsor-logo a {
width: 100%;
height: 100%;
min-height: 170px;
padding: 25px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
background: #ffffff;
border: 1px solid #eeeeee;
text-decoration: none;
transition:
transform 0.25s ease,
box-shadow 0.25s ease,
border-color 0.25s ease;
}
/* HOVER EFFECT */
#shs-sponsors .sponsor-logo a:hover {
transform: translateY(-4px);
box-shadow: 0 8px 20px rgba(0,0,0,0.10);
border-color: #dddddd;
}
/* LOGOS */
#shs-sponsors .sponsor-logo img {
display: block;
width: auto;
height: auto;
max-width: 100%;
max-height: 110px;
object-fit: contain;
}
/* BALANCE SMALLER LOGOS */
#shs-sponsors .logo-nationwide img {
max-width: 90%;
}
#shs-sponsors .logo-cuckfield img {
max-height: 125px;
}
#shs-sponsors .logo-quadrophenia img {
max-width: 95%;
}
/* CENTRE FINAL CRAWFORD LOGO */
#shs-sponsors .logo-crawford {
grid-column: 2 / span 2;
}
#shs-sponsors .logo-crawford a {
width: calc(50% - 15px);
margin: 0 auto;
}
/* =========================
TABLET
========================= */
@media only screen and (max-width: 1000px) {
#shs-sponsors .sponsor-grid {
grid-template-columns: repeat(3, 1fr);
}
#shs-sponsors .logo-crawford {
grid-column: 2;
}
#shs-sponsors .logo-crawford a {
width: 100%;
}
}
/* =========================
MOBILE
========================= */
@media only screen and (max-width: 700px) {
#shs-sponsors {
padding-left: 15px;
padding-right: 15px;
}
#shs-sponsors .sponsors-intro {
margin-bottom: 30px;
}
#shs-sponsors .sponsors-intro h1 {
font-size: 26px;
}
#shs-sponsors .sponsors-intro p {
font-size: 15px;
line-height: 1.5;
}
#shs-sponsors .sponsor-grid {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
#shs-sponsors .sponsor-logo,
#shs-sponsors .sponsor-logo a {
min-height: 125px;
}
#shs-sponsors .sponsor-logo a {
padding: 15px;
}
#shs-sponsors .sponsor-logo img {
max-height: 85px;
}
#shs-sponsors .logo-crawford {
grid-column: 1 / span 2;
}
#shs-sponsors .logo-crawford a {
width: calc(50% - 6px);
}
}
/* VERY SMALL PHONES */
@media only screen and (max-width: 380px) {
#shs-sponsors .sponsor-grid {
grid-template-columns: 1fr;
}
#shs-sponsors .logo-crawford {
grid-column: 1;
}
#shs-sponsors .logo-crawford a {
width: 100%;
}
}
</style>
<div id="shs-sponsors">
<div class="sponsors-intro">
<h1>OUR SPONSORS</h1>
<p>
We are incredibly grateful to the businesses, organisations and individuals
who support Sussex Homeless Support. Their generosity helps us continue
providing essential support to vulnerable people across Brighton & Hove.
</p>
</div>
<div class="sponsor-grid">
<!-- ONE STOP -->
<div class="sponsor-logo">
<a href="https://www.onestop.co.uk/"
target="_blank" rel="noopener"
aria-label="Visit One Stop website">
<img src="https://www.sussexhomelesssupport.co.uk/wp-content/uploads/2026/09/one-stop.png"
alt="One Stop">
</a>
</div>
<!-- NATIONWIDE -->
<div class="sponsor-logo logo-nationwide">
<a href="https://www.nationwide.co.uk/"
target="_blank" rel="noopener"
aria-label="Visit Nationwide website">
<img src="https://www.sussexhomelesssupport.co.uk/wp-content/uploads/2026/09/nationwide.png"
alt="Nationwide">
</a>
</div>
<!-- WAITROSE -->
<div class="sponsor-logo">
<a href="https://www.waitrose.com/"
target="_blank" rel="noopener"
aria-label="Visit Waitrose and Partners website">
<img src="https://www.sussexhomelesssupport.co.uk/wp-content/uploads/2026/09/waitrose-partners.png"
alt="Waitrose & Partners">
</a>
</div>
<!-- AMERICAN EXPRESS -->
<div class="sponsor-logo">
<a href="https://www.americanexpress.com/en-gb/"
target="_blank" rel="noopener"
aria-label="Visit American Express website">
<img src="https://www.sussexhomelesssupport.co.uk/wp-content/uploads/2026/09/amex.png"
alt="American Express">
</a>
</div>
<!-- CUCKFIELD GOLF CENTRE -->
<div class="sponsor-logo logo-cuckfield">
<a href="https://cuckfieldgolf.co.uk/"
target="_blank" rel="noopener"
aria-label="Visit Cuckfield Golf Centre website">
<img src="https://www.sussexhomelesssupport.co.uk/wp-content/uploads/2026/09/cuckfield-golf-centre.jpg"
alt="Cuckfield Golf Centre">
</a>
</div>
<!-- GEORGE PAYNE -->
<div class="sponsor-logo">
<a href="https://www.thegeorgepayne.co.uk/"
target="_blank" rel="noopener"
aria-label="Visit The George Payne website">
<img src="https://www.sussexhomelesssupport.co.uk/wp-content/uploads/2026/09/george-payne.png"
alt="The George Payne">
</a>
</div>
<!-- VOLKS -->
<div class="sponsor-logo">
<a href="https://www.volksclub.co.uk/"
target="_blank" rel="noopener"
aria-label="Visit Volks website">
<img src="https://www.sussexhomelesssupport.co.uk/wp-content/uploads/2026/09/volks.png"
alt="Volks">
</a>
</div>
<!-- LEVELLERS -->
<div class="sponsor-logo">
<a href="https://www.levellers.co.uk/"
target="_blank" rel="noopener"
aria-label="Visit Levellers website">
<img src="https://www.sussexhomelesssupport.co.uk/wp-content/uploads/2026/09/levellers.jpg"
alt="Levellers">
</a>
</div>
<!-- BRIGHTON & HOVE SOIREE ROTARY -->
<div class="sponsor-logo">
<a href="https://www.soireerotaryevents.com/"
target="_blank" rel="noopener"
aria-label="Visit Brighton and Hove Soiree Rotary website">
<img src="https://www.sussexhomelesssupport.co.uk/wp-content/uploads/2026/09/brighton-hove-soiree-rotary.png"
alt="Brighton & Hove Soiree Rotary">
</a>
</div>
<!-- BRIGHTON & HOVE CITY COUNCIL -->
<div class="sponsor-logo">
<a href="https://www.brighton-hove.gov.uk/"
target="_blank" rel="noopener"
aria-label="Visit Brighton and Hove City Council website">
<img src="https://www.sussexhomelesssupport.co.uk/wp-content/uploads/2026/09/brighton-hove-city-council.png"
alt="Brighton & Hove City Council">
</a>
</div>
<!-- QUADROPHENIA ALLEY -->
<div class="sponsor-logo logo-quadrophenia">
<a href="https://www.quadropheniaalley.co.uk/"
target="_blank" rel="noopener"
aria-label="Visit Quadrophenia Alley website">
<img src="https://www.sussexhomelesssupport.co.uk/wp-content/uploads/2026/09/quadrophenia-alley.png"
alt="Quadrophenia Alley">
</a>
</div>
<!-- BRIGHTON ITALIAN FESTIVAL -->
<div class="sponsor-logo">
<a href="https://brightonitalianfestival.com/"
target="_blank" rel="noopener"
aria-label="Visit Brighton Italian Festival website">
<img src="https://www.sussexhomelesssupport.co.uk/wp-content/uploads/2026/09/btf.jpg"
alt="Brighton Italian Festival">
</a>
</div>
<!-- PEOPLE'S POSTCODE LOTTERY -->
<div class="sponsor-logo">
<a href="https://www.postcodelottery.co.uk/"
target="_blank" rel="noopener"
aria-label="Visit People's Postcode Lottery website">
<img src="https://www.sussexhomelesssupport.co.uk/wp-content/uploads/2026/09/post-code-lottery-scaled.png"
alt="People's Postcode Lottery">
</a>
</div>
<!-- NANDO'S -->
<div class="sponsor-logo">
<a href="https://www.nandos.co.uk/"
target="_blank" rel="noopener"
aria-label="Visit Nando's website">
<img src="https://www.sussexhomelesssupport.co.uk/wp-content/uploads/2026/09/nandos.png"
alt="Nando's">
</a>
</div>
<!-- DIPOL PRINT -->
<div class="sponsor-logo">
<a href="https://www.dipolprint.co.uk/"
target="_blank" rel="noopener"
aria-label="Visit Dipol Print website">
<img src="https://www.sussexhomelesssupport.co.uk/wp-content/uploads/2026/09/dipolprint.png"
alt="Dipol Print">
</a>
</div>
<!-- UNITE THE UNION -->
<div class="sponsor-logo">
<a href="https://www.unitetheunion.org/"
target="_blank" rel="noopener"
aria-label="Visit Unite the Union website">
<img src="https://www.sussexhomelesssupport.co.uk/wp-content/uploads/2026/09/unite-the-union.png"
alt="Unite the Union">
</a>
</div>
<!-- CRAWFORD ARTIST / DESIGNER -->
<div class="sponsor-logo logo-crawford">
<a href="https://www.christophercrawforddesign.com/"
target="_blank" rel="noopener"
aria-label="Visit Christopher Crawford Artist and Designer website">
<img src="https://www.sussexhomelesssupport.co.uk/wp-content/uploads/2026/09/crawford-artist-designer.png"
alt="Christopher Crawford Artist and Designer">
</a>
</div>
</div>
</div>