Header Menu display issue

[alanika]

Hi,
I bought this wonderful theme and now I’m busy updating my website, but here is some questions I found:

1. The header menu display error in Chrome (in Mac OSX environment), the logo and social icons sticked to both ends of the brower, please see the attached image.

http://i7.minus.com/jWio8iVfCgSVV.jpg

2. I set the background image already, but it doesn’t show up in Mac OSX Chrome, Safari and Firefox.

Please help! Since 90% of my clients is using Mac, the compatibility of OSX environment is very important to me, thanks!

Alan

• This topic was modified 10 years, 11 months ago by alanika.
• This topic was modified 10 years, 11 months ago by alanika.

[satori]

Hey Alan,

first of all, thank you for the purchase!

I will go over the questions in the same order:

1). It is indeed a bug, please accept my apologies and thank you for reporting! Please download this archive, unzip it, and upload into the theme folder (/wp-content/themes/Kanso/), replacing the existing files.

2). Could you please clarify – did you upload the image via the “Website background: image” field in the “Page Elements” tab of the Theme Options panel?

Sincerely,
Andrii / Satori Studio

[alanika]

Hi Andrii,

1).The header problem was perfectly fixed, thanks a lot!!

2.) Sorry forgot to clarify, what I mean is the page background, please see this: http://i.minus.com/iztGk6iDyA3YT.jpg

Thanks for your help!

Alan

[satori]

Hey Alan,

the missing background image issue is indeed a bug, a typo in the code which manifests itself only in the multi-page mode. My apologies – and thank you for pointing it out! Please download this fix I’ve prepared, unzip the archive, and upload the contained files into the theme folder (just as with the previous issue). Please let me know if it does the trick!

Best,
Andrii / Satori Studio

[alanika]

Hi Andrii,

Thanks for the prompt reply, that is very helpful :)

Half of the problem was fixed, and the picture show up but have some problem, that is too much text to explain, so I made a jpg:

http://i.minus.com/iFw3yVCMeFKEP.jpg

I hope you understand the diagram I made, sorry for bad layout.

Thanks again for the help!

Alan

[satori]

Hey Alan,

I’ve updated two of the theme files once more, now they should behave as intended: you can download this archive, unzip it, and upload into the theme folder (/wp-content/themes/Kanso/), replacing the existing files.

Let me also explain what the intended behaviour should be in each of the cases you’ve touched upon:

1). Parallax unticked, “Large Text” template – as noted in the theme manual, the “Large Text” page template has been specifically created for use with the one-page mode, and displays as much height as needed by the title and the content; any background will therefore show only as far as the available title and content allow.

2). Parallax unticked, “Default” template – here the background image should fit as much as possible into the available screen area (using the “background-size: cover” CSS property), however, the state you were facing is a bug; it is corrected by the file I’ve attached above, please accept my apologies for the bug.

3). Parallax checked, “Default” template – this is a bug for multi-page theme mode; also fixed in the files I’ve linked to earlier ;)

Please let me know if the fix works!

Sincerely,
Andrii / Satori Studio

[ser]

Hi Andrii,
I have experienced similar problem, but I didn’t manage to solve it. I downloaded the zip and I have tried different templates as well.
What I am trying to do is to have a background image on a page and be able to see the whole image. Is there a way to adjust the height? Our website is http://www.teamjig.com and I am talking about the TEAM section. Right now I enabled the parallax effect because it is the only way that we can see all the people at the same time. Every other choice ends up in a cut picture.
I am totally new in building websites, so forgive me if I didn’t understand something!

Thank you in advance,
Galini / TeamJig

[satori]

Hey Galini,

first of all, thank you for the purchase!

There are two ways an image background size is set in Kanso depending on whether the parallax effect is on or off:
– if it is off, the backgrounds have the “background-size: cover” CSS property, which ensures that the image always fills the entire background, regardless of the screen width of the particular device; this also means that the image will most likely be cropped from top and bottoms for the width to always match the screen width. This is the most commonly used CSS method for auto-fitting image backgrounds to objects that might shift in size.
– if the parallax is on, the “background-size” is set to “initial”, i.e. full image size; this is needed because the parallax will simply not work with the “cover” CSS feature.

In your case, you are trying to achieve something that requires a compromise: as far as I understood, you need the background image to fit both by width and by height into the respective page section. Given that your visitors will have varying screen widths yet the height of the section does not change in proportion to the width, rather depending on its content, the fully fitted background could be achieved on a very limited number of screen sizes with needed combinations of width and height that are proportional to the image dimensions. The only option I could recommend, apart from rethinking the section, is setting the following CSS property:

#page-holder-21 { background-size: auto 100% !important; }

(you can add custom CSS into the “Style: Add Custom CSS” tab of the Theme Options panel). This expression will tell the background of the “About JIG” section to fit by height, thus always displaying all portraits in full. As a “side-effect”, however, the width of the background will not always fit the screen width entirely, leaving blank space on the sides.

Sincerely,
Andrii / Satori Studio

[ser]

Thank you for the help and for the information!
I tried it, but we are not really satisfied with the result, so I think we will rethink the section and find an alternative solution! :)

Regards,
Galini

[Author]

Posts