Skip to content

Jeff Balicki / stellervista-micro

Go to a project
Toggle navigation
Toggle navigation pinning
1a5d039b by Jeff Balicki
Options

mobile 

Signed-off-by: Jeff <jeff@gotenzing.com>
1 parent 3f0556e7
Inline Side-by-side
Showing 8 changed files with 144 additions and 7 deletions
...@@ -14928,6 +14928,17 @@ figure.woocommerce-product-gallery__wrapper { ...@@ -14928,6 +14928,17 @@ figure.woocommerce-product-gallery__wrapper {
14928 background-color: #fff; 14928 background-color: #fff;
14929 } 14929 }
14930 14930
14931 .home-header-moibile {
14932 display: none;
14933 }
14934 @media (max-width: 600px) {
14935 .home-header-moibile {
14936 position: relative;
14937 top: 123px;
14938 display: block;
14939 }
14940 }
14941
14931 .home-header { 14942 .home-header {
14932 position: relative; 14943 position: relative;
14933 height: 100%; 14944 height: 100%;
...@@ -14941,12 +14952,25 @@ figure.woocommerce-product-gallery__wrapper { ...@@ -14941,12 +14952,25 @@ figure.woocommerce-product-gallery__wrapper {
14941 flex-wrap: wrap; 14952 flex-wrap: wrap;
14942 top: 120px; 14953 top: 120px;
14943 } 14954 }
14955 @media (max-width: 600px) {
14956 .home-header {
14957 background-image: none !important;
14958 background-color: #183668 !important;
14959 min-height: 390px;
14960 }
14961 }
14944 .home-header .content-container { 14962 .home-header .content-container {
14945 margin-left: 35%; 14963 margin-left: 35%;
14946 width: 100%; 14964 width: 100%;
14947 max-width: 600px; 14965 max-width: 600px;
14948 padding-bottom: 60px; 14966 padding-bottom: 60px;
14949 } 14967 }
14968 @media (max-width: 600px) {
14969 .home-header .content-container {
14970 margin-left: 40px;
14971 padding-bottom: 100px;
14972 }
14973 }
14950 .home-header .content-container h1, .home-header .content-container .h1, 14974 .home-header .content-container h1, .home-header .content-container .h1,
14951 .home-header .content-container h2, 14975 .home-header .content-container h2,
14952 .home-header .content-container .h2 { 14976 .home-header .content-container .h2 {
...@@ -14958,12 +14982,19 @@ figure.woocommerce-product-gallery__wrapper { ...@@ -14958,12 +14982,19 @@ figure.woocommerce-product-gallery__wrapper {
14958 line-height: 50px; 14982 line-height: 50px;
14959 font-weight: 300; 14983 font-weight: 300;
14960 } 14984 }
14985 @media (max-width: 600px) {
14986 .home-header .content-container h1, .home-header .content-container .h1,
14987 .home-header .content-container h2,
14988 .home-header .content-container .h2 {
14989 color: #fff;
14990 }
14991 }
14961 @media only screen and (max-width: 782px) { 14992 @media only screen and (max-width: 782px) {
14962 .home-header .content-container h1, .home-header .content-container .h1, 14993 .home-header .content-container h1, .home-header .content-container .h1,
14963 .home-header .content-container h2, 14994 .home-header .content-container h2,
14964 .home-header .content-container .h2 { 14995 .home-header .content-container .h2 {
14965 font-size: 18px; 14996 font-size: 30px;
14966 line-height: 22px; 14997 line-height: 40px;
14967 } 14998 }
14968 } 14999 }
14969 .home-header .content-container h1, .home-header .content-container .h1 { 15000 .home-header .content-container h1, .home-header .content-container .h1 {
...@@ -14995,7 +15026,6 @@ figure.woocommerce-product-gallery__wrapper { ...@@ -14995,7 +15026,6 @@ figure.woocommerce-product-gallery__wrapper {
14995 position: relative; 15026 position: relative;
14996 z-index: 99; 15027 z-index: 99;
14997 } 15028 }
14998
14999 h1, .h1 { 15029 h1, .h1 {
15000 color: #183668; 15030 color: #183668;
15001 font-size: 32px; 15031 font-size: 32px;
...@@ -15185,6 +15215,11 @@ element.style { ...@@ -15185,6 +15215,11 @@ element.style {
15185 padding-bottom: 80px; 15215 padding-bottom: 80px;
15186 z-index: 99; 15216 z-index: 99;
15187 } 15217 }
15218 @media (max-width: 600px) {
15219 #wrapper-footer {
15220 padding-bottom: 180px;
15221 }
15222 }
15188 15223
15189 #wrapper-footer:before { 15224 #wrapper-footer:before {
15190 content: ""; 15225 content: "";
...@@ -15328,6 +15363,11 @@ element.style { ...@@ -15328,6 +15363,11 @@ element.style {
15328 .extra-wide-left { 15363 .extra-wide-left {
15329 padding: 50px 90px 90px 0px; 15364 padding: 50px 90px 90px 0px;
15330 } 15365 }
15366 @media (max-width: 600px) {
15367 .extra-wide-left {
15368 padding: 0px 0px 40px 0px;
15369 }
15370 }
15331 15371
15332 .extra-wide-right { 15372 .extra-wide-right {
15333 width: 100%; 15373 width: 100%;
...@@ -15335,6 +15375,15 @@ element.style { ...@@ -15335,6 +15375,15 @@ element.style {
15335 background-position: center; 15375 background-position: center;
15336 background-repeat: no-repeat; 15376 background-repeat: no-repeat;
15337 } 15377 }
15378 @media (max-width: 600px) {
15379 .extra-wide-right {
15380 width: 150%;
15381 min-height: 266px;
15382 margin-right: -60px !important;
15383 margin-left: -30% !important;
15384 background-position: center;
15385 }
15386 }
15338 15387
15339 .extra-wide { 15388 .extra-wide {
15340 width: 200%; 15389 width: 200%;
...@@ -15344,6 +15393,11 @@ element.style { ...@@ -15344,6 +15393,11 @@ element.style {
15344 padding-right: 50% !important; 15393 padding-right: 50% !important;
15345 background-color: #183668; 15394 background-color: #183668;
15346 } 15395 }
15396 @media (max-width: 600px) {
15397 .extra-wide {
15398 flex-direction: column-reverse;
15399 }
15400 }
15347 .extra-wide h2, .extra-wide .h2 { 15401 .extra-wide h2, .extra-wide .h2 {
15348 color: #fff; 15402 color: #fff;
15349 font-size: 32px; 15403 font-size: 32px;
...@@ -15373,10 +15427,30 @@ element.style { ...@@ -15373,10 +15427,30 @@ element.style {
15373 background-position: center; 15427 background-position: center;
15374 margin-top: -28px; 15428 margin-top: -28px;
15375 } 15429 }
15430 @media (max-width: 600px) {
15431 .extra-wide.image {
15432 width: 160%;
15433 margin-left: -30% !important;
15434 padding-left: 30% !important;
15435 margin-right: -30% !important;
15436 padding-right: 30% !important;
15437 }
15438 }
15376 15439
15377 .extra-wide-image-left { 15440 .extra-wide-image-left {
15378 padding: 50px 90px 90px 0px; 15441 padding: 50px 90px 90px 0px;
15379 } 15442 }
15443 @media (max-width: 600px) {
15444 .extra-wide-image-left {
15445 padding: 0px 0px 40px 0px;
15446 }
15447 }
15448
15449 @media (max-width: 600px) {
15450 .site-main {
15451 margin: 0px 40px;
15452 }
15453 }
15380 15454
15381 .has-blue-color, 15455 .has-blue-color,
15382 .has-blue-color:visited { 15456 .has-blue-color:visited {
......
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,13 @@ if ( is_page_template( 'page-templates/no-title.php' ) ) { ...@@ -19,7 +19,13 @@ if ( is_page_template( 'page-templates/no-title.php' ) ) {
19 $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID), 'full' ); 19 $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID), 'full' );
20 ?> 20 ?>
21 21
22 <?php if ( has_post_thumbnail() ) { ?> 22
23
24 <?php
25 if ( has_post_thumbnail() ) { ?>
26 <div class='home-header-moibile'>
27 <?php echo get_the_post_thumbnail( $post->ID, 'large' ); ?>
28 </div>
23 <div class='home-header' style=" background-image: url('<?php echo $url;?> ')"> 29 <div class='home-header' style=" background-image: url('<?php echo $url;?> ')">
24 <div class="content-container"> 30 <div class="content-container">
25 <?php the_field('header_text'); ?> 31 <?php the_field('header_text'); ?>
......
...@@ -21,13 +21,22 @@ ...@@ -21,13 +21,22 @@
21 21
22 .extra-wide-left{ 22 .extra-wide-left{
23 padding: 50px 90px 90px 0px; 23 padding: 50px 90px 90px 0px;
24 @media (max-width: 600px) {
25 padding: 0px 0px 40px 0px;
26 }
24 } 27 }
25 .extra-wide-right { 28 .extra-wide-right {
26 width: 100%; 29 width: 100%;
27 margin-right: -25% !important; 30 margin-right: -25% !important;
28 background-position: center; 31 background-position: center;
29
30 background-repeat: no-repeat; 32 background-repeat: no-repeat;
33 @media (max-width: 600px) {
34 width: 150%;
35 min-height: 266px;
36 margin-right: -60px !important;
37 margin-left: -30% !important;
38 background-position: center;
39 }
31 } 40 }
32 .extra-wide{ 41 .extra-wide{
33 width: 200%; 42 width: 200%;
...@@ -36,6 +45,9 @@ ...@@ -36,6 +45,9 @@
36 margin-right: -50% !important; 45 margin-right: -50% !important;
37 padding-right: 50% !important; 46 padding-right: 50% !important;
38 background-color: #183668; 47 background-color: #183668;
48 @media (max-width: 600px) {
49 flex-direction: column-reverse;
50 }
39 51
40 h2{ 52 h2{
41 color: #fff; 53 color: #fff;
...@@ -65,7 +77,25 @@ ...@@ -65,7 +77,25 @@
65 background-repeat: no-repeat; 77 background-repeat: no-repeat;
66 background-position: center; 78 background-position: center;
67 margin-top: -28px; 79 margin-top: -28px;
80 @media (max-width: 600px) {
81
82 width: 160%;
83
84 margin-left: -30% !important;
85 padding-left: 30% !important;
86 margin-right: -30% !important;
87 padding-right: 30% !important;
88 }
68 } 89 }
69 .extra-wide-image-left{ 90 .extra-wide-image-left{
70 padding: 50px 90px 90px 0px; 91 padding: 50px 90px 90px 0px;
92 @media (max-width: 600px) {
93 padding: 0px 0px 40px 0px;
94 }
95 }
96
97 .site-main{
98 @media (max-width: 600px) {
99 margin: 0px 40px;
100 }
71 } 101 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -6,6 +6,9 @@ ...@@ -6,6 +6,9 @@
6 position: absolute; 6 position: absolute;
7 padding-bottom: 80px; 7 padding-bottom: 80px;
8 z-index: 99; 8 z-index: 99;
9 @media (max-width: 600px) {
10 padding-bottom: 180px;
11 }
9 12
10 } 13 }
11 #wrapper-footer:before{ 14 #wrapper-footer:before{
......
...@@ -9,6 +9,14 @@ ...@@ -9,6 +9,14 @@
9 z-index: 999; 9 z-index: 999;
10 background-color: #fff; 10 background-color: #fff;
11 } 11 }
12 .home-header-moibile{
13 display: none;
14 @media (max-width: 600px) {
15 position: relative;
16 top: 123px;
17 display: block;
18 }
19 }
12 .home-header{ 20 .home-header{
13 position: relative; 21 position: relative;
14 height: 100%; 22 height: 100%;
...@@ -21,11 +29,21 @@ ...@@ -21,11 +29,21 @@
21 align-content: space-around; 29 align-content: space-around;
22 flex-wrap: wrap; 30 flex-wrap: wrap;
23 top: 120px; 31 top: 120px;
32 @media (max-width: 600px) {
33 background-image: none !important;
34 background-color: #183668 !important;
35 min-height: 390px;
36
37 }
24 .content-container{ 38 .content-container{
25 margin-left: 35%; 39 margin-left: 35%;
26 width: 100%; 40 width: 100%;
27 max-width: 600px; 41 max-width: 600px;
28 padding-bottom: 60px; 42 padding-bottom: 60px;
43 @media (max-width: 600px) {
44 margin-left: 40px;
45 padding-bottom: 100px;
46 }
29 h1, 47 h1,
30 h2{ 48 h2{
31 49
...@@ -36,9 +54,12 @@ ...@@ -36,9 +54,12 @@
36 font-size: 40px; 54 font-size: 40px;
37 line-height:50px; 55 line-height:50px;
38 font-weight: 300; 56 font-weight: 300;
57 @media (max-width: 600px) {
58 color: #fff;
59 }
39 @media only screen and (max-width: 782px) { 60 @media only screen and (max-width: 782px) {
40 font-size: 18px; 61 font-size: 30px;
41 line-height:22px ; 62 line-height:40px ;
42 } 63 }
43 } 64 }
44 h1{ 65 h1{
...@@ -69,5 +90,8 @@ bottom: 0px; ...@@ -69,5 +90,8 @@ bottom: 0px;
69 margin-top: 120px; 90 margin-top: 120px;
70 position: relative; 91 position: relative;
71 z-index: 99; 92 z-index: 99;
93 @media (max-width: 600px) {
94 // margin-top: 60px;
95 }
72 } 96 }
73 } 97 }
...\ No newline at end of file ...\ No newline at end of file
......