Pasted text(171).txt
Document


Pasted text(172).txt
Document


Pasted text(173).txt
Document



Pasted text(174).txt
Document
















Pasted text(175).txt
Document


Pasted text(176).txt
Document


Pasted text(177).txt
Document


Pasted text(178).txt
Document


Pasted text(179).txt
Document

























Pasted text(20260805-181834).txt
Document


Pasted text(20260805-182011).txt
Document



Pasted text(20260805-183837).txt
Document





the two buttons on the home page ? or will we get to the,? 








1001161412.jpg
1001161414.jpg
























Pasted text(20260806-090407).txt
Document






Generated image: Modern Madibeng Business Profile Mockup


Edit















Pasted text(20260806-143052).txt
Document

i get a black footer after the delete: 






Pasted text(20260806-213623).txt
Document








Edit Post

TN Pixel Photography
· Business
Ctrl+K
Save as pending
Publish
Meta Boxes
Use up and down arrow keys to resize the meta box pane.
Move upMove downToggle panel: Business Contact Details
Business Address
Hartbeespoort, Madibeng
Phone
0604390861
WhatsApp
0604390861
Email
snekhumbe@gmail.com
Website
https://www.madibengconnect.co.za
Facebook URL
https://www.facebook.com/
Instagram URL
https://instagram.com/business
Open publish panel
Business


i zoomed out so you see 


Pasted text(20260811-224933).txt
Document


Pasted text(20260811-225220).txt
Document


Pasted text(20260811-225258).txt
Document


Pasted text(20260811-225407).txt
Document


Pasted text(20260811-225459).txt
Document



Pasted text(20260811-233644).txt
Document


Pasted text(20260811-235047).txt
Document



Pasted text(20260812-000309).txt
Document


Pasted markdown(1).md
File


Pasted text(20260812-004430).txt
Document


Pasted text(20260812-005439).txt
Document

Yesterday 6:43 AM
We will continue with the contact form later i passed out on you chat


Pasted text(20260812-091254).txt
Document


Pasted text(20260812-091348).txt
Document


Pasted text(20260812-091901).txt
Document


Pasted text(20260812-092000).txt
Document


Pasted text(20260812-092455).txt
Document


Pasted text(20260812-092539).txt
Document


Pasted text(20260812-092718).txt
Document


Pasted text(20260812-092752).txt
Document


Pasted text(20260812-092855).txt
Document


Pasted text(20260812-092952).txt
Document


Pasted text(20260812-093054).txt
Document


Pasted text(20260812-093131).txt
Document


Pasted text(20260812-093216).txt
Document


Pasted text(20260812-095444).txt
Document


Pasted text(20260812-105403).txt
Document


Pasted text(20260812-111037).txt
Document

where do i find events here : 


Pasted text(20260812-111856).txt
Document


Pasted text(20260812-112244).txt
Document


Pasted text(20260812-113206).txt
Document
Complete it: 


Pasted text(20260812-122331).txt
Document
give correct : 






Pasted text(20260812-125602).txt
Document
complete: 


Pasted text(20260812-131235).txt
Document


Pasted text(20260812-133335).txt
Document
give entire one : 


Pasted text(20260812-143849).txt
Document

this came out good 


Pasted text(20260812-155851).txt
Document



Pasted text(20260812-185453).txt
Document


Pasted text(20260812-185627).txt
Document


Pasted text(20260812-190429).txt
Document


Pasted text(20260812-191716).txt
Document


Pasted text(20260812-191814).txt
Document


Pasted text(20260812-192416).txt
Document


Pasted text(20260812-192622).txt
Document


Pasted text(20260812-193913).txt
Document


Pasted text(20260812-194048).txt
Document
always give complete 


Pasted text(20260812-195031).txt
Document


Pasted text(20260812-195405).txt
Document


Pasted text(20260812-202453).txt
Document


Pasted text(20260812-202747).txt
Document


Pasted text(20260812-204240).txt
Document


Pasted text(20260812-205914).txt
Document



Pasted text(20260812-210401).txt
Document




Pasted text(20260812-211715).txt
Document



Pasted text(20260812-214131).txt
Document







css








Pasted text(20260812-232749).txt
Document


Pasted text(20260812-233228).txt
Document


Pasted text(20260812-233838).txt
Document

Today 8:07 AM
34a0850c-dafa-41f5-ac13-b6acc38db7ec.png


Pasted text(20260813-061435).txt
Document


Pasted text(20260813-061808).txt
Document


Pasted text(20260813-064652).txt
Document


Pasted text(20260813-065342).txt
Document

Great. 👍

Next: open the Businesses page on mobile and check the new grid.

We should expect:

2 businesses per row

Larger, readable cards

Images remain prominent

Business name stays readable

Category visible

Description/address removed on mobile to reduce scrolling

Full-width View Business button

Much less vertical scrolling

If that looks good, the next thing I'd do is polish the individual Business cards so they look more premium and consistent with the Madibeng Connect homepage.

Send me a screenshot of the Businesses page on your phone and we'll continue from there.


next

Next, let's polish the individual Business cards on the Businesses directory.

The grid is now structurally right. I would not change the PHP yet. We'll improve the visual card system so each listing feels like a proper Madibeng Connect directory entry:

Better image treatment

Cleaner category badge

Stronger business name hierarchy

Consistent card heights

Better spacing

Subtle hover lift on desktop

Cleaner View Business CTA

Mobile cards remain compact

No excessive text on mobile

File to work on
assets/css/cards.css
You already have a dedicated:

assets/css/cards.css
and your enqueue file loads it globally before the page-specific styles.

Paste the current cards.css here.

I'll give you a complete replacement/download, just like we did with archive-businesses.css, so we don't end up stacking random CSS fixes on top of each other.



Pasted text(20260813-070038).txt
Document

Done. I rebuilt the complete cards.css rather than adding another patch on top of the existing one.

Download the complete cards.css

This version includes:

Premium desktop business cards

Consistent card heights

Better image proportions

Category badges

Featured badge

Cleaner typography

Hover effects

2-column mobile business cards

Compact mobile spacing

Mobile-friendly View Business buttons

Event cards

Generic cards

Tablet responsiveness

Very-small-phone handling

It also preserves the existing Madibeng Connect card selectors and directory grid classes from your current stylesheet. 


Replace
assets/css/cards.css
with the downloaded file.

Then clear SpeedyCache → Ctrl+F5 → check Businesses on desktop and mobile.

After that, the next major piece should be the individual Business Profile page — making /businesses/tekgroup-pty-ltd/ and the other listings look like proper premium profiles rather than just WordPress single posts. 


cards-complete-premium-mobile.css
Code



Library
/
cards-complete-premium-mobile.css


/*====================================================*
 * MADIBENG CONNECT
 * CARDS
 *====================================================*/


/*====================================================*
 * BASE CARD
 *====================================================*/

.mc-card{
    position:relative;
    display:flex;
    flex-direction:column;
    min-width:0;
    height:100%;
    background:var(--mc-white,#fff);
    border:1px solid var(--mc-border,#e2e8f0);
    border-radius:18px;
    overflow:hidden;
    box-shadow:var(
        --mc-shadow-sm,
        0 4px 16px rgba(15,23,42,.06)
    );
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.mc-card:hover{
    transform:translateY(-5px);
    border-color:rgba(13,110,253,.18);
    box-shadow:0 16px 35px rgba(15,23,42,.10);
}


/*====================================================*
 * CARD LINK
 *====================================================*/

.mc-card a{
    text-decoration:none;
}

.mc-card a:hover{
    text-decoration:none;
}


/*====================================================*
 * CARD IMAGE
 *====================================================*/

.mc-card-image{
    position:relative;
    width:100%;
    height:220px;
    overflow:hidden;
    background:#f1f5f9;
}

.mc-card-image img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .4s ease;
}

.mc-card:hover .mc-card-image img{
    transform:scale(1.04);
}


/*====================================================*
 * GENERIC CARD IMAGE
 *====================================================*/

.mc-card > img{
    display:block;
    width:100%;
    height:220px;
    object-fit:cover;
    transition:transform .4s ease;
}

.mc-card:hover > img{
    transform:scale(1.04);
}


/*====================================================*
 * IMAGE OVERLAY
 *====================================================*/

.mc-card-image::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        to bottom,
        transparent 55%,
        rgba(15,23,42,.12)
    );
    pointer-events:none;
}


/*====================================================*
 * CATEGORY BADGE
 *====================================================*/

.mc-card-category{
    position:absolute;
    top:15px;
    left:15px;
    z-index:2;
    display:inline-flex;
    align-items:center;
    min-height:30px;
    max-width:calc(100% - 30px);
    padding:0 10px;
    border-radius:999px;
    background:rgba(255,255,255,.94);
    color:var(--mc-primary,#0D6EFD);
    font-size:11px;
    font-weight:800;
    line-height:1;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    box-shadow:0 4px 12px rgba(15,23,42,.10);
}


/*====================================================*
 * CARD CONTENT
 *====================================================*/

.mc-card-content{
    display:flex;
    flex:1;
    flex-direction:column;
    padding:24px;
}

.mc-card-content h2,
.mc-card-content h3,
.mc-card-content h4{
    margin:0 0 9px;
    color:var(--mc-dark,#0f172a);
    line-height:1.25;
}

.mc-card-content h3{
    font-size:20px;
}

.mc-card-content p{
    margin:0 0 18px;
    color:var(--mc-muted,#64748b);
    font-size:14px;
    line-height:1.65;
}


/*====================================================*
 * CARD META
 *====================================================*/

.mc-card-meta{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px 14px;
    margin-bottom:18px;
    color:var(--mc-muted,#64748b);
    font-size:12px;
}

.mc-card-meta span{
    display:inline-flex;
    align-items:center;
    gap:6px;
}

.mc-card-meta i{
    color:var(--mc-primary,#0D6EFD);
}


/*====================================================*
 * CARD FOOTER
 *====================================================*/

.mc-card-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    margin-top:auto;
    padding-top:18px;
    border-top:1px solid var(--mc-border,#e2e8f0);
}


/*====================================================*
 * CARD LINK
 *====================================================*/

.mc-card-link{
    display:inline-flex;
    align-items:center;
    gap:7px;
    color:var(--mc-primary,#0D6EFD);
    font-size:13px;
    font-weight:700;
}

.mc-card-link i{
    transition:transform .2s ease;
}

.mc-card-link:hover{
    color:var(--mc-primary-dark,#0958c7);
}

.mc-card-link:hover i{
    transform:translateX(3px);
}


/*====================================================*
 * BUSINESS CARD
 *====================================================*/

.mc-business-card{
    height:100%;
}

.mc-business-card .mc-card-content{
    min-height:190px;
}


/*====================================================*
 * BUSINESS TITLE
 *====================================================*/

.mc-business-title{
    display:block;
    margin-bottom:8px;
    color:var(--mc-dark,#0f172a);
    font-size:20px;
    font-weight:800;
    line-height:1.25;
}

.mc-business-title:hover{
    color:var(--mc-primary,#0D6EFD);
}


/*====================================================*
 * BUSINESS CATEGORY
 *====================================================*/

.mc-business-category{
    display:inline-flex;
    align-items:center;
    margin-bottom:10px;
    color:var(--mc-primary,#0D6EFD);
    font-size:12px;
    font-weight:700;
}


/*====================================================*
 * FEATURED CARD
 *====================================================*/

.mc-card-featured{
    border-color:rgba(13,110,253,.16);
}

.mc-card-featured::before{
    content:"Featured";
    position:absolute;
    top:15px;
    right:15px;
    z-index:5;
    display:inline-flex;
    align-items:center;
    min-height:30px;
    padding:0 10px;
    border-radius:999px;
    background:var(--mc-primary,#0D6EFD);
    color:#fff;
    font-size:11px;
    font-weight:800;
    box-shadow:0 4px 12px rgba(13,110,253,.25);
}


/*====================================================*
 * EMPTY IMAGE
 *====================================================*/

.mc-card-image-empty{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:220px;
    background:linear-gradient(
        135deg,
        #f1f5f9,
        #e2e8f0
    );
    color:#94a3b8;
}

.mc-card-image-empty i{
    font-size:42px;
}


/*====================================================*
 * EVENT CARD
 *====================================================*/

.mc-event-card{
    display:flex;
    flex-direction:column;
    height:100%;
    background:#fff;
    border:1px solid var(--mc-border,#e2e8f0);
    border-radius:18px;
    overflow:hidden;
    box-shadow:var(
        --mc-shadow-sm,
        0 4px 16px rgba(15,23,42,.06)
    );
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.mc-event-card:hover{
    transform:translateY(-5px);
    border-color:rgba(13,110,253,.18);
    box-shadow:0 16px 35px rgba(15,23,42,.10);
}

.mc-event-card-image{
    height:200px;
    overflow:hidden;
}

.mc-event-card-image img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .4s ease;
}

.mc-event-card:hover .mc-event-card-image img{
    transform:scale(1.04);
}

.mc-event-card-content{
    display:flex;
    flex:1;
    flex-direction:column;
    padding:22px;
}


/*====================================================*
 * EVENT DATE
 *====================================================*/

.mc-event-date{
    display:inline-flex;
    align-items:center;
    gap:6px;
    align-self:flex-start;
    padding:6px 10px;
    margin-bottom:12px;
    border-radius:8px;
    background:rgba(13,110,253,.08);
    color:var(--mc-primary,#0D6EFD);
    font-size:11px;
    font-weight:800;
}


/*====================================================*
 * EVENT TITLE
 *====================================================*/

.mc-event-card h3{
    margin:0 0 9px;
    color:var(--mc-dark,#0f172a);
    font-size:19px;
    line-height:1.3;
}

.mc-event-card p{
    margin:0 0 18px;
    color:var(--mc-muted,#64748b);
    font-size:14px;
    line-height:1.6;
}


/*====================================================*
 * EVENT BUTTON
 *====================================================*/

.mc-event-card .mc-btn{
    margin-top:auto;
    align-self:flex-start;
}


/*====================================================*
 * DIRECTORY GRID
 *====================================================*/

.mc-business-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:26px;
}


/*====================================================*
 * TWO COLUMN
 *====================================================*/

.mc-business-grid-2{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:26px;
}


/*====================================================*
 * FOUR COLUMN
 *====================================================*/

.mc-business-grid-4{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:20px;
}


/*====================================================*
 * BUSINESS DIRECTORY CARD ENHANCEMENT
 *====================================================*/

.mc-business-grid .mc-business-card{
    min-width:0;
}

.mc-business-grid .mc-business-card .mc-card-content{
    gap:0;
}

.mc-business-grid .mc-business-card .mc-business-title{
    display:-webkit-box;
    overflow:hidden;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
}

.mc-business-grid .mc-business-card .mc-card-content p{
    display:-webkit-box;
    overflow:hidden;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
}

.mc-business-grid .mc-business-card .mc-card-footer{
    margin-top:auto;
}


/*====================================================*
 * RESPONSIVE
 *====================================================*/

@media(max-width:1100px){

    .mc-business-grid-4{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }

}


@media(max-width:991px){

    .mc-business-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .mc-business-grid-2{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .mc-card-image,
    .mc-card > img{
        height:210px;
    }

}


/*====================================================*
 * TABLET / MOBILE
 *====================================================*/

@media(max-width:768px){

    .mc-business-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:14px;
    }

    .mc-business-grid-2{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:14px;
    }

    .mc-business-grid-4{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:14px;
    }

    .mc-card{
        border-radius:14px;
    }

    .mc-card-content{
        padding:16px;
    }

    .mc-card-image,
    .mc-card > img{
        height:auto;
        aspect-ratio:1 / .82;
    }

    .mc-card-content h3{
        font-size:17px;
    }

    .mc-card-content p{
        font-size:12px;
        line-height:1.55;
    }

    .mc-card-meta{
        gap:5px 9px;
        margin-bottom:12px;
        font-size:10px;
    }

    .mc-card-footer{
        gap:8px;
        padding-top:12px;
    }

    .mc-card-link{
        font-size:11px;
    }

    .mc-card-category{
        top:10px;
        left:10px;
        min-height:25px;
        padding:0 8px;
        font-size:8px;
    }

    .mc-event-card-image{
        height:180px;
    }

    .mc-event-card-content{
        padding:16px;
    }

}


/*====================================================*
 * MOBILE DIRECTORY CARDS
 *====================================================*/

@media(max-width:600px){

    .mc-business-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:10px;
    }

    .mc-business-grid-2,
    .mc-business-grid-4{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:10px;
    }

    .mc-business-card{
        border-radius:11px;
    }

    .mc-business-card .mc-card-image,
    .mc-business-card > img{
        aspect-ratio:1 / .82;
        height:auto;
    }

    .mc-business-card .mc-card-content{
        min-height:0;
        padding:10px;
    }

    .mc-business-card .mc-business-category{
        margin-bottom:6px;
        font-size:8px;
        line-height:1.2;
    }

    .mc-business-card .mc-business-title{
        margin-bottom:7px;
        font-size:13px;
        line-height:1.22;
    }

    .mc-business-card .mc-card-content p{
        margin-bottom:10px;
        font-size:10px;
        line-height:1.45;
    }

    .mc-business-card .mc-card-meta{
        margin-bottom:7px;
        font-size:9px;
    }

    .mc-business-card .mc-card-footer{
        padding-top:8px;
    }

    .mc-business-card .mc-card-link{
        width:100%;
        justify-content:center;
        min-height:31px;
        padding:0 7px;
        border-radius:7px;
        background:var(--mc-primary,#0D6EFD);
        color:#fff;
        font-size:9px;
        font-weight:800;
    }

    .mc-business-card .mc-card-link:hover{
        color:#fff;
        background:var(--mc-primary-dark,#0958c7);
    }

    .mc-business-card .mc-card-link i{
        font-size:8px;
    }

    .mc-card-featured::before{
        top:10px;
        right:10px;
        min-height:24px;
        padding:0 7px;
        font-size:8px;
    }

}


/*====================================================*
 * SMALL PHONES
 *====================================================*/

@media(max-width:480px){

    .mc-card{
        border-radius:10px;
    }

    .mc-card-content{
        padding:10px;
    }

    .mc-card-image,
    .mc-card > img{
        aspect-ratio:1 / .82;
        height:auto;
    }

    .mc-card-content h3{
        font-size:15px;
    }

    .mc-card-content p{
        font-size:10px;
    }

    .mc-card-category{
        top:8px;
        left:8px;
        min-height:22px;
        padding:0 6px;
        font-size:7px;
    }

    .mc-business-grid,
    .mc-business-grid-2,
    .mc-business-grid-4{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:8px;
    }

    .mc-business-card .mc-business-title{
        font-size:12px;
    }

    .mc-business-card .mc-business-category{
        font-size:7px;
    }

    .mc-business-card .mc-card-link{
        min-height:29px;
        font-size:8px;
    }

    .mc-event-card{
        border-radius:12px;
    }

    .mc-event-card-image{
        height:160px;
    }

    .mc-event-card-content{
        padding:13px;
    }

    .mc-event-card h3{
        font-size:16px;
    }

    .mc-event-card p{
        font-size:11px;
    }

    .mc-card-footer{
        align-items:flex-start;
        flex-direction:column;
    }

}


/*====================================================*
 * VERY SMALL PHONES
 *====================================================*/

@media(max-width:360px){

    .mc-business-grid,
    .mc-business-grid-2,
    .mc-business-grid-4{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:7px;
    }

    .mc-business-card .mc-card-content{
        padding:8px;
    }

    .mc-business-card .mc-business-title{
        font-size:11px;
    }

    .mc-business-card .mc-business-category{
        font-size:6.5px;
    }

    .mc-business-card .mc-card-link{
        min-height:28px;
        font-size:7.5px;
    }

}