/*========================================================== PixelPages — Global Responsive Stylesheet Covers all breakpoints: 1400 → 320px Loaded via common/header.php & login views ==========================================================*/ /* ── Viewport meta helper (ensure this is in ) ──── */ /* */ /*========================================================== BASE RESPONSIVE UTILITIES ==========================================================*/ /* Prevent horizontal overflow globally */ html, body { overflow-x: hidden; -webkit-text-size-adjust: 100%; } /* Fluid images & media everywhere */ img, video, iframe, canvas, svg { max-width: 100%; height: auto; } /* Fluid tables */ table { width: 100%; overflow-x: auto; display: block; } /*========================================================== 1400px — Large Desktop ==========================================================*/ @media (max-width: 1400px) { .pxg_admin_content { margin: 48px 80px 15px 388px; } } /*========================================================== 1200px — Small Desktop / Large Tablet ==========================================================*/ @media (max-width: 1200px) { .pxg_admin_content { margin: 48px 60px 15px 368px; } .pxg_performance_inner { flex-wrap: wrap; } .pxg_performance_inner .pxg_performance_status { flex-direction: row; width: 100%; flex-wrap: wrap; } .pxg_performance_status .pxg_dash_box { width: 100%; } /* Login */ .pxg_login_main .pxg_auth_login_box { max-width: 900px; } .pxg_login_main .pxg_auth_login_box .pxg_letf_auth h3 { font-size: 26px; } } /*========================================================== 1024px — Tablet Landscape / Sidebar Collapse ==========================================================*/ @media (max-width: 1024px) { /* Collapse sidebar off-screen */ .pxg_dashboard_section { left: -320px; z-index: 999; } .pxg_admin_content { margin: 48px 50px 15px 50px; } /* Hamburger toggle */ .toggle-btn { position: absolute; top: -35px; left: 0; cursor: pointer; height: 50px; width: 50px; display: block; } .toggle-btn span { width: 30px; height: 4px; border-radius: 5px; background: #FF4768; display: block; margin-top: 5px; transition: 0.3s ease; } .pxg_mini_toggle .toggle-btn { position: absolute; top: 27px; left: 30px; cursor: pointer; height: 50px; width: 50px; display: block; } .pxg_mini_toggle span:nth-child(1) { transform: rotate(45deg); top: 0; } .pxg_mini_toggle span:nth-child(2) { opacity: 0; } .pxg_mini_toggle span:nth-child(3) { transform: rotate(-45deg); } .pxg_mini_toggle .toggle-btn span { position: absolute; } .pxg_mini_toggle .toggle-btn { left: 85%; } /* Login */ .pxg_login_main .pxg_auth_login_box .pxg_letf_auth h3 { font-size: 26px; } .pxg_login_main .pxg_login_wrapper h3 { font-size: 26px; } } /*========================================================== 991px — Tablet Portrait ==========================================================*/ @media (max-width: 991px) { .pxg_template_list { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } .pxg_profile_wrapper .user_img { width: 40px; height: 40px; } .pxg_profile_wrapper .user_img img { height: 40px; max-width: 40px; } .pxg_plans_details { width: 100%; } .logo_wrapper a img { max-width: 180px; } .logo_wrapper { margin-bottom: 30px; } .pxg_dashboard_section { padding: 30px; width: 300px; } .pxg_mini_toggle .toggle-btn span { width: 25px; } .pxg_sidebar_bottom_content { width: 250px; left: 20px; } .main_menu li a { padding: 12px 0 12px 12px; } /* Login: hide left panel, full-width form */ .pxg_login_main .pxg_login_wrapper { border-radius: 20px; width: 100%; } .pxg_login_main .pxg_letf_auth_bg { display: none; } .pxg_login_main .pxg_auth_login_box { width: 100%; max-width: 520px; } /* DataTables scroll on narrow screens */ .dataTables_wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Settings tabs scroll */ .pxg_settng_menu_main ul { overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; } .pxg_settng_menu_main ul li { flex-shrink: 0; } /* Modal widths */ .pxg_common_model .modal-dialog { max-width: 90%; margin: 20px auto; } } /*========================================================== 768px — Small Tablet (iPad Mini etc.) ==========================================================*/ @media (max-width: 768px) { /* Template grid goes 2-col */ .pxg_template_list { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; } /* Settings tabs */ .pxg_settng_menu_main ul li a { font-size: 13px; padding: 8px 12px; } /* Notifications */ .pxg_notification { max-width: 280px; } /* Hide decorative vectors on login */ .pxg_shap.vector-4 { display: none; } } /*========================================================== 767px — Mobile Landscape ==========================================================*/ @media (max-width: 767px) { .pxg_dash_box .box_img img { width: auto; height: auto; min-width: auto; } .pxg_plans_inner_content .pxg_plans_details h2 { font-size: 22px; } .pxg_plans_inner_content .pxg_plans_details .edit_plan_btn { position: relative; top: 0; right: 0; margin-bottom: 10px; } .pxg_header_wrapper { justify-content: center; flex-wrap: wrap; gap: 10px; } .pxg_settng_menu_main ul li a { font-size: 14px; padding: 10px 0 15px 0; } .pxg_settings_tab_items { padding: 20px; } .pxg_common_model .pxg_model_btn { flex-wrap: wrap; } div.dataTables_wrapper div.dataTables_info { text-align: center; } .pxg_btn { height: 50px; line-height: 50px; } .pxg_header_wrapper .search_wrapper input { height: 50px; padding: 10px 20px 15px 55px; width: 100%; } .pxg_header_wrapper .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 50px; } .pxg_header_wrapper .select2-container--default .select2-selection--single { height: 50px; } .pxg_header_wrapper .select2-container--default .select2-selection--single .select2-selection__arrow { top: 20px; } .pxg_profile_wrapper_main .pxg_profile_banner { padding: 29px 70px 35px 70px; gap: 40px; background-position: right; } .pxg_profile_wrapper_main .profile_pic_button { gap: 20px; flex-direction: column; } .pxg_dash_box:after { right: -7px; height: 44px; } .pxg_admin_content { margin: 48px 40px 15px 40px; } .pxg_hdr_rgt_inner_content { justify-content: center; flex-wrap: wrap; } .pxg_performance_inner { display: flex; gap: 40px; margin-bottom: 20px; flex-wrap: wrap; } .pxg_performance_inner .pxg_performance_status { flex-wrap: wrap; } .pxg_dash_box .box_img { width: 60px; height: 60px; } .pxg_box_content h5 { font-size: 24px; } .pxg_table_pagination { justify-content: center; } .pxg_profile_wrapper_main .pxg_profile_details { padding: 30px 35px; position: relative; } /* Login: remove all vectors */ .pxg_shap.vector-1, .pxg_shap.vector-2, .pxg_shap.vector-3, .pxg_shap.vector-4 { display: none; } .pxg_login_main.pxg_fgt_password .pxg_btn_area { align-items: flex-start; } /* Forms: full width inputs */ .pxg_form_group input, .pxg_form_group select, .pxg_form_group textarea { width: 100% !important; } /* Make action buttons stack */ .pxg_action_btns, .pxg_form_buttons { flex-direction: column; gap: 10px; } } /*========================================================== 690px — Small Landscape ==========================================================*/ @media (max-width: 690px) { .pxg_performance_status .pxg_dash_box { width: 100%; } } /*========================================================== 575px — Mobile Portrait (Large Phones) ==========================================================*/ @media (max-width: 575px) { .pxg_plans_inner_content .pxg_plans_details h2 { font-size: 20px; } .pxg_plans_inner_content { flex-wrap: wrap; } .pxg_settng_menu_main ul li a.active::after, .pxg_settng_menu_main ul li a.active::before { display: none; } .pxg_settng_menu_main ul { padding: 0 15px; } .pxg_header_wrapper .pxg_hdr_rgt_inner_content .search_wrapper input { width: 100%; } .pxg_admin_content { margin: 48px 20px 15px 20px; } .pxg_box_content h5 { font-size: 20px; } .pxg_dash_box .box_img { width: 40px; height: 40px; } /* Template grid single column */ .pxg_template_list { grid-template-columns: 1fr; gap: 12px; } /* Login */ .pxg_login_main a.pxg_logo_ { margin-bottom: 10px; } .pxg_login_wrapper img { max-width: 184px; } .pxg_login_main .pxg_login_wrapper { padding: 25px; } .pxg_login_main .pxg_auth_login_box { max-width: 100%; margin: 0 15px; } .pxg_login_main .pxg_remember { flex-wrap: wrap; flex-direction: column; gap: 15px; align-items: center; } .pxg_login_main .pxg_login_wrapper .pxg_switch_toggle { margin-left: -60px; /* Offset the 50px margin of the p tag to perfectly center it */ } .pxg_login_main .pxg_login_wrapper .pxg_switch_toggle p { width: 120px; } .pxg_login_main .pxg_login_wrapper h3 { font-size: 22px; } .pxg_login_main .pxg_login_wrapper p { font-size: 14px; } .pxg_notification.success, .pxg_notification.error { right: 9px; } .pxg_notification { max-width: 300px; } /* Modals */ .pxg_common_model .modal-dialog { max-width: 95%; margin: 10px auto; } .pxg_common_model .modal-content { padding: 20px; } /* DataTables */ .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter { float: none; text-align: center; } .dataTables_wrapper .dataTables_paginate .paginate_button { padding: 5px 10px; font-size: 12px; } } /*========================================================== 480px — Small Phones ==========================================================*/ @media (max-width: 480px) { .pxg_admin_content { margin: 48px 15px 15px 15px; } /* Header adjustments */ .pxg_header_wrapper { padding: 10px 15px; } .pxg_header_wrapper .search_wrapper { width: 100%; } .pxg_header_wrapper .search_wrapper input { font-size: 13px; padding: 10px 15px 10px 45px; } /* Profile page */ .pxg_profile_wrapper_main .pxg_profile_banner { padding: 20px; gap: 20px; } .pxg_profile_wrapper_main .pxg_profile_details { padding: 20px 15px; } /* Settings */ .pxg_settings_tab_items { padding: 15px; } /* Plans */ .pxg_plans_inner_content .pxg_plans_details h2 { font-size: 18px; } .pxg_box_content h5 { font-size: 18px; } .pxg_box_content p { font-size: 12px; } /* Buttons full width */ .pxg_btn, .pxg_primary_btn, .pxg_secondary_btn { width: 100%; text-align: center; justify-content: center; } } /*========================================================== 390px — iPhone SE / Small Phones ==========================================================*/ @media (max-width: 390px) { .pxg_login_main .pxg_btn_area { flex-direction: column; gap: 15px; } .pxg_login_main .pxg_remember { flex-wrap: wrap; flex-direction: column; gap: 15px; margin-bottom: 20px; align-items: center; justify-content: center; } .pxg_login_main .pxg_login_wrapper { padding: 20px 15px; } .pxg_login_main .pxg_login_wrapper h3 { font-size: 20px; } .pxg_admin_content { margin: 48px 10px 15px 10px; } } /*========================================================== 375px — Very Small Phones ==========================================================*/ @media (max-width: 375px) { .pxg_profile_wrapper_main .pxg_profile_banner::before, .pxg_profile_wrapper_main .pxg_profile_banner::after { display: none; } .pxg_profile_wrapper_main .pxg_profile_banner { padding: 29px 20px 35px 20px; gap: 30px; flex-direction: column; background-position: bottom; } } /*========================================================== 320px — Minimum Supported Width ==========================================================*/ @media (max-width: 320px) { .pxg_admin_content { margin: 48px 8px 10px 8px; } .pxg_login_main .pxg_auth_login_box { margin: 0 8px; } .pxg_login_main .pxg_login_wrapper { padding: 15px 12px; } .pxg_login_main .pxg_login_wrapper h3 { font-size: 18px; } .pxg_box_content h5 { font-size: 16px; } .pxg_btn { font-size: 13px; height: 44px; line-height: 44px; } }