/*
* ChapChap grid fix -- ROUND 27: targets the actual, verified card row,
* not a JS-tagged guess.
* =====================================================================
* Read directly from the parent theme's own PHP source (not inferred
* from the rendered page), this is the exact, unchanging markup every
* ad-listing page shares -- homepage tabs, /all-ads/, every category
* and subcategory archive (templates/catinner/style1-7.php), search
* results, seller storefront/profile pages (author.php), locations
* pages, and the premium-ads page -- because they all either include
* or copy the same block:
*
*
* ...
*
*
* [
]
*
*
...
* ... (repeated once per ad) ...
*
* [
]
*
*
*
*
* (templates/classiera-loops/loop-lime.php, loop-strobe.php,
* loop-coral.php, loop-iris.php, loop-ivy.php, loop-allure.php and
* loop-style8.php all emit that identical wrapper div -- confirmed by
* reading every loop template in the parent theme, not assumed.)
*
* ROOT CAUSE of the "cards squeezed to one side, one per row" bug seen
* on the live site: the parent theme's own CSS (classiera.css line
* ~9467) sets `.classiera-advertisement .item.item-grid-medium { width:
* 25%; }` with NO responsive media-query gate at all -- so it's a flat
* 25%-wide box even on a phone screen. A 25%-wide box that is not
* floated, grid-ed, or flexed still takes its own full line as a block
* element, so the cards were never actually side-by-side; each one was
* just an oddly narrow block sitting alone on its row, exactly what
* the screenshots show. Previous rounds tried to fix this by having
* JavaScript hunt for the real parent element at runtime and tag it --
* fragile, because it silently produces nothing if the script errors,
* loads late, or a page's markup doesn't match what it expected. The
* selector below targets the row directly, by the markup confirmed
* above, unconditionally in CSS -- no JavaScript involved, so it can't
* fail to run.
*
* `.tab-content .row` deliberately stops at that depth (not a bare
* `.classiera-advertisement .row`) so it can never accidentally match
* some unrelated `.row` sitting elsewhere inside the same section
* (e.g. the "Total ads / View as" head row, which is a sibling of
* `.tab-content`, not a descendant of it).
*/
.classiera-advertisement .tab-content .row {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px !important;
margin: 0 !important;
width: 100% !important;
max-width: 100% !important;
}
.classiera-advertisement .tab-content .row > .item {
display: block !important;
width: auto !important;
max-width: none !important;
min-width: 0 !important;
float: none !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
@media (min-width: 576px) {
.classiera-advertisement .tab-content .row {
grid-template-columns: repeat(3, 1fr) !important;
}
}
@media (min-width: 992px) {
.classiera-advertisement .tab-content .row {
grid-template-columns: repeat(4, 1fr) !important;
gap: 16px !important;
}
}
/* Defensive fallback only: if some page ever renders the ad row
without a .tab-content wrapper around it, still grid the row
directly under .classiera-advertisement so it never falls back to
the broken single-column stack. Same rules, wider selector. */
.classiera-advertisement > .row,
.classiera-advertisement > .container > .row {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px !important;
margin: 0 !important;
}
.classiera-advertisement > .row > .item,
.classiera-advertisement > .container > .row > .item {
width: auto !important;
max-width: none !important;
float: none !important;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
@media (min-width: 576px) {
.classiera-advertisement > .row,
.classiera-advertisement > .container > .row {
grid-template-columns: repeat(3, 1fr) !important;
}
}
@media (min-width: 992px) {
.classiera-advertisement > .row,
.classiera-advertisement > .container > .row {
grid-template-columns: repeat(4, 1fr) !important;
gap: 16px !important;
}
}
/* "Recently Viewed" (chapchap-extras.php) AND "Related Posts"
(chapchap-content-enhancements.php) both use the same
.chapchap-related-item / .row Bootstrap col-sm-4 pattern with no
mobile-width class, so both stack full-width on phones without this
fix. (Previously this rule only matched inside .chapchap-recently-viewed,
which left the separate "Related Posts" blocks on blog/ad pages
un-fixed -- widened to catch both.) */
@media (max-width: 767px) {
.chapchap-related-item {
float: left !important;
width: 50% !important;
box-sizing: border-box !important;
padding: 4px !important;
}
.chapchap-recently-viewed .row,
.chapchap-related-posts .row {
display: block !important;
overflow: hidden;
}
}
/* Wishlist grid (chapchap-wishlist.php): same Bootstrap-3 bug as
.item-grid above -- "col-md-4 col-sm-6" has no class below 768px, so
saved ads stacked full-width on phones instead of gridding. */
@media (max-width: 767px) {
.chapchap-wishlist-item {
float: left !important;
width: 50% !important;
box-sizing: border-box !important;
}
}
/*
* ChapChap: sitewide compact card images (Jiji-style)
* -----------------------------------------------------------------------
* Requested: every grid of ad/blog cards -- main listing grid, category
* pages, search results, storefronts, Related Posts, Recently Viewed,
* Wishlist -- should show small, uniform thumbnails that fit the grid
* tightly, the way jiji.co.ke's cards do, instead of large uncropped
* images that push each card's height up and make the grid feel loose.
*
* Unlike the breakpoint fix above, this applies at EVERY screen size
* (not just mobile) -- the goal here is a consistent compact look,
* not just fixing a stacking bug. object-fit: cover crops rather than
* squashes, so photos of any aspect ratio still look clean at a fixed
* height.
*
* Selectors cover every card image location for ad listings (the
* standalone Blog page has its own image sizing in
* chapchap-blog-grid.css, since it's a separate template):
* - .item-grid / .classiera-box-div : the main ad listing grid
* (homepage, All Ads, category/subcategory archives, search results,
* seller storefronts)
* - .chapchap-related-item : Related Posts + Recently Viewed
* - .chapchap-wishlist-card : the Wishlist grid
* - .chapchap-autogrid-item : the JS safety net for any other
* repeating card listing (chapchap-auto-grid.js) -- already sized
* via .chapchap-autogrid-img, unified here to the same height so
* the whole site looks consistent regardless of which layer caught
* a given page.
*/
.item-grid figure img,
.item-grid > a > img,
.classiera-box-div figure img,
.classiera-box-div .premium-img img,
.chapchap-wishlist-card img {
width: 100% !important;
height: 145px !important;
object-fit: cover !important;
}
.classiera-box-div .premium-img {
height: 145px !important;
overflow: hidden !important;
}
.chapchap-related-item img {
width: 100% !important;
height: 130px !important;
object-fit: cover !important;
}
@media (min-width: 768px) {
.item-grid figure img,
.item-grid > a > img,
.classiera-box-div figure img,
.classiera-box-div .premium-img img,
.chapchap-wishlist-card img,
.chapchap-related-item img {
height: 190px !important;
}
.classiera-box-div .premium-img {
height: 190px !important;
}
}
/* Keep the auto-grid JS safety net (unknown/parent-rendered listings)
visually consistent with the rest of the site instead of its own
slightly different 110px default. */
.chapchap-autogrid-img {
height: 145px !important;
}
@media (min-width: 768px) {
.chapchap-autogrid-img {
height: 190px !important;
}
}
/*
* ROUND 29: Jiji-style card text polish.
* -----------------------------------------------------------------------
* Now that the .classiera-box-div figure height/overflow bug above is
* fixed, price/title/location (already in the parent theme's own
* markup, in ) are visible again -- this just makes them
* LOOK like jiji.co.ke: bold green price first, compact single-line
* title, small grey location line, tight spacing. The verbose
* "Category: X" label text is hidden (location keeps its own text,
* just the "Category:" prefix noise is dropped) to match Jiji's
* cleaner look; the category link itself still works if clicked.
*/
.classiera-box-div figcaption {
padding: 8px 6px !important;
text-align: left !important;
}
.classiera-box-div figcaption .price.visible-xs {
display: block !important;
color: #00a651 !important;
font-weight: 700 !important;
font-size: 15px !important;
margin: 0 0 2px 0 !important;
}
.classiera-box-div figcaption h5 {
font-size: 13px !important;
font-weight: 500 !important;
color: #222 !important;
margin: 0 0 3px 0 !important;
}
.classiera-box-div figcaption .category {
font-size: 11px !important;
color: #888 !important;
}
.classiera-box-div figcaption .category strong {
display: none !important;
}