/* ========================================================= rainforest.co.jp - index page override CSS Purpose: 1) fix calendar display 2) fix mobile layout How to use: place this file in the same folder as main.css / main_1H_2c.css, then add this line in index.html , right after the main_1H_2c.css line: ========================================================= */ *, *::before, *::after { box-sizing: border-box; } /* --------------------------------------------------------- 1. Remove the fixed 650px width wrapper This was the main cause of the tiny mobile display. --------------------------------------------------------- */ div[style*="width:650px"], div[style*="width: 650px"] { width: 100% !important; max-width: 900px; margin: 0 auto; } #hpb-container, #hpb-header, #hpb-inner, #hpb-wrapper, #hpb-main, #hpb-nav, #hpb-aside { max-width: 100%; } /* --------------------------------------------------------- 2. Make the calendar easier to see Target by the Google Calendar URL itself, so this works no matter which block (#companyinfo, #company, etc.) the iframe happens to be placed in on a given page. --------------------------------------------------------- */ #companyinfo { padding: 12px; } iframe[src*="calendar.google.com"] { width: 100% !important; max-width: 600px !important; height: 650px !important; border: 1px solid #ccc !important; border-radius: 4px; margin-top: 6px; display: block; } /* --------------------------------------------------------- 3. Mobile / tablet layout (768px and below) - single column --------------------------------------------------------- */ @media screen and (max-width: 768px) { #hpb-inner { display: flex; flex-direction: column; width: 100% !important; } #hpb-header, #hpb-wrapper, #hpb-main, #hpb-nav, #hpb-aside { width: 100% !important; float: none !important; margin: 0 0 24px 0 !important; } /* Display order: main content -> nav -> store info/calendar */ #hpb-wrapper { order: 1; } #hpb-nav { order: 2; } #hpb-aside { order: 3; } #hpb-title h2 { width: 100% !important; height: 55vw !important; max-height: 280px; } iframe[src*="calendar.google.com"] { height: 600px !important; } h1 { font-size: 1.05rem; line-height: 1.5; } table.day { width: 100%; } table.day td, table.day th { display: block; width: 100% !important; } } @media screen and (max-width: 420px) { #hpb-title h2 { height: 60vw !important; } }