/* =============================================
Widget Farms LLC — Mobile Responsive Styles
Add
AFTER your existing style.css link
============================================= */
/* Viewport fix — most important line */
/* Make sure your has:
*/
/* ---- Hamburger button (hidden on desktop) ---- */
#mobile-menu-trigger {
display: none;
cursor: pointer;
padding: 8px;
z-index: 1000;
}
#mobile-menu-trigger .hamburger-bar {
display: block;
width: 24px;
height: 2px;
background: currentColor;
margin: 5px 0;
transition: transform 0.25s ease, opacity 0.25s ease;
border-radius: 2px;
}
#mobile-menu-trigger.is-open .hamburger-bar:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
#mobile-menu-trigger.is-open .hamburger-bar:nth-child(2) {
opacity: 0;
}
#mobile-menu-trigger.is-open .hamburger-bar:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/* ---- Mobile nav drawer ---- */
#mobile-nav-drawer {
display: none; /* shown only on mobile */
}
/* =============================================
MOBILE BREAKPOINT (≤768px)
============================================= */
@media (max-width: 768px) {
/* Show hamburger */
#mobile-menu-trigger {
display: flex;
flex-direction: column;
justify-content: center;
}
/* Hide the desktop nav */
#navigation {
display: none !important;
}
/* Header layout */
#header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
position: relative;
z-index: 200;
}
#sitename {
flex: 1;
}
#sitename img {
max-height: 40px;
width: auto;
}
/* Mobile nav drawer */
#mobile-nav-drawer {
display: block;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
position: relative;
z-index: 190;
background: inherit;
border-bottom: 1px solid rgba(0,0,0,0.08);
}
#mobile-nav-drawer.is-open {
max-height: 300px;
}
#mobile-nav-drawer ul {
list-style: none;
margin: 0;
padding: 0;
}
#mobile-nav-drawer ul li a {
display: block;
padding: 14px 20px;
font-size: 16px;
font-weight: 600;
text-decoration: none;
border-bottom: 1px solid rgba(0,0,0,0.06);
transition: background 0.15s;
}
#mobile-nav-drawer ul li:last-child a {
border-bottom: none;
}
#mobile-nav-drawer ul li#active a,
#mobile-nav-drawer ul li a:hover {
background: rgba(0,0,0,0.04);
}
/* Banner height reduction */
.wsite-section.wsite-header-section {
height: 180px !important;
min-height: 180px !important;
}
/* Content padding */
#content-wrapper,
.container {
padding-left: 16px !important;
padding-right: 16px !important;
}
/* Body text readable on small screens */
.paragraph,
.paragraph p {
font-size: 15px !important;
line-height: 1.75 !important;
}
/* Footer nav — already exists in your HTML as #navmobile */
#navmobile {
display: block !important;
}
/* General image scaling */
img {
max-width: 100%;
height: auto;
}
/* Remove horizontal overflow */
body,
#wrapper,
.bg-wrapper,
#content-wrapper {
overflow-x: hidden;
max-width: 100vw;
}
/* Multi-column sections → single column */
.wsite-multicol-col {
width: 100% !important;
display: block !important;
}
.wsite-multicol-table,
.wsite-multicol-tbody,
.wsite-multicol-tr {
display: block !important;
width: 100% !important;
}
}
/* =============================================
TABLET BREAKPOINT (769px–1024px)
============================================= */
@media (min-width: 769px) and (max-width: 1024px) {
#content-wrapper,
.container {
padding-left: 24px !important;
padding-right: 24px !important;
}
.wsite-section.wsite-header-section {
height: 220px !important;
}
}