Thanks and reporting two issues

Illdy
1

Hi,

Thanks a lot for making this awesome theme available. After trying a gadzillion themes, I settled on this as the one with the most options to customize and being fairly responsive.

Now two issues regarding aesthetics:

  1. The hero image does not display perfectly on the landing page, but shows fine on every other page. See http://zehawk.in vs http://zehawk.in/contact/. One can see how the image on the landing page is stretched and not centered. Can something be done about this?

  2. Jumbotron customization: If any word is long (e.g. Photography), it breaks the landing page on a smaller screen. I.e. the word spans more than the width of the viewport, and a horizontal scroll bar appears at the bottom. Its quite horrible :slight_smile:

Thanks.

2

Hello @zehawk,

Thank you for the kind words and also for choosing our theme!

At no.1 you are saying that the picture on contact page is displaying alright but not the one on homepage?
For me they both look the same, except the different height since on homepage there’s more content inside the header area.

No.2 seems like a responsive flaw and I’ll try to reproduce it in my environment.
Thanks for pointing it out, any screenshots would be much appreciated.

Have a great day!

Regards

3

> For me they both look the same

I believe you may be looking at the website on a monitor with resolution higher than 1500px. Then it’ll be fine coz the image gets stretched. Problem occurs if you look on a monitor with res < 1500px OR resize the browser window width. The landing page is not resizing the hero image, instead it starts truncating the right side. While for all other pages, the header image is auto resized to stay within viewport as browser width is reduced.

4

> Thanks for pointing it out, any screenshots would be much appreciated.

1st: extra part of long word going outside viewport

2nd: page scrolled to the left

Please let me know if these dont quite show you whats going on.

5

Hello @zehawk,

This problem is still a bit out of my reach.

The header image seems to have cover background property, so you might want to try out with some different settings:

#header {
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
}

I see that you have the latest version of the theme, let me know if the header text is still displaying wrong and if yes, please tell me the smarphone operation system and browser

Thank you,
Regards

6

A. header image related:

So the settings above, esp line 4 (background-size: contain;), makes the header image repeat vertically to keep the same vertical space being used. Although the primary aim of making the header image responsive has been achieved :-), its obviously not elegant.

If I add a further line (background-repeat: no-repeat;), then there are large white areas below the header image, which of course breaks the beautiful theme design.

I think I may have found a good compromise for me for the moment. Setting:

#header {
background-position: top center;
}

keeps the header height constant, which we want for the theme to work, while centering the image and truncating it from both sides, which works for me.

7

B. header text related

Yes the problem is still occurring. However you don’t need to test on a phone. Just resizing any standard desktop browser will show the results.

Phone: Android 4.4.2, FF and Chrome
Desktop: FF in developer mode > responsive design view

8

@zehawk: you are a gentleman and a scholar. Thanks a lot for your code on the header image. I’m wondering though whether this is not already included in the package. You mention a compromise. What is being traded for using:

#header {
background-position: top center;
}

BTW: compliments on (the content of) your site, wonderful!

9

@smoldersonline sorry for the delay in replying.

I’m using this:

#header {
background-position: top center;
}

in place of this:

#header {
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
}

And thank you for the compliments!

10

Hello,

On top of the background-size: contain; you can use:

#header {
 background-repeat: no-repeat;
 background-position: center;
}

I hope this gets you further with the setup.

Regards