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 {
background-color: #fff;
}
.home-header-moibile {
display: none;
}
@media (max-width: 600px) {
.home-header-moibile {
position: relative;
top: 123px;
display: block;
}
}
.home-header {
position: relative;
height: 100%;
......@@ -14941,12 +14952,25 @@ figure.woocommerce-product-gallery__wrapper {
flex-wrap: wrap;
top: 120px;
}
@media (max-width: 600px) {
.home-header {
background-image: none !important;
background-color: #183668 !important;
min-height: 390px;
}
}
.home-header .content-container {
margin-left: 35%;
width: 100%;
max-width: 600px;
padding-bottom: 60px;
}
@media (max-width: 600px) {
.home-header .content-container {
margin-left: 40px;
padding-bottom: 100px;
}
}
.home-header .content-container h1, .home-header .content-container .h1,
.home-header .content-container h2,
.home-header .content-container .h2 {
......@@ -14958,12 +14982,19 @@ figure.woocommerce-product-gallery__wrapper {
line-height: 50px;
font-weight: 300;
}
@media (max-width: 600px) {
.home-header .content-container h1, .home-header .content-container .h1,
.home-header .content-container h2,
.home-header .content-container .h2 {
color: #fff;
}
}
@media only screen and (max-width: 782px) {
.home-header .content-container h1, .home-header .content-container .h1,
.home-header .content-container h2,
.home-header .content-container .h2 {
font-size: 18px;
line-height: 22px;
font-size: 30px;
line-height: 40px;
}
}
.home-header .content-container h1, .home-header .content-container .h1 {
......@@ -14995,7 +15026,6 @@ figure.woocommerce-product-gallery__wrapper {
position: relative;
z-index: 99;
}
h1, .h1 {
color: #183668;
font-size: 32px;
......@@ -15185,6 +15215,11 @@ element.style {
padding-bottom: 80px;
z-index: 99;
}
@media (max-width: 600px) {
#wrapper-footer {
padding-bottom: 180px;
}
}
#wrapper-footer:before {
content: "";
......@@ -15328,6 +15363,11 @@ element.style {
.extra-wide-left {
padding: 50px 90px 90px 0px;
}
@media (max-width: 600px) {
.extra-wide-left {
padding: 0px 0px 40px 0px;
}
}
.extra-wide-right {
width: 100%;
......@@ -15335,6 +15375,15 @@ element.style {
background-position: center;
background-repeat: no-repeat;
}
@media (max-width: 600px) {
.extra-wide-right {
width: 150%;
min-height: 266px;
margin-right: -60px !important;
margin-left: -30% !important;
background-position: center;
}
}
.extra-wide {
width: 200%;
......@@ -15344,6 +15393,11 @@ element.style {
padding-right: 50% !important;
background-color: #183668;
}
@media (max-width: 600px) {
.extra-wide {
flex-direction: column-reverse;
}
}
.extra-wide h2, .extra-wide .h2 {
color: #fff;
font-size: 32px;
......@@ -15373,10 +15427,30 @@ element.style {
background-position: center;
margin-top: -28px;
}
@media (max-width: 600px) {
.extra-wide.image {
width: 160%;
margin-left: -30% !important;
padding-left: 30% !important;
margin-right: -30% !important;
padding-right: 30% !important;
}
}
.extra-wide-image-left {
padding: 50px 90px 90px 0px;
}
@media (max-width: 600px) {
.extra-wide-image-left {
padding: 0px 0px 40px 0px;
}
}
@media (max-width: 600px) {
.site-main {
margin: 0px 40px;
}
}
.has-blue-color,
.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' ) ) {
$url = wp_get_attachment_url( get_post_thumbnail_id($post->ID), 'full' );
?>
<?php if ( has_post_thumbnail() ) { ?>
<?php
if ( has_post_thumbnail() ) { ?>
<div class='home-header-moibile'>
<?php echo get_the_post_thumbnail( $post->ID, 'large' ); ?>
</div>
<div class='home-header' style=" background-image: url('<?php echo $url;?> ')">
<div class="content-container">
<?php the_field('header_text'); ?>
......
......@@ -21,13 +21,22 @@
.extra-wide-left{
padding: 50px 90px 90px 0px;
@media (max-width: 600px) {
padding: 0px 0px 40px 0px;
}
}
.extra-wide-right {
width: 100%;
margin-right: -25% !important;
background-position: center;
background-repeat: no-repeat;
@media (max-width: 600px) {
width: 150%;
min-height: 266px;
margin-right: -60px !important;
margin-left: -30% !important;
background-position: center;
}
}
.extra-wide{
width: 200%;
......@@ -36,6 +45,9 @@
margin-right: -50% !important;
padding-right: 50% !important;
background-color: #183668;
@media (max-width: 600px) {
flex-direction: column-reverse;
}
h2{
color: #fff;
......@@ -65,7 +77,25 @@
background-repeat: no-repeat;
background-position: center;
margin-top: -28px;
@media (max-width: 600px) {
width: 160%;
margin-left: -30% !important;
padding-left: 30% !important;
margin-right: -30% !important;
padding-right: 30% !important;
}
}
.extra-wide-image-left{
padding: 50px 90px 90px 0px;
@media (max-width: 600px) {
padding: 0px 0px 40px 0px;
}
}
.site-main{
@media (max-width: 600px) {
margin: 0px 40px;
}
}
\ No newline at end of file
......
......@@ -6,6 +6,9 @@
position: absolute;
padding-bottom: 80px;
z-index: 99;
@media (max-width: 600px) {
padding-bottom: 180px;
}
}
#wrapper-footer:before{
......
......@@ -9,6 +9,14 @@
z-index: 999;
background-color: #fff;
}
.home-header-moibile{
display: none;
@media (max-width: 600px) {
position: relative;
top: 123px;
display: block;
}
}
.home-header{
position: relative;
height: 100%;
......@@ -21,11 +29,21 @@
align-content: space-around;
flex-wrap: wrap;
top: 120px;
@media (max-width: 600px) {
background-image: none !important;
background-color: #183668 !important;
min-height: 390px;
}
.content-container{
margin-left: 35%;
width: 100%;
max-width: 600px;
padding-bottom: 60px;
@media (max-width: 600px) {
margin-left: 40px;
padding-bottom: 100px;
}
h1,
h2{
......@@ -36,9 +54,12 @@
font-size: 40px;
line-height:50px;
font-weight: 300;
@media (max-width: 600px) {
color: #fff;
}
@media only screen and (max-width: 782px) {
font-size: 18px;
line-height:22px ;
font-size: 30px;
line-height:40px ;
}
}
h1{
......@@ -69,5 +90,8 @@ bottom: 0px;
margin-top: 120px;
position: relative;
z-index: 99;
@media (max-width: 600px) {
// margin-top: 60px;
}
}
}
\ No newline at end of file
......