Mobile Display Issues with Header

My header image on my home page (http://claxtonconsulting.ca) was really zoomed in, so I added this code into simple custom css:


@media only screen and (min-width: 1025px){
 .header-image {
   background-position: 0 185px !important;
 } 
}

.header-image{
  background-size: 150% !important;
  background-position: absolute;
}

and it zoomed it out a bit. Then I wanted to move the header text up a bit, and add a second headline below the buttons, so I added this code to simple custom css


.header-text {
  position: absolute;
  width: 100%;
  margin-top: -100px;
  text-align: center;
}

.secondary-headline{
  position: absolute;
  width: 100%;
  margin-top: 500px;
  text-align: center;
  color: #fff;
  padding: 0 50px;
}

Now, I have three questions about this:

  1. This has completely destroyed the mobile display of my homepage. My main headline is behind the top menu bar and only shows the bottom part of the word "business."
    The secondary headline doesn’t show up at all. And the header background image shrunk and is too small for the home page. How do I fix this to look normal on mobile display?

  2. How do I move the two header buttons down a little bit?

  3. How do I make the header background image zoom out to look the same as the background does on my other pages? (Example: http://claxtonconsulting.ca/about/ & http://claxtonconsulting.ca/our-services/ )

Also, I put this into the footer section of the Header and Footer scripts plugin to get the secondary headline


<script>

(function($){

    "use strict";

    var headerContent = '<h4 class="secondary-headline"> Claxton Consulting offers accounting, marketing, administrative, tax, start-up and other small business related consulting services </h4>';

    $('.header-image').append(headerContent);
    

})(jQuery);

</script>

Hello there,

Try to apply the following CSS code:

@media only screen and (max-width:1025px){
  
  .site .header-image{
    background-size: cover !important;
    position: relative;
  }
  
  .site .header-image .header-text{
    margin-top: 10px;
    position: static !important;
  }
  
  .site .header-info{
    top: 0;
    bottom: 0;
    height: 100%;
  }
  
  .site .header-buttons{
    display: table;
    text-align: center;
  }
  
  .site .header-buttons .button{
    display: inline;
    margin-right: 5px;
  }  
  
  .site .header-buttons .button.right-button {
    margin-top: 0;
    margin-right: 0;
    margin-left: 5px;
  }  
  
  .site .header-image .secondary-headline {
    margin-top: 0;
    padding: 0 10px;
    font-weight: normal;
    position: absolute; 
    bottom: 0;
  }  
  
}

@media only screen and (max-width:640px){
 
  .site .header-image .secondary-headline {
    font-size: 16px !important;
  } 
  
}  

@media only screen and (max-width:480px){
 
  .site .header-image .secondary-headline {
    font-size: 11px !important;
  } 
  
}  

Let me know how it goes. I’ll wait to hear back from you regarding your stats.

Regards,
Kharis

It looks better on my desktop but the mobile version still looks messed up. The secondary headline is there, but the “read more” button is on two separate lines.
You can see what i mean here.

mobile display

and I just added that CSS code to the code I already had there, so now my code looks like this

@media only screen and (min-width: 1025px){
 .header-image {
   background-position: 0 185px !important;
 } 
}

.header-image{
  background-size: 100% !important;
  background-position: absolute;
}

.header-text {
  position: absolute;
  width: 100%;
  margin-top: -100px;
  text-align: center;
}

.secondary-headline{
  position: absolute;
  width: 100%;
  margin-top: 500px;
  text-align: center !important;
  padding: 0 100px;
  color: #fff;
}

@media only screen and (max-width:1025px){
  
  .site .header-image{
    background-size: cover !important;
    position: relative;
  }
  
  .site .header-image .header-text{
    margin-top: 10px;
    position: static !important;
  }
  
  .site .header-info{
    top: 0;
    bottom: 0;
    height: 100%;
  }
  
  .site .header-buttons{
    display: table;
    text-align: center;
  }
  
  .site .header-buttons .button{
    display: inline;
    margin-right: 5px;
  }  
  
  .site .header-buttons .button.right-button {
    margin-top: 0;
    margin-right: 0;
    margin-left: 5px;
  }  
  
  .site .header-image .secondary-headline {
    margin-top: 0;
    padding: 0 10px;
    font-weight: normal;
    position: absolute; 
    bottom: 0;
  }  
  
}

@media only screen and (max-width:640px){
 
  .site .header-image .secondary-headline {
    font-size: 16px !important;
  } 
  
}  

@media only screen and (max-width:480px){
 
  .site .header-image .secondary-headline {
    font-size: 11px !important;
  } 
  
}  

And how do I make my background on my home page and my specific service pages (accounting/administration etc.) look like the background on my about/contact/services.

For example the background of http://claxtonconsulting.ca/contact is a lot nicer looking than http://claxtonconsulting.ca/our-services/accounting

Hello there,

> … but the “read more” button is on two separate lines.

Try to apply the following CSS code:

@media only screen and (max-width:479px){
  
  .site .header-buttons{
    display: block;
  }  
  
  .site .header-buttons .button{
    padding: 5px 7px;
  }  
  
  .site .header-buttons .button.right-button {
    padding: 5px 17px;
  }    
  
}

> And how do I make my background on my home page and my specific service pages (accounting/administration etc.) look like the background on my about/contact/services.

To achieve this objective, you can use a “Layout Builder” widget. The parallax background must be set in the row where this widget resides in. Then put your two rows (as seen here http://claxtonconsulting.ca/our-services/accounting/) inside it.

Regards,
Kharis

Perfect!! It worked. Thanks so much :slight_smile: