.hero-panel-text {margin-top:35px; } .hero-panel-text h2 {font-size: 24px; color:#333;} .hero-panel-text p {font-family:Michroma; color:#333; font-size: 1.8rem; line-height:2rem;} @media only screen and (max-width: 640px) {.hero-panel-text h1 {font-size:19px;} .hero-panel-text p {font-size:13px; padding-right: 20px;}} @media only screen and (max-width: 1280px) {.hero-panel-text p {font-size:16px;}} @media only screen and (max-width: 900px) {.hero-panel-text p {font-size:1.5rem; line-height:1.6rem;}} @media only screen and (max-width: 700px) {.hero-panel-text p {font-size:1.5rem; line-height:1.8rem;}} @media only screen and (max-width: 500px) {.hero-panel-text p {font-size:1.3rem; line-height:1.6rem;}} @media only screen and (max-width: 430px) {.hero-panel-text p {font-size:1.3rem; line-height:1.6rem; color:#000}} .modules-header-text {margin-top:0;} .modules-header-text h1 {padding: 0 2%;} /********************************************************** Flex container used on 'news' page **********************************************************/ .news { display:flex; flex-direction:row; text-align:left; justify-content:left; /**don't think there is a justify-content:left; so presumably this isn't doing anything, check **/ width:100%; margin:0 auto 8px; padding:0; border11111:1px solid #000; } /****images centered horiz by default***/ .news img {display:block; margin: 0 auto;} .c1-news {width:70%; padding:0 2%; border11111:1px solid red;} .c2-news {width:30%; padding:0 3% 0 1%; border11111:1px solid red;} /********** within media query **********/ @media only screen and (max-width:640px) { .c1-news {width:60%; padding:0 2%; border11111:1px solid red;} .c2-news {width:40%; padding:0 3% 0 1%; border11111:1px solid red;} } @media only screen and (max-width:440px) { .news {flex-direction:column; text-align: left; justify-content:left; align-items:center; /*centres vert when dir=row ****/ /**********NOT SURE IF THIS IS DOING ANYTHING - CHECK ********/ width:92%; padding: 0 4%; margin: 0 auto 20px 0;} .c1-news, .c2-news {width:100%; padding:0 1%; border1111:1px solid red;} .c1-news img, .c2-news img {max-width:80%;} } .vertical-spacer {padding-top:6px;} .one-col {margin-bottom:-50px;} /************************************************************************************ Responsive Table ************************************************************************************/ /* Generic Styling, for Desktops/Laptops */ table {width: 100%; border-collapse: collapse; font-size: 14px; padding-right:20px;} /* Zebra striping */ /*--the background of 'odd' changes depending on whether a white or light-grey background Try to use background: #dddee0; within the light-grey background div */ table tr:nth-of-type(odd) {background111111111: #f1f6ff; font-size: 14px;} th {background: #666; color: white; font-weight: bold; font-size: 14px;} td, th {padding: 7px; border1: 1px solid #e5e5e6; text-align: left; font-size: 17px;} /* size determines size of the text on larger screens, where content displays in rows */ /*-- Query takes effect for any screen smaller than 560px---*/ @media only screen and (max-width: 560px) { /* Force table to not be like tables anymore */ table, thead, tbody, th, td, tr {display: block; font-size: 15px; } /* Hide table headers (but not display: none;, for accessibility) */ thead tr {position: absolute; top: -9999px; left: -9999px; font-size: 14px;} tr {margin: 0 0 1rem 0; font-size: 14px;} tr:nth-child(odd) {background: transparent; font-size: 14px;} /*bkgrnd of table rows when in vert format*/ td { /* Behave like a "row" */ border: none; border-bottom1: 1px solid #eee; position: relative; width:100%; /************************important so takes up full width padding-left1: 35%; font-size: 16px; /* size determines size of the text pack, description, price, purchase */ } td:before { /* Now like a table header */ position: absolute; /* Top/left values mimic padding */ top: 0; left: 6px; width: 45%; /* I tried changing this to 60% and seemed to work fine too, 45% was default size */ padding-right: 10px; white-space: nowrap; padding-top: 10px; font-size: 16px; /* size determines size of the text pack, description, price, purchase */ } /*Label the data You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.*/ } .spacer-content-cell {padding-left:5px; color:#333;} @media only screen and (max-width: 560px) {.spacer-content-cell {margin-top:-12px;}} @media only screen and (min-width: 740px) {.vert-space-between-tables {padding-top:30px;}} .thumbnail-caption p {font-size:12px; line-height:13px; text-align:center; margin-top:3px; } @media only screen and (max-width: 560px) {.thumbnail-photo img {margin-top:-18px;} .thumbnail-caption p {margin-bottom:-22px;}} #link-within-text {border:1px solid #bfbebe; padding:4px; width:200px; text-align:center; border-radius:4px; margin-top:8px;} @media only screen and (max-width: 560px) {#link-within-text {width:175px;}} .sales-n-america {padding: 0 28px; margin-top:-10px;} @media only screen and (max-width: 560px) {.table-hide-when-one-col { display:none !important; }} /**** doesn't work, don't know why ********/ @media only screen and (min-width: 561px) {.table-display-when-one-col { display:none !important; }} /**** doesn't work, don't know why ********/ .blogik {padding: 0 28px; margin-top:-10px;} .blogik h3 {font-size:15px; font-weight:600; margin-bottom:15px;} .bkgrnd-light-grey-above-break--white-below-break {background:#e6e6e6; margin: 0 auto; padding:60px 0;} @media only screen and (max-width: 560px) {.bkgrnd-light-grey-above-break--white-below-break {background:#fff;} } @media only screen and (max-width: 740px) {.c80-1 {margin-left:-20px;}}