/* ============================================================================ "Recent Blogs" slider — mobile layout ---------------------------------------------------------------------------- The section lives inside `#blogslider` and is repeated inline on ~80 pages (every blog detail page, plus the hand-pallet-truck-in- pages). Scoping everything here to that id fixes all of them from one place, and touches nothing else — no other section on the site carries the id. What was wrong at 390px, measured rather than guessed: .row carries Bootstrap's -15px gutters but its two children are plain divs with no col-* class, so nothing added the matching +15px padding back. The row therefore spanned 0→375 and both the heading and the slider sat hard against the screen edges while every other block on the page was inset 15px. .owl-nav opacity:0, revealed by `.services-slider:hover`. A phone has no hover, so the arrows were permanently invisible and the slider had no visible control at all. .owl-next absolutely positioned to right:-1px, landing at x=376 on a 375px viewport — one pixel of horizontal page overflow. .blog-post its box-shadow is clipped away by .owl-stage-outer's overflow:hidden, because the slide is exactly as wide as the stage, so the card read as a bare image slab. img forced to width/height 100% at the slide's full width, giving a 375x375 photograph — most of a phone screen for one card. Desktop is untouched; everything is inside a max-width query. ========================================================================== */ @media (max-width: 991px) { /* ---- put the section back inside the page gutter ---------------------- Cancelling the row's negative margin is what indents the heading and the slider to match the rest of the page. Owl reads its item width from .owl-stage-outer at init, and this stylesheet is in the , so the narrower width is already in place before the carousel is built. */ #blogslider .section-content > .row { margin-left: 0; margin-right: 0; } #blogslider .sidebartitle { width: 100%; margin-bottom: 18px; } #blogslider .sidebartitle .post-title { font-size: 24px; line-height: 1.25; margin: 0; } /* ---- the slide ------------------------------------------------------- */ /* A border rather than a shadow: the slide fills the stage exactly, and the stage clips its overflow, so a box-shadow can never actually be seen here. The border gives the card its edge back without needing to escape. */ #blogslider .owl-item .blog-post { border: 1px solid #e7eaef; border-radius: 6px; overflow: hidden; background: #fff; } /* A 375px-tall square photograph pushed the title and the Read More link off the bottom of the screen. Fixed frame, image contained inside it. */ #blogslider .owl-item .wt-post-media { height: 220px; background: #fff; } #blogslider .owl-item .wt-post-media > a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 14px; } /* Overrides `#blogslider .owl-carousel .owl-item img { width/height: 100% }` — same specificity, later in the cascade, so !important is answered in kind. contain, not cover: these are product photographs and cropping one to fill the frame cuts the machine in half. */ #blogslider .owl-carousel .owl-item img { width: auto !important; height: auto !important; max-width: 100%; max-height: 100%; object-fit: contain; display: block !important; } #blogslider .owl-item .wt-post-info { padding-top: 18px !important; padding-left: 14px; padding-right: 14px; } #blogslider .owl-item .wt-post-title .post-title { font-size: 18px; line-height: 1.35; margin: 0; overflow-wrap: break-word; } #blogslider .owl-item .wt-post-readmore { padding: 12px 0 4px !important; } /* ---- navigation ------------------------------------------------------ Moved out from over the photograph and dropped below the slider as a pair of centred buttons, always visible. The id gives these rules the weight to beat `.services-slider:hover.owl-btn-vertical-center .owl-nav .owl-prev`. */ #blogslider .services-slider .owl-nav { position: static; display: flex; justify-content: center; gap: 14px; margin: 18px 0 0; opacity: 1; } #blogslider .services-slider .owl-nav .owl-prev, #blogslider .services-slider .owl-nav .owl-next { position: static; top: auto; left: auto; right: auto; margin: 0; /* 44px: the minimum comfortable tap target. The 35px squares the theme used were both invisible and too small to hit reliably. */ width: 44px; height: 44px; line-height: 44px; border-radius: 4px; padding: 0; } /* the hover rules nudged the arrows inwards by 5% of the slider; with static positioning that would shove them out of the flex row */ #blogslider .services-slider:hover .owl-nav .owl-prev, #blogslider .services-slider:hover .owl-nav .owl-next { left: auto; right: auto; } } @media (max-width: 575px) { #blogslider .sidebartitle .post-title { font-size: 21px; } #blogslider .owl-item .wt-post-media { height: 210px; } #blogslider .owl-item .wt-post-media > a { padding: 10px; } #blogslider .owl-item .wt-post-title .post-title { font-size: 16px; } } @media (prefers-reduced-motion: reduce) { #blogslider .services-slider .owl-nav .owl-prev, #blogslider .services-slider .owl-nav .owl-next { transition: none !important; } }