Skip to content

Jeff Balicki / st_joseph

Go to a project
Toggle navigation
Toggle navigation pinning
577b4694 by Jeff Balicki
Options

mobile 

Signed-off-by: Jeff <jeff@gotenzing.com>
1 parent 8dc333f1
Inline Side-by-side
Showing 15 changed files with 241 additions and 41 deletions
......@@ -12,6 +12,11 @@
padding:0px 50%;
}
@media only screen and (max-width: 768px) {
.call-out-block{
padding: 40px 50%;
}
}
.call-out-block h2{
text-align: center;
......
......@@ -14469,7 +14469,7 @@ body {
font-family: "Open Sans", sans-serif;
}
@media only screen and (max-width: 768px) {
@media only screen and (max-width: 600px) {
.site {
overflow-x: hidden;
}
......@@ -14629,6 +14629,11 @@ input[type=checkbox] {
height: 57px;
display: flex;
}
@media only screen and (max-width: 768px) {
.pre-header {
font-size: 15px;
}
}
.pre-header .sponsored {
text-align: right;
}
......@@ -14647,6 +14652,11 @@ input[type=checkbox] {
height: 128px;
transition: 0.4s;
}
@media only screen and (max-width: 768px) {
#main-nav {
height: auto;
}
}
#main-nav .custom-logo-link {
margin-left: 0px;
}
......@@ -14726,6 +14736,7 @@ input[type=checkbox] {
}
@media only screen and (max-width: 768px) {
#main-nav .mobile {
text-transform: uppercase;
display: block;
visibility: visible;
}
......@@ -14792,7 +14803,7 @@ input[type=checkbox] {
width: 60%;
height: 520px;
}
@media only screen and (max-width: 768px) {
@media only screen and (max-width: 900px) {
.hero-content {
width: 95%;
margin: auto;
......@@ -14892,7 +14903,8 @@ input[type=checkbox] {
@media only screen and (max-width: 768px) {
.search .search-form .search-submit {
left: unset;
margin-left: -10%;
float: right;
top: -40px;
}
}
.search .search-form .search-submit:hover {
......@@ -14949,8 +14961,9 @@ input[type=checkbox] {
.navbar-toggler {
position: absolute;
top: 40px;
top: 30px;
right: 20px;
border-color: transparent !important;
}
.fixed-top .navbar-toggler {
......@@ -14962,7 +14975,6 @@ input[type=checkbox] {
background-color: #fff;
z-index: 99;
width: 100vw;
position: relative;
margin-top: -2px;
padding: 20px 30px;
}
......@@ -14975,6 +14987,30 @@ input[type=checkbox] {
}
}
.navbar-toggler:focus {
color: rgba(0, 0, 0, 0);
border-color: rgba(0, 0, 0, 0);
}
.hamburger .line {
width: 35px;
height: 4px;
background-color: #0484b8;
display: block;
margin: 8px auto;
transition: all 0.3s ease-in-out;
}
.navbar-toggler:not(.collapsed) .hamburger .line:nth-child(2) {
opacity: 0;
}
.navbar-toggler:not(.collapsed) .hamburger .line:nth-child(1) {
transform: translateY(13px) rotate(45deg);
}
.navbar-toggler:not(.collapsed) .hamburger .line:nth-child(3) {
transform: translateY(-11px) rotate(-45deg);
}
#wrapper-footer-full {
background-color: #fff;
padding-bottom: 0px;
......@@ -14990,6 +15026,11 @@ input[type=checkbox] {
height: 4px;
background-color: #ffa300;
}
@media only screen and (max-width: 768px) {
#wrapper-footer-full #footer-full-content .footer-widget .wp-block-columns .wp-block-column:nth-of-type(2) ::before {
margin: 0px 0px 10px 0px;
}
}
#wrapper-footer-full #footer-full-content .footer-widget .wp-block-columns .wp-block-column:nth-of-type(3) ::before {
content: "";
margin: 20px 0px;
......@@ -14998,6 +15039,11 @@ input[type=checkbox] {
height: 4px;
background-color: #3f9c35;
}
@media only screen and (max-width: 768px) {
#wrapper-footer-full #footer-full-content .footer-widget .wp-block-columns .wp-block-column:nth-of-type(3) ::before {
margin: 0px 0px 20px 0px;
}
}
#wrapper-footer-full #footer-full-content .footer-widget .wp-block-columns .wp-block-column:nth-of-type(4) p::before {
content: "";
margin: 20px 0px;
......@@ -15006,6 +15052,11 @@ input[type=checkbox] {
height: 4px;
background-color: #e04e39;
}
@media only screen and (max-width: 768px) {
#wrapper-footer-full #footer-full-content .footer-widget .wp-block-columns .wp-block-column:nth-of-type(4) p::before {
margin: 0px 0px 20px 0px;
}
}
.newsletter {
background-color: #6ed5ff;
......@@ -15103,7 +15154,7 @@ input[type=checkbox] {
padding-inline-start: 20px;
background-color: transparent !important;
}
@media only screen and (max-width: 600px) {
@media only screen and (max-width: 768px) {
.carousel-items {
-webkit-padding-start: 0px;
padding-inline-start: 0px;
......@@ -15125,7 +15176,7 @@ input[type=checkbox] {
left: 0 !important;
min-height: 340px !important;
}
@media only screen and (max-width: 600px) {
@media only screen and (max-width: 768px) {
.carousel {
width: 95%;
margin-left: 0px;
......@@ -15137,7 +15188,7 @@ input[type=checkbox] {
.carousel .swiper-button-prev {
left: 7px !important;
}
@media only screen and (max-width: 600px) {
@media only screen and (max-width: 768px) {
.carousel .swiper-button-prev {
left: -5px !important;
}
......@@ -15152,7 +15203,7 @@ input[type=checkbox] {
gap: 1rem;
}
@media only screen and (max-width: 600px) {
@media only screen and (max-width: 768px) {
.testimonials-carousel {
margin-left: 0px !important;
}
......@@ -15160,9 +15211,10 @@ input[type=checkbox] {
.testimonials-carousel .swiper-slide {
width: 890px !important;
}
@media only screen and (max-width: 600px) {
@media only screen and (max-width: 768px) {
.testimonials-carousel .swiper-slide {
width: 98% !important;
width: 100% !important;
padding-left: 0px;
}
}
.testimonials-carousel .swiper-slide .testimonials {
......@@ -15171,9 +15223,9 @@ input[type=checkbox] {
border-radius: 25px 25px 0px 0px;
margin-right: 20px;
}
@media only screen and (max-width: 600px) {
@media only screen and (max-width: 768px) {
.testimonials-carousel .swiper-slide .testimonials {
width: 98%;
width: 100% !important;
margin-right: 0px;
}
}
......@@ -15183,7 +15235,7 @@ input[type=checkbox] {
margin-left: -15px !important;
min-height: 316px !important;
}
@media only screen and (max-width: 600px) {
@media only screen and (max-width: 768px) {
.testimonials-carousel .swiper-slide .testimonials .row {
margin-left: 0px !important;
}
......@@ -15191,7 +15243,7 @@ input[type=checkbox] {
.testimonials-carousel .swiper-slide .testimonials .col-md-1 {
background-size: cover;
}
@media only screen and (max-width: 600px) {
@media only screen and (max-width: 768px) {
.testimonials-carousel .swiper-slide .testimonials .col-md-1 {
padding-left: 0px;
}
......@@ -15267,9 +15319,9 @@ input[type=checkbox] {
max-width: 1344px;
}
}
@media only screen and (max-width: 600px) {
@media only screen and (max-width: 768px) {
.promo-carousel .swiper-slide .promo.row {
width: 80%;
width: 100%;
}
}
.promo-carousel .swiper-slide .promo_content {
......@@ -15470,6 +15522,11 @@ label[for=quicksearch] {
width: 600px;
border-bottom: 1px solid #8e908f !important;
}
@media only screen and (max-width: 1100px) {
#quicksearch {
width: 100%;
}
}
.filters {
border-bottom: 1px solid #ffa300 !important;
......@@ -15499,6 +15556,20 @@ label[for=quicksearch] {
justify-content: space-between;
margin-bottom: 20px;
}
@media only screen and (max-width: 1100px) {
.filters .filter-group {
flex-direction: column;
}
}
.filters .filter-group .sort-button-group {
align-self: flex-end;
}
@media only screen and (max-width: 1100px) {
.filters .filter-group .sort-button-group {
align-self: inherit;
margin-top: 20px;
}
}
.filters .filter-group .sort-button-group .btn, .filters .filter-group .sort-button-group .wpcf7 input[type=submit], .wpcf7 .filters .filter-group .sort-button-group input[type=submit], .filters .filter-group .sort-button-group .woocommerce-notices-wrapper .woocommerce-message a.button, .woocommerce-notices-wrapper .woocommerce-message .filters .filter-group .sort-button-group a.button, .filters .filter-group .sort-button-group .woocommerce-info a.button, .woocommerce-info .filters .filter-group .sort-button-group a.button {
border: 1px solid #0081bc;
}
......@@ -15510,6 +15581,11 @@ label[for=quicksearch] {
display: flex;
flex-direction: row;
}
@media only screen and (max-width: 1100px) {
.category-filter-group {
flex-direction: column;
}
}
.category-type,
.category-filter {
......@@ -15521,6 +15597,12 @@ label[for=quicksearch] {
margin: 0.25rem 0;
margin-right: 1rem;
}
@media only screen and (max-width: 1100px) {
.category-type,
.category-filter {
flex-direction: column;
}
}
.category-type label,
.category-filter label {
padding-left: 30px;
......@@ -15689,6 +15771,12 @@ label[for=quicksearch] {
margin: 15px;
padding: 10px;
}
@media only screen and (max-width: 768px) {
.course-list:not(.resources) .element-item {
width: calc(100% - 30px);
height: auto;
}
}
.course-list.resources .element-item {
position: relative;
......@@ -15892,6 +15980,11 @@ td.hidden {
padding: 21px 22px;
width: 100%;
}
@media only screen and (max-width: 768px) {
.table-like__item {
height: auto;
}
}
.table-like__item .item {
width: 100%;
}
......@@ -15921,12 +16014,28 @@ td.hidden {
.resources .category-filter-group {
flex-direction: column;
}
@media only screen and (max-width: 1200px) {
.resources .category-filter-group {
width: 80%;
}
}
.resources .category-filter-group .category {
display: flex;
}
@media only screen and (max-width: 1100px) {
.resources .category-filter-group .category {
flex-direction: column;
margin-bottom: 20px;
}
}
.resources .category-filter-group .type {
display: flex;
}
@media only screen and (max-width: 1100px) {
.resources .category-filter-group .type {
flex-direction: column;
}
}
.toolkit:before {
height: 50px;
......
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
......@@ -19,7 +19,7 @@ if(get_post_meta(get_the_id(), 'newsletter_sign_up', true) || get_post_type( get
</div>
<?php } ?>
<?php get_template_part( 'sidebar-templates/sidebar', 'footerfull' ); ?>
<!--
<div class="wrapper" id="wrapper-footer">
<div class="<?php echo esc_attr( $container ); ?>">
......
......@@ -25,7 +25,7 @@ $container = get_theme_mod( 'understrap_container_type' );
<?php get_template_part( 'global-templates/navbar-branding' ); ?>
<button
class="navbar-toggler"
class="navbar-toggler collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNavDropdown"
......@@ -33,7 +33,11 @@ $container = get_theme_mod( 'understrap_container_type' );
aria-expanded="false"
aria-label="<?php esc_attr_e( 'Toggle navigation', 'understrap' ); ?>"
>
<span class="navbar-toggler-icon"></span>
<div class="hamburger">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</div>
</button>
<div class="row">
......
......@@ -26,7 +26,7 @@ function course_list(){
<div class="category-filter"> <input id="<?php echo $term->slug ; ?>" value=".<?php echo $term->slug ; ?>" type="checkbox" class="sr-only"><label for="<?php echo $term->slug ; ?>"><?php echo $term->name ; ?></label></div>
<?php }; ?>
</div>
<div class="btn-group sort-button-group align-self-end">
<div class="btn-group sort-button-group">
<button class="btn btn-light" data-sort-direction="asc" data-sort-value="coursename" type="button">Name <span aria-hidden="true" class="glyphicon glyphicon-chevron-up"></span></button>
<button class="btn btn-light" data-sort-direction="asc" data-sort-value="coursedate" type="button">Date <span aria-hidden="true" class="glyphicon glyphicon-chevron-up"></span></button>
</div>
......
......@@ -38,7 +38,7 @@ function resources_list(){
<?php }; ?>
</div>
</div>
<div class="btn-group sort-button-group align-self-end">
<div class="btn-group sort-button-group">
<button class="btn btn-light" data-sort-direction="asc" data-sort-value="1" type="button">Name <span aria-hidden="true" class="glyphicon glyphicon-chevron-up"></span></button>
<button class="btn btn-light" data-sort-direction="asc" data-sort-value="3" type="button">Date <span aria-hidden="true" class="glyphicon glyphicon-chevron-up"></span></button>
</div>
......
......@@ -27,7 +27,7 @@
margin-inline-end: 0px;
padding-inline-start: 20px;
background-color: transparent !important;
@media only screen and (max-width: 600px) {
@media only screen and (max-width: 768px) {
padding-inline-start: 0px;
}
}
......@@ -44,7 +44,7 @@
.carousel {
width: 100vw;
margin-left: calc((100% - 100vw) / 2);
@media only screen and (max-width: 600px) {
@media only screen and (max-width: 768px) {
width: 95%;
margin-left: 0px;
}
......@@ -55,7 +55,7 @@
}
.swiper-button-prev {
left: 7px !important;
@media only screen and (max-width: 600px) {
@media only screen and (max-width: 768px) {
left: -5px !important;
}
}
......@@ -72,21 +72,22 @@
// testimonials carousel css
.testimonials-carousel {
@media only screen and (max-width: 600px) {
@media only screen and (max-width: 768px) {
margin-left: 0px !important;
}
.swiper-slide {
width: 890px !important;
@media only screen and (max-width: 600px) {
width: 98% !important;
@media only screen and (max-width: 768px) {
width: 100% !important;
padding-left:0px;
}
.testimonials {
width: 890px;
background: #e5f2f8;
border-radius: 25px 25px 0px 0px;
margin-right: 20px;
@media only screen and (max-width: 600px) {
width: 98%;
@media only screen and (max-width: 768px) {
width: 100% !important;
margin-right: 0px;
}
.row {
......@@ -94,14 +95,14 @@
border-bottom: 20px solid #ffa300;
margin-left: -15px !important;
min-height: 316px !important;
@media only screen and (max-width: 600px) {
@media only screen and (max-width: 768px) {
margin-left: 0px !important;
}
}
.col-md-1 {
background-size: cover;
@media only screen and (max-width: 600px) {
@media only screen and (max-width: 768px) {
padding-left: 0px;
}
}
......@@ -183,8 +184,8 @@
@media only screen and (min-width: 1400px) {
max-width: 1344px;
}
@media only screen and (max-width: 600px) {
width: 80%;
@media only screen and (max-width: 768px) {
width: 100%;
}
margin: 40px auto;
padding: 50px 0px;
......
......@@ -4,7 +4,7 @@ body{
font-family: 'Open Sans', sans-serif;
}
@media only screen and (max-width: 768px) {
@media only screen and (max-width: 600px) {
.site{
overflow-x: hidden;
}
......
......@@ -8,6 +8,9 @@ label[for="quicksearch"] {
}
#quicksearch {
width: 600px;
@media only screen and (max-width:1100px) {
width: 100%;
}
border-bottom: 1px solid #8e908f !important;
}
.filters {
......@@ -36,7 +39,15 @@ label[for="quicksearch"] {
flex-direction: row;
justify-content: space-between;
margin-bottom: 20px;
@media only screen and (max-width: 1100px) {
flex-direction: column;
}
.sort-button-group {
align-self: flex-end;
@media only screen and (max-width: 1100px) {
align-self:inherit;
margin-top: 20px;
}
.btn {
border: 1px solid #0081bc;
}
......@@ -49,11 +60,17 @@ label[for="quicksearch"] {
.category-filter-group {
display: flex;
flex-direction: row;
@media only screen and (max-width: 1100px) {
flex-direction: column;
}
}
.category-type,
.category-filter {
display: flex;
flex-direction: row;
@media only screen and (max-width: 1100px) {
flex-direction: column;
}
font-size: 18px;
font-size: 1.125rem;
color: #515151;
......@@ -224,6 +241,10 @@ label[for="quicksearch"] {
float: left;
width: calc(33.33% - 30px);
height: 600px;
@media only screen and (max-width: 768px) {
width: calc(100% - 30px);
height: auto;
}
margin: 15px;
padding: 10px;
}
......
......@@ -14,6 +14,9 @@
display: block;
width: 120px;
height: 4px;
@media only screen and (max-width: 768px) {
margin: 00px 0px 10px 0px;;
}
background-color: #ffa300;
}
}
......@@ -25,6 +28,9 @@
width: 120px;
height: 4px;
background-color: #3f9c35;
@media only screen and (max-width: 768px) {
margin: 00px 0px 20px 0px;;
}
}
}
.wp-block-column:nth-of-type(4) {
......@@ -35,6 +41,9 @@
width: 120px;
height: 4px;
background-color: #e04e39;
@media only screen and (max-width: 768px) {
margin: 00px 0px 20px 0px;;
}
}
}
}
......
......@@ -3,6 +3,9 @@
color: #fff;
height: 57px;
display: flex;
@media only screen and (max-width: 768px) {
font-size: 15px;
}
.sponsored {
text-align: right;
.logo {
......@@ -20,6 +23,9 @@
background-color: #fff;
height: 128px;
transition: 0.4s;
@media only screen and (max-width: 768px) {
height: auto;
}
.custom-logo-link {
margin-left: 0px;
@media only screen and (max-width: 768px) {
......@@ -98,6 +104,7 @@
display: none;
visibility: hidden;
@media only screen and (max-width: 768px) {
text-transform: uppercase;
display: block;
visibility:visible;
}
......@@ -159,7 +166,7 @@
.hero-content {
width: 60%;
height: 520px;
@media only screen and (max-width: 768px) {
@media only screen and (max-width: 900px) {
width: 95%;
margin: auto;
}
......@@ -257,7 +264,9 @@
left: -56px;
@media only screen and (max-width: 768px) {
left: unset;
margin-left: -10%;
float: right;
top: -40px;
}
}
......@@ -311,8 +320,9 @@
.navbar-toggler{
position: absolute;
top: 40px;
top: 30px;
right: 20px;
border-color:transparent !important ;
}
.fixed-top{
.navbar-toggler{
......@@ -326,19 +336,47 @@
background-color: #fff;
z-index: 99;
width: 100vw;
position: relative;
margin-top: -2px;
padding: 20px 30px;
}
}
#navbarNavDropdown.show {
}
.pre-header .container,
.nav-container{
@media only screen and (max-width: 1000px) {
max-width: unset !important;
}
}
.navbar-toggler:focus{
color: rgba(0,0,0,.0);
border-color: rgba(0,0,0,.0);
}
.hamburger .line{
width: 35px;
height: 4px;
background-color: #0484b8;
display: block;
margin: 8px auto;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.navbar-toggler:not(.collapsed){
.hamburger .line:nth-child(2){
opacity: 0;
}
.hamburger .line:nth-child(1){
transform: translateY(13px) rotate(45deg);
}
.hamburger .line:nth-child(3){
transform: translateY(-11px) rotate(-45deg);
}
}
\ No newline at end of file
......
......@@ -72,6 +72,9 @@ td.hidden {
margin-bottom: 20px;
border-radius: 10px;
height: 130px;
@media only screen and (max-width: 768px) {
height: auto;
}
background: #ffffff 0% 0% no-repeat padding-box;
box-shadow: 0px 3px 6px #00000029;
padding: 21px 22px;
......@@ -104,12 +107,22 @@ td.hidden {
.resources {
.category-filter-group {
flex-direction: column;
@media only screen and (max-width: 1200px) {
width: 80%;
}
.category {
display: flex;
@media only screen and (max-width: 1100px) {
flex-direction: column;
margin-bottom: 20px;
}
}
.type {
display: flex;
@media only screen and (max-width: 1100px) {
flex-direction: column;
}
}
}
}
......