Common starter CSS styles along with media query sections.
Starter CSS
/* * * * * * FONTS * * * * * * */ /* * * * * * COLORS * * * * * */ body { --blue: #233d78; --light-blue: #5e84c3; --dark-blue: #0b1c35; --white: #ffffff; --black: #000000; --gray: #696c76; --light-gray: #c4c6c9; --green: #00824b; --light-green: #86c881; --yellow: #ffdd4f; } .white { color:var(--white) !important; } .black { color:var(--black) !important; } /* * * * * STARTER STYLES * * * * */ .display-none { display:none; } .my-clearfix { clear:both; } .appear-on-mobile { display:none; } .appear-on-tablet { display:none; } .no-margin { margin:0px !important } .no-padding { padding:0px !important } /* * * * * TYPOGRAPHY STYLES * * * * * */ .details-p { font-style:italic; font-size: .8em; } .italic { font-style:italic; } .center, .center p { text-align:center; } .bold { font-weight:600; } .normal-weight { font-weight:400; } .all-caps { text-transform:uppercase; } .capitalize { text-transform:capitalize; } p { line-height:1.3em; margin: 0 0 .8rem; } .big-p { font-size:1.2em; } h1, h2, h3, h4, h5, h6 { margin:0px; padding:0px; margin-bottom:5px; line-height:1em; } h1 { font-size:3em; font-weight:600; } h2 { font-size:2em; font-weight:600; } h3 { font-size:1.6em; font-weight:600; } h4 { font-size:1.6em; } h5 { font-size:1.3em; font-weight:600; } h6 { font-size:1.3em; } .small-heading { font-size:1.3em; } .medium-heading { font-size:1.6em; } .large-heading { font-size:2em; } /* * * * * MENU STYLES * * * * * */ /* * * * * FOOTER STYLES * * * * * */ /* * * * * GENERAL STYLES * * * * * */ .list-no-styles ul, .list-no-styles ul li { list-style:none; margin-left:0px; padding-left:0px; line-height:1em; } /* * * * * BUTTON STYLES * * * * * */ .full-width-button a.w-btn { width: 100% !important; } .full-width-button .w-btn-wrapper { width: 100% !important; } /* * * * * BLOG STYLES * * * * * */ /* * * * * ACCORDION/TAB STYLES * * * * * */ /* * * * * JOB MANAGER STYLES * * * * * */ /* fixes single page issues with WPBakery */ .type-job_listing .w-blogpost-preview, .type-job_listing .w-blogpost-meta { display:none; } .single_job_listing .meta, .job-manager-application-wrapper .application, .single_job_listing .application { max-width:1140px; margin:auto; } .job_description .l-section:first-child { padding-top:0px !important; } .single_job_listing .job_description { margin: 0; } .single_job_listing .application { margin-bottom:60px; } /* * * * * MEDIA QUERIES * * * * */ @media (min-width:320px) and (max-width:640px) { /* smartphones, iPhone, portrait 480x320 phones */ .disappear-on-mobile { display:none; } .appear-on-mobile { display:initial; } } @media (min-width:641px) and (max-width:780px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ .disappear-on-tablet { display:none; } .appear-on-tablet { display:initial; } .full-width-tablet { width:100%; } .half-width-tablet { width:50%; } } @media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ .full-width-tablet-landscape { width:100%; } .half-width-tablet-landscape { width:50%; } } @media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ } @media (min-width:1281px) { /* hi-res laptops and desktops */ }