/* ============================================================
FILE 1: responsive-fixes.css
Save to: public/assets/frontend/css/responsive-fixes.css
Add after style.css:
============================================================ */
/*
================================================
RESPONSIVE FIXES — Laravel Frontend Layout
Add this file AFTER style.css in your layout:
================================================
Breakpoints used:
1600px — extra large desktop
1399px — large desktop
1199px — tablet landscape / small desktop
991px — tablet portrait
767px — large mobile / small tablet
575px — medium mobile
480px — small mobile
375px — very small mobile
================================================
*/
/* -----------------------------------------------
1. GLOBAL — Prevent horizontal overflow
----------------------------------------------- */
html,
body {
max-width: 100%;
overflow-x: hidden;
}
/* Fix body overflow: hidden at 991px that blocks vertical scroll */
@media (max-width: 991px) {
body {
overflow-y: auto !important;
overflow-x: hidden !important;
}
}
/* Ensure every section can't bleed out */
section,
.rts-section-gap,
.rts-section-gapTop,
.rts-section-gapBottom {
overflow-x: hidden;
max-width: 100%;
}
/* -----------------------------------------------
2. GLOBAL TYPOGRAPHY — h1, h3 responsive
----------------------------------------------- */
/* h1 — base 80px, add missing breakpoints */
h1 {
font-size: 80px;
line-height: 1.1;
}
@media (max-width: 1199px) {
h1 {
font-size: 60px;
}
}
@media (max-width: 991px) {
h1 {
font-size: 48px;
}
}
@media (max-width: 767px) {
h1 {
font-size: 36px;
line-height: 1.15;
}
}
@media (max-width: 480px) {
h1 {
font-size: 28px;
line-height: 1.2;
}
}
@media (max-width: 375px) {
h1 {
font-size: 24px;
}
}
/* h3 — base 40px, add missing breakpoints */
h3 {
font-size: 40px;
line-height: 1.2;
}
@media (max-width: 1199px) {
h3 {
font-size: 32px;
}
}
@media (max-width: 991px) {
h3 {
font-size: 28px;
}
}
@media (max-width: 767px) {
h3 {
font-size: 22px;
}
}
@media (max-width: 480px) {
h3 {
font-size: 20px;
}
}
/* h4 — add small-screen fixes */
@media (max-width: 767px) {
h4 {
font-size: 20px;
}
}
@media (max-width: 480px) {
h4 {
font-size: 18px;
}
}
/* -----------------------------------------------
3. HEADER TOP AREA — info bar
----------------------------------------------- */
/* Wrap email + address on medium screens */
@media (max-width: 1199px) {
.rts-header-area.header-two .header-top-area .header-top-wrapper .info-area {
flex-wrap: wrap;
gap: 8px 20px;
justify-content: flex-end;
}
.rts-header-area.header-two .header-top-area .header-top-wrapper .info-area .single-info {
font-size: 13px;
}
.rts-header-area.header-two .header-top-area .header-top-wrapper .info-area .single-info a {
font-size: 13px;
}
}
/* Truncate long address text on smaller desktops */
@media (max-width: 1399px) {
.rts-header-area.header-two .header-top-area .header-top-wrapper .info-area .single-info a {
max-width: 280px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
vertical-align: middle;
}
}
/* -----------------------------------------------
TOOLTIP — full address on hover
Requires data-tooltip="..." on .single-info div.
See blade snippet in header-info-tooltip.blade.txt
----------------------------------------------- */
/* Make .single-info the tooltip anchor */
.rts-header-area.header-two .header-top-area
.header-top-wrapper .info-area .single-info[data-tooltip] {
position: relative;
cursor: default;
}
/* Tooltip bubble — appears BELOW the bar */
.rts-header-area.header-two .header-top-area
.header-top-wrapper .info-area .single-info[data-tooltip]::after {
content: attr(data-tooltip);
position: absolute;
top: calc(100% + 10px);
left: 50%;
transform: translateX(-50%) translateY(-4px);
background: rgba(11, 45, 77, 0.97);
color: #ffffff;
font-size: 12px;
font-weight: 500;
line-height: 1.5;
padding: 8px 14px;
border-radius: 6px;
white-space: normal;
width: max-content;
max-width: 320px;
text-align: center;
pointer-events: none;
opacity: 0;
transition: opacity 0.2s ease, transform 0.2s ease;
z-index: 10000;
box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
/* Arrow pointing UP toward the bar */
.rts-header-area.header-two .header-top-area
.header-top-wrapper .info-area .single-info[data-tooltip]::before {
content: '';
position: absolute;
top: calc(100% + 4px);
left: 50%;
transform: translateX(-50%);
border: 6px solid transparent;
border-bottom-color: rgba(11, 45, 77, 0.97);
pointer-events: none;
opacity: 0;
transition: opacity 0.2s ease;
z-index: 10000;
}
/* Show on hover */
.rts-header-area.header-two .header-top-area
.header-top-wrapper .info-area .single-info[data-tooltip]:hover::after {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.rts-header-area.header-two .header-top-area
.header-top-wrapper .info-area .single-info[data-tooltip]:hover::before {
opacity: 1;
}
/* Social links gap reduction */
@media (max-width: 1399px) {
.rts-header-area.header-two .header-top-area .header-top-wrapper .top-social {
gap: 16px;
}
.rts-header-area.header-two .header-top-area .header-top-wrapper .top-social li a {
font-size: 13px;
}
}
/* -----------------------------------------------
4. HEADER MAIN NAV — nav bar (header-two)
----------------------------------------------- */
/* CRITICAL: Force all nav links to stay on ONE line at all times.
Without white-space: nowrap the text wraps causing two-line items. */
.rts-header-area.header-two .header-main-area-two .header-main-wrapper .rts-nav-btn-area .rts-nav-area ul li a {
white-space: nowrap;
}
/* 1400px–1600px: slightly reduce font & spacing */
@media (max-width: 1600px) {
.rts-header-area.header-two .header-main-area-two .header-main-wrapper .rts-nav-btn-area .rts-nav-area ul li a {
font-size: 14px;
padding: 30px 0;
}
.rts-header-area.header-two .header-main-area-two .header-main-wrapper .rts-nav-btn-area .rts-nav-area ul li {
margin-right: 20px;
}
}
/* 1200px–1399px: shrink further so all 8 items fit on one row */
@media (max-width: 1399px) {
.rts-header-area.header-two .header-main-area-two .header-main-wrapper .rts-nav-btn-area .rts-nav-area ul li a {
font-size: 12px;
padding: 24px 0;
letter-spacing: 0;
}
.rts-header-area.header-two .header-main-area-two .header-main-wrapper .rts-nav-btn-area .rts-nav-area ul li {
margin-right: 12px;
}
/* Also shrink the language-switcher flag text */
.rts-header-area.header-two .header-main-area-two .header-main-wrapper .rts-nav-btn-area .rts-nav-area ul li.language-switcher a {
font-size: 12px;
}
}
/* Tighten the nav + button area gap on tablet */
@media (max-width: 1199px) {
.rts-header-area.header-two .header-main-area-two .header-main-wrapper .rts-nav-btn-area {
gap: 10px;
}
}
/* Mobile header main wrapper — tighten padding further */
@media (max-width: 480px) {
.rts-header-area.header-two .header-main-area-two .header-main-wrapper {
padding: 10px 12px;
}
/* Shrink logo slightly on very small screens */
.rts-header-area.header-two .header-main-area-two .header-main-wrapper .logo img,
.rts-header-area.header-two .header-main-area-two .header-main-wrapper .logo {
max-width: 80px !important;
width: 80px !important;
}
}
/* -----------------------------------------------
HAMBURGER BUTTON FIX (all screen sizes)
Root cause: .menu-toggle has padding: 0 20px and
width: 60px → only 20px of usable content.
The second has NO width at all so it collapses
to zero, making the burger invisible.
Fix: reset the inner div and give both spans
explicit pixel widths.
----------------------------------------------- */
.rts-header-area.header-two .header-main-area-two
.header-main-wrapper .rts-nav-btn-area
.rts-btn-area .rts-menu-toggles .menu-toggle {
padding: 0;
width: auto;
height: auto;
line-height: normal;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 5px;
cursor: pointer;
}
/* Both spans now have an explicit pixel width */
.rts-header-area.header-two .header-main-area-two
.header-main-wrapper .rts-nav-btn-area
.rts-btn-area .rts-menu-toggles .menu-toggle span {
display: block;
width: 20px;
height: 2px;
background-color: var(--color-heading);
border-bottom: none;
border-radius: 100px;
transition: all 0.4s;
}
/* Shorter top line (design accent) */
.rts-header-area.header-two .header-main-area-two
.header-main-wrapper .rts-nav-btn-area
.rts-btn-area .rts-menu-toggles .menu-toggle span:nth-child(1) {
width: 14px;
margin-left: auto;
margin-right: 0;
}
/* Hover: both lines become full width */
.rts-header-area.header-two .header-main-area-two
.header-main-wrapper .rts-nav-btn-area
.rts-btn-area .rts-menu-toggles .menu-toggle:hover span:nth-child(1) {
width: 20px;
}
/* Hide hamburger on desktop — full nav is visible above 1199px */
@media (min-width: 1200px) {
.rts-header-area.header-two .header-main-area-two .header-main-wrapper .rts-nav-btn-area .rts-btn-area .rts-menu-toggles {
display: none !important;
}
}
/* Ensure search-icon and toggle are properly sized on tablet & mobile */
@media (max-width: 1199px) {
.rts-header-area.header-two .header-main-area-two .header-main-wrapper .rts-nav-btn-area .rts-btn-area .search-icon {
display: flex;
width: 44px;
height: 44px;
}
.rts-header-area.header-two .header-main-area-two .header-main-wrapper .rts-nav-btn-area .rts-btn-area .rts-menu-toggles {
display: flex;
width: 44px;
height: 44px;
}
}
/* On small mobile, hide search icon to save space but keep burger */
@media (max-width: 575px) {
.rts-header-area.header-two .header-main-area-two .header-main-wrapper .rts-nav-btn-area .rts-btn-area .search-icon {
display: none;
}
.rts-header-area.header-two .header-main-area-two .header-main-wrapper .rts-nav-btn-area .rts-btn-area .rts-menu-toggles {
display: flex;
width: 40px;
height: 40px;
}
}
/* -----------------------------------------------
5. BANNER SLIDER THREE — hero section
Problem: original height 980px + padding-top 380px
pushes the text/buttons below the visible viewport.
Fix: reduce height AND top padding at every breakpoint.
----------------------------------------------- */
/* ---- BANNER NAV BUTTONS — left edge / right edge layout ----
Problem: .swiper-banner-btn stacks both arrows in a vertical
column at left:11%, which overlaps the heading text.
Fix: stretch the container edge-to-edge, switch to horizontal
flex, and push prev to far left / next to far right — exactly
like a standard left/right slider navigation.
----------------------------------------------- */
.rts-banner-slider-three-area .swiper-banner-btn {
/* span the full banner width */
left: 0 !important;
right: 0;
width: 100%;
/* keep vertical centering */
top: 50% !important;
transform: translateY(-50%) !important;
bottom: auto !important;
/* row layout so prev sits left, next sits right */
flex-direction: row !important;
justify-content: space-between;
align-items: center;
/* side padding keeps buttons off the very edge */
padding: 0 30px;
box-sizing: border-box;
}
@media (max-width: 1199px) {
.rts-banner-slider-three-area .swiper-banner-btn {
padding: 0 20px;
}
}
/* ---- SWIPER HORIZONTAL DIRECTION — CSS guard ----
Forces the swiper wrapper to always lay slides
left-to-right. Fixes vertical sliding caused by
direction:'vertical' in the JS initialisation.
The JS fix in banner-swiper-fix.js is also required
for the drag/touch animation to work correctly.
----------------------------------------------- */
.rts-banner-slider-three-area .rts-banner-slider-three .swiper-wrapper {
flex-direction: row !important;
}
/* Also clear any leftover vertical translate */
.rts-banner-slider-three-area .rts-banner-slider-three.swiper-vertical .swiper-wrapper {
flex-direction: row !important;
transform: translate3d(0px, 0px, 0px);
}
/* ---- SLIDER HEIGHT overrides ---- */
/* Desktop default — reduced from 700px */
.rts-banner-slider-three-area .rts-banner-slider-three {
height: 560px;
}
/* ≤ 1199px */
@media (max-width: 1199px) {
.rts-banner-slider-three-area .rts-banner-slider-three {
height: 480px;
}
}
/* ≤ 991px */
@media (max-width: 991px) {
.rts-banner-slider-three-area .rts-banner-slider-three {
height: 420px;
}
}
/* ≤ 767px */
@media (max-width: 767px) {
.rts-banner-slider-three-area .rts-banner-slider-three {
height: 380px;
}
}
/* ≤ 480px */
@media (max-width: 480px) {
.rts-banner-slider-three-area .rts-banner-slider-three {
height: 340px;
}
}
/* ≤ 375px */
@media (max-width: 375px) {
.rts-banner-slider-three-area .rts-banner-slider-three {
height: 300px;
}
}
/* ---- CONTENT PADDING overrides ---- */
/* Reduced proportionally with the new smaller heights */
/* Desktop default */
.rts-banner-slider-three-area .banner-wrapper .banner-content {
padding: 100px 0 40px;
}
/* ≤ 1199px */
@media (max-width: 1199px) {
.rts-banner-slider-three-area .banner-wrapper .banner-content {
padding: 80px 0 40px 60px;
}
}
/* ≤ 991px */
@media (max-width: 991px) {
.rts-banner-slider-three-area .banner-wrapper .banner-content {
padding: 70px 0 30px;
}
}
/* ≤ 767px */
@media (max-width: 767px) {
.rts-banner-slider-three-area .banner-wrapper .banner-content {
padding: 60px 0 24px;
}
}
/* ≤ 480px */
@media (max-width: 480px) {
.rts-banner-slider-three-area .banner-wrapper .banner-content {
padding: 50px 0 20px;
}
}
/* ≤ 375px */
@media (max-width: 375px) {
.rts-banner-slider-three-area .banner-wrapper .banner-content {
padding: 40px 0 16px;
}
}
/* ---- BANNER TITLE sizes ---- */
/* ≤ 480px */
@media (max-width: 480px) {
.rts-banner-slider-three-area .banner-wrapper .banner-content .title {
font-size: 28px;
line-height: 36px;
margin-bottom: 12px;
}
}
/* ≤ 375px */
@media (max-width: 375px) {
.rts-banner-slider-three-area .banner-wrapper .banner-content .title {
font-size: 24px;
line-height: 30px;
}
}
/* ---- DESCRIPTION text ---- */
@media (max-width: 767px) {
.rts-banner-slider-three-area .banner-wrapper .banner-content .desc {
font-size: 14px;
line-height: 22px;
}
}
@media (max-width: 480px) {
.rts-banner-slider-three-area .banner-wrapper .banner-content .desc {
font-size: 13px;
line-height: 20px;
}
}
/* ---- BUTTONS ---- */
@media (max-width: 480px) {
.rts-banner-slider-three-area .banner-wrapper .banner-content .banner-btn-area .banner-btn {
font-size: 13px;
padding: 14px 24px;
}
.rts-banner-slider-three-area .banner-wrapper .banner-content .banner-btn-area {
gap: 12px;
margin-top: 16px;
}
}
/* Watermark / background heading text — clip on very small screens */
@media (max-width: 575px) {
.rts-banner-slider-three-area .banner-heading-text {
font-size: 70px;
bottom: -10px;
}
}
@media (max-width: 480px) {
.rts-banner-slider-three-area .banner-heading-text {
font-size: 55px;
bottom: -8px;
}
}
@media (max-width: 375px) {
.rts-banner-slider-three-area .banner-heading-text {
font-size: 44px;
bottom: -6px;
}
}
/* -----------------------------------------------
6. BIG BACKGROUND TEXT — "Layanan", "Gudang", etc.
----------------------------------------------- */
/* All big-title watermark elements must not cause horizontal scroll */
.rts-section-title .big-title,
.rts-horizontal-anim {
overflow: hidden;
max-width: 100%;
word-break: break-all;
}
/* Service section big title */
@media (max-width: 991px) {
.rts-service-area .rts-section-title .big-title {
font-size: 120px;
}
}
@media (max-width: 767px) {
.rts-service-area .rts-section-title .big-title {
font-size: 80px;
}
}
@media (max-width: 480px) {
.rts-service-area .rts-section-title .big-title {
font-size: 56px;
}
}
@media (max-width: 375px) {
.rts-service-area .rts-section-title .big-title {
font-size: 44px;
}
}
/* Team area big title */
@media (max-width: 991px) {
.rts-team-area-two .rts-section-title .big-title {
font-size: 120px;
}
}
@media (max-width: 767px) {
.rts-team-area-two .rts-section-title .big-title {
font-size: 80px;
}
}
@media (max-width: 480px) {
.rts-team-area-two .rts-section-title .big-title {
font-size: 56px;
}
}
/* -----------------------------------------------
7. SECTION TITLE — subtitle & title elements
----------------------------------------------- */
/* Subtitle text on small screens */
@media (max-width: 575px) {
.rts-section-title .subtitle,
.rts-section-title .subtitle-two,
.rts-section-title .subtitle-three {
font-size: 13px;
}
.rts-section-title .title {
font-size: 22px;
line-height: 30px;
}
}
@media (max-width: 480px) {
.rts-section-title .title {
font-size: 20px;
line-height: 28px;
}
}
/* -----------------------------------------------
8. ABOUT SECTION
----------------------------------------------- */
/* About image area — prevent images overflowing their container */
@media (max-width: 767px) {
.about-image-area {
position: relative;
overflow: hidden;
min-height: 260px;
}
.about-image-area .about-thumb,
.about-image-area .about-thumb-two {
max-width: 90%;
}
}
@media (max-width: 575px) {
.rts-about-wrapper-three .rts-about-content-area .rts-section-title .title {
font-size: 22px;
line-height: 30px;
}
}
/* -----------------------------------------------
9. SERVICE SECTION
----------------------------------------------- */
@media (max-width: 767px) {
.rts-service-wrapper-two .single-item .service-inner {
padding: 24px 16px;
}
.rts-service-wrapper-two .single-item .service-inner .content .title {
font-size: 20px;
}
.rts-service-wrapper-two .single-item .service-inner .content .desc {
font-size: 14px;
line-height: 22px;
}
}
/* -----------------------------------------------
10. CTA / COUNTER SECTION
----------------------------------------------- */
@media (max-width: 767px) {
.rts-cta-area .rts-cta-wrapper,
.rts-cta-wrapper {
padding: 40px 20px;
text-align: center;
}
}
/* Counter items — stack cleanly on mobile */
@media (max-width: 575px) {
.rts-counter-area .counter-wrapper,
.rts-counter-wrapper {
flex-wrap: wrap;
gap: 20px;
justify-content: center;
}
.rts-counter-area .counter-wrapper .single-counter,
.rts-counter-wrapper .single-counter {
min-width: 45%;
text-align: center;
}
.rts-counter-area .counter-wrapper .single-counter .count,
.rts-counter-wrapper .single-counter .count {
font-size: 32px;
}
}
/* -----------------------------------------------
11. OFFCANVAS (mobile menu)
----------------------------------------------- */
@media (max-width: 375px) {
.rts-offcanvas-area {
width: 90vw;
max-width: 300px;
}
}
/* -----------------------------------------------
12. SEARCH MODAL
----------------------------------------------- */
@media (max-width: 575px) {
.rts-search-modal {
padding: 20px;
}
.rts-search-modal .search-wrapper .search-input {
font-size: 16px;
padding: 12px 50px 12px 16px;
}
}
/* -----------------------------------------------
13. FOOTER
----------------------------------------------- */
/* Footer desc max-width override on mobile */
@media (max-width: 767px) {
.footer-desc {
max-width: 100%;
font-size: 14px;
}
}
/* Footer widget — stack properly on mobile */
@media (max-width: 575px) {
.rts-footer-area .footer-widget-wrapper-area .single-widget {
margin-bottom: 30px;
}
.rts-footer-area .footer-widget-wrapper-area .single-widget .widget-info .single-info a {
font-size: 14px;
}
}
/* -----------------------------------------------
14. CONTAINER — prevent content exceeding viewport
----------------------------------------------- */
@media (max-width: 767px) {
.container {
padding-left: 16px;
padding-right: 16px;
}
}
@media (max-width: 480px) {
.container {
padding-left: 12px;
padding-right: 12px;
}
}
/* -----------------------------------------------
15. BLOG / NEWS CARD
----------------------------------------------- */
@media (max-width: 575px) {
.rts-blog-area .single-blog .blog-content .title,
.rts-news-area .single-news .news-content .title {
font-size: 18px;
line-height: 26px;
}
}
/* -----------------------------------------------
16. GENERAL IMAGE OVERFLOW GUARD
----------------------------------------------- */
img {
max-width: 100%;
height: auto;
}
/* -----------------------------------------------
17. ROW / COL — prevent Bootstrap gutter overflow
----------------------------------------------- */
@media (max-width: 480px) {
.row {
--bs-gutter-x: 16px;
}
}
/* -----------------------------------------------
18. TRACKING RESI SECTION
Design: card floats OVER the bottom edge of the
hero banner via negative margin-top, giving a
clean lifted-card effect with proper breathing room.
HTML snippet: tracking-section.blade.txt
----------------------------------------------- */
/* Section wrapper — pulls up to overlap banner bottom */
.rts-tracking-section {
position: relative;
z-index: 20; /* sit above the banner */
margin-top: -56px; /* overlap into banner bottom */
padding: 0 0 60px; /* space below card */
background: transparent; /* banner shows through the gap */
pointer-events: none; /* let banner events pass through */
}
.rts-tracking-section .container {
pointer-events: all;
}
/* Card */
.rts-tracking-section .tracking-card {
background: #ffffff;
border-radius: 18px;
box-shadow: 0 12px 48px rgba(11, 45, 77, 0.14);
padding: 36px 44px;
display: flex;
flex-direction: column;
gap: 18px;
}
/* Label */
.rts-tracking-section .tracking-label {
font-size: 15px;
font-weight: 700;
letter-spacing: 0.02em;
color: var(--color-heading, #0B2D4D);
}
/* Form row: [input ──────────] [button] [help text] */
.rts-tracking-section .tracking-form-row {
display: flex;
align-items: center;
gap: 16px;
}
/* Input field */
.rts-tracking-section .tracking-input {
flex: 1;
min-width: 0;
height: 54px;
padding: 0 22px;
border: 1.5px solid #dde1e8;
border-radius: 10px;
font-size: 15px;
font-family: var(--font-primary, sans-serif);
color: var(--color-heading, #0B2D4D);
background: #f8f9fb;
outline: none;
transition: border-color 0.22s ease, background 0.22s ease;
}
.rts-tracking-section .tracking-input:focus {
border-color: var(--color-primary, #FF770F);
background: #ffffff;
}
.rts-tracking-section .tracking-input::placeholder {
color: #b0b4bc;
}
/* Orange button */
.rts-tracking-section .tracking-btn {
flex-shrink: 0;
height: 54px;
padding: 0 36px;
background: var(--color-primary, #FF770F);
color: #ffffff;
border: none;
border-radius: 10px;
font-size: 15px;
font-weight: 700;
font-family: var(--font-primary, sans-serif);
cursor: pointer;
white-space: nowrap;
transition: background 0.2s ease, transform 0.15s ease;
box-shadow: 0 4px 14px rgba(255, 119, 15, 0.35);
}
.rts-tracking-section .tracking-btn:hover {
background: #e56800;
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(255, 119, 15, 0.40);
}
.rts-tracking-section .tracking-btn:active {
transform: translateY(0);
}
/* Help text */
.rts-tracking-section .tracking-help {
width: 100%;
text-align: center;
font-size: 13.5px;
color: var(--color-body, #868689);
line-height: 1.6;
margin-top: 10px;
}
.rts-tracking-section .tracking-help .tracking-help-link {
color: var(--color-primary, #FF770F);
font-weight: 700;
}
.rts-tracking-section .tracking-help .tracking-help-link:hover {
text-decoration: underline;
}
/* ── Tablet (≤ 991px) — includes iPad Mini 768px ── */
@media (max-width: 991px) {
.rts-tracking-section {
margin-top: -40px;
padding: 0 0 56px;
}
.rts-tracking-section .tracking-card {
padding: 28px 32px;
gap: 14px;
}
/* Stack: input full-width, then button full-width + centered */
.rts-tracking-section .tracking-form-row {
flex-wrap: wrap;
justify-content: center;
}
.rts-tracking-section .tracking-input {
flex-basis: 100%;
}
.rts-tracking-section .tracking-btn {
width: 100%;
max-width: 320px; /* proportional on iPad — not edge-to-edge */
align-self: center;
}
}
/* ── Large mobile (≤ 767px) ──────────────────── */
@media (max-width: 767px) {
.rts-tracking-section {
margin-top: -28px;
padding: 0 0 40px;
}
.rts-tracking-section .tracking-card {
padding: 24px 20px;
border-radius: 14px;
gap: 12px;
}
.rts-tracking-section .tracking-btn {
max-width: 100%; /* override tablet cap — full width on phone */
}
}
/* ── Small mobile (≤ 575px) ─────────────────── */
@media (max-width: 575px) {
.rts-tracking-section {
margin-top: -20px;
padding: 0 0 32px;
}
/* Full-width stack: input → button → help */
.rts-tracking-section .tracking-btn {
width: 100%;
flex: none;
}
}
/* ── Very small mobile (≤ 480px) ────────────── */
@media (max-width: 480px) {
.rts-tracking-section .tracking-card {
padding: 20px 16px;
}
.rts-tracking-section .tracking-input,
.rts-tracking-section .tracking-btn {
height: 48px;
font-size: 14px;
}
}
/* -----------------------------------------------
19. CTA SECTION TWO (rts-cta-area-two)
Three bugs on mobile:
A) background-attachment:fixed is broken on iOS —
the bg image appears cut off or blank entirely.
B) .cta-content-wrapper uses position:absolute +
left:50% / translate(-50%) with NO max-width,
so long heading text overflows the viewport edge.
C) Fixed height 300px at 575px is too small once
the heading wraps to 3+ lines — content gets
clipped by overflow:hidden.
----------------------------------------------- */
/* A — iOS parallax fix: switch to scroll on touch devices */
@media (max-width: 991px) {
.rts-cta-area-two {
background-attachment: scroll !important;
background-size: cover !important;
background-position: center center !important;
}
}
/* B — constrain the centred wrapper so text can't escape the viewport */
.rts-cta-area-two .cta-content-wrapper {
width: calc(100% - 40px);
max-width: 760px;
box-sizing: border-box;
padding: 0 20px;
}
/* C — replace fixed height with auto + min-height on mobile so
the section grows with its wrapped content */
@media (max-width: 767px) {
.rts-cta-area-two {
height: auto !important;
min-height: 380px;
padding: 64px 0;
overflow: visible;
}
/* Re-anchor the wrapper using normal flow inside a flex container
instead of the absolute positioning that causes overflow */
.rts-cta-area-two .container {
display: flex;
align-items: center;
justify-content: center;
min-height: inherit;
position: relative;
z-index: 1;
}
.rts-cta-area-two .cta-content-wrapper {
position: relative !important;
top: auto !important;
left: auto !important;
transform: none !important;
margin: 0 auto;
width: 100%;
max-width: 100%;
padding: 0 16px;
}
}
@media (max-width: 575px) {
.rts-cta-area-two {
min-height: auto;
padding: 48px 0;
}
.rts-cta-area-two .cta-content-wrapper {
padding: 0 12px;
}
/* Title already has 24px from theme at 575px — keep it, just ensure wrap */
.rts-cta-area-two .cta-content-wrapper .rts-section-title .title {
font-size: 22px;
line-height: 1.35;
word-break: keep-all;
}
.rts-cta-area-two .cta-content-wrapper .rts-section-title .desc {
font-size: 14px;
line-height: 1.6;
}
}
@media (max-width: 375px) {
.rts-cta-area-two {
padding: 40px 0;
}
.rts-cta-area-two .cta-content-wrapper .rts-section-title .title {
font-size: 20px;
}
}
/* -----------------------------------------------
HOW TO USE
-----------
1. Copy this file to:
public/assets/frontend/css/responsive-fixes.css
2. In your Laravel layout (resources/views/layouts/frontend/app.blade.php
or similar), add this line AFTER the existing style.css link:
3. No changes to the HTML or existing style.css are needed.
These rules override only where necessary using specificity and
the same breakpoints already used in style.css.
================================================ */