Front page image not showing up

Hi, just installed the theme with demo content here: http://199.116.248.110/~turbuss1/, but the front page image did not apply. Any idea where it took a bad turn, or where I could manually add it? thanks a lot

Hey,

See Customize > Header Image please. Not sure why it’s not there.

Appearance > customise > Header Area > Header min. height, set it to 100% or whatever you want except 0.

@Vlad, Default value for this field is 0 it should be changed.
My bad, sorry :slight_smile:

@dimikjones - it isn’t 0, it’s 100%.

Thank you for swift and accurate support!

I also wonder about this:
on iPad and iPhone, the front page image is only represented by a small corner of the image:

On the iPhone the call to action buttons are even chopped:

So apparently, the theme does not scale (not responsive) the content to fit the screen. Is this intended? Please explain how this is supposed to be displayed. Thank you again.

Hi again, try again when you tick option:

Appearance > Customise > Header Area > Check this box to set [background-size: cover] instead of [background-size: contain] for the header image

Thanks alot for the immidiate response. Unfortunately the suggested option has been ticked, and the screedumps are representative for the display with the option ticked.

Oh, I don’t have iPhone, but try with custom css below:

div#header-banner {
    -webkit-background-size: 100% !important; 
    background-size: 100% !important; 
    -webkit-background-size: cover !important; 
    background-size: cover !important;
}

If that won’t work… try to specify dimensions:
-webkit-background-size: length_x length_y;

Something like this should work:

div#header-banner {
    @media (max-width: @iphone-screen) {
        -webkit-background-size: 2024px 768px !important;
    }
}

Thanks, before applying custom css I decided to prepare a child theme. Unfortunately I managed to delete the original style.css
Can you please provide me the original style.css file content again?

http://199.116.248.110/~turbuss1/

Just extract it from theme .zip file.

intro.zip > intro and within file list you will find style.css

You don’t have to create child theme. Use simple custom css plugin, apply the code and if it won’t work just delete it.

Thank you, restoring style.css was successful. Have tried both your custom css suggestions, but none of them made any effect unfortunately. I may add that exactly the same is the situation when viewing your demo on the iDevices. Is it different on android??

We tried :slight_smile: , ok I must take a look little deeper into this

Checked with android myself today. The issue is iDevice exclusive, on android it is fine. I may add that the flaw is present both from safari and chrome. Hope you can sort the phenomenon soon

Hey,

Use this please:


@media only screen and (max-width: 1024px) {
   #header-banner {
      background-attachment: scroll !important;
      background-position: center !important;
   }         
} 

We will add it also in a future theme release. Unfortunately Apple products don’t have a proper support for fixed backgrounds.

Thank you, works a lot better now, but still a bit to go:

The call to action buttons are still chopped on the iPhone, and the overlay logo bar is hiding half the screen permanently. Maybe the logo should scale down on the mobile screen?

On what iPhone are you checking?
Here’s to scale the logo:


@media only screen and (max-width: 1024px) {
     .site-logo {
          max-width: 100px;
          width: 100%;
     }
} 

Play with the 100px to achieve what looks best for your logo.
The design is done by somebody else - only the PHP coding is done here - so we probably need to fine-tune a few things. Thank you for letting us know.

Hi, thank you. iPhone is the good old iPhone 5 :slight_smile:

As you also can see from the screenshot, the title and animated strings are mostly hidden on the small iPhone screen.

Here’s a simple solution for that:


@media only screen and (max-width: 1024px) {
   .header-fixed {
        position: relative !important;
   }
} 

Thank you, but still a bit hiding present:

Maybe if we turn off the overlay, but keep the logo image floating? Is there a code for that?