Header not resizing

[Kyle – SUPPORT]

Ok please leave it like this and I will forward this topic to the developer to see if there’s an easier solution.

– Kyle

[Ken]

Thanks, will do.
Appreciate all the help you guys give. Your service is phenominal.

[Rui Guerreiro – SUPPORT]

Hi,

I notice that you have a height of 115px in the Div bellow that is causing the gap between the logo and the slider in the mobile.

<div id="header-sticky-wrapper" class="sticky-wrapper" style="height: 115px; "><header id="header" class="sticky-header clearfix">

Just to understand this better, did you place this 115px in the source code of the Div?

– Rui

[Ken]

Nope, I didn’t add that 115px in. And in all honesty, I wouldn’t know where to either – I’m not a coder. The customisations I’ve made have been limited to the css from support tickets which was posted on page 1 of this thread if you want to take a look at it, however all of it has now been removed to aid in tracking this issue.

In fact, if you take a look at point 5 of this post http://support.swiftideas.net/forums/topic/various-teething-problems/#post-73565 you’ll see that this same problem has been present since I loaded the theme.

[Rui Guerreiro – SUPPORT]

Hi,

Can you try this one

@media only screen and (min-width: 480px) { 
.sticky-wrapper, #header-section {
  height: 80px!important;
}

}

Let me know the result.

– Rui

[Ken]

Hi Rui,

That doesn’t affect the resizing of either the desktop or mobile header.

Bear in mind that I have now removed all custom css including the following script from Kyle to fix the desktop header resizing …

#header-sticky-wrapper.is-sticky, header.sticky-header.sticky-header-resized {
  height: 80px !important;
}

Because of playing around with responsive visibility I know to what point I must resize my destop (firefox) browser for the site to display the mobile version of the site. Interestingly Kyle’s script does correct the “mobile” header when viewed on a resized desktop, but I’ve tried in both chrome and the default samsung browser on my galaxy note 3 and it doesn’t work in either.

(and there is still that 115px in the div which you pointed out earlier to contend with)

Also assuming that in general it resizes correctly accross the platforms without any custom css or I wouldn’t be the only one reporting this problem, so why it doesn’t work here without custom css is as interesting as finding the custom css to fix it.

Let me know if you want to log in – maybe I’ve just done something really stupid 😀

[Rui Guerreiro – SUPPORT]

That’s strange, maybe you don’t see any changes due to the cache browser or any cache plugin.
Since you already removed the changes I can’t check it.
If you don’t mind you can send the admin credentials so I can check it. (send it through private reply)

– Rui

[Ken]

Hi Rui,

I’ll pm the log in details in a minute.
I’ve been trying to pin point the problem to help things along so I have attached 5 screenshot clusters.

Each cluster shows the header static and after scrolling accross a number of bootstrap screen real estate sizes, being large, med and small in firefox as well as portrait and landscape on my Galaxy Note 3.

The paramaters of each set of screen shots are included in the shots.
I tried changes to the Header settings and to Custom css settings.
Header settings I set or left blank were
Logo width
Logo height
Logo width resized
Logo height resized

So far support has provided 3 custom css scripts to try.
I tested with these two

#header-sticky-wrapper.is-sticky, header.sticky-header.sticky-header-resized {
  height: 60px !important;
}

@media only screen and (min-width: 480px) { 
.sticky-wrapper, #header-section {
  height: 80px!important;
}

}

I didn’t do screen shots with this third because I determined through some other testing with Kyle today that this one breaks all the rest of the custom css, but I can’t tell you why 🙂

@media only screen and (max-width: 480px) { 
#header-sticky-wrapper {
  height: 80px!important;
}

I see I can only add 4 attachements, I’ll attach the 5th screen shot in a subsequent message.
Hope this helps 🙂

Attachments:

You must be logged in to view attached files.

[Ken]

5th screen shot cluster …

Attachments:

You must be logged in to view attached files.

[Ken]

This reply has been marked as private.

[Rui Guerreiro – SUPPORT]

Hi,

Check this screenshots taken with a Galaxy S4.

https://www.dropbox.com/s/yfgxx752mp5lack/2014-07-23%2011.31.47.png
https://www.dropbox.com/s/1037w7ou1a01i1l/2014-07-23%2011.32.00.png
https://www.dropbox.com/s/pqbn2n11v8c6qis/2014-07-23%2011.32.29.png

It seem all fine, don’t know if you changed anything.

Let me know if it’s ok or not. If not will have to forward it to the Developer.

Thanks.

– Rui

[Ken]

Hi Rui,

I haven’t changed anything, and you’re right that under the current configuration it looks ok on mobile, but it isn’t working on desktop. Check out http://samurdermysteries.co.za/wordpress/header-test/
You’ll see the logo is protruding from the header bar.

That’s why I made all the screenshots with the different settings. Fix it on desktop, breaks on mobile. Looks ok on mobile, breaks on desktop. Differet settings give different results, but nothing that corrects it accross the board.

[Swift Ideas – Ed]

Hi Ken,

All you should need to add now is this:

@media only screen and (max-width: 479px) {
#header-sticky-wrapper {
height: 85px!important;
}
}

– Ed

[Ken]

Hi Ed,

Thanks for the reply. As per your suggestion this time round I have done nothing other than add in your css above. Unfortunately this has not made a difference ie, on desktop my logo still resizes within my header but the header does not resize, and on mobile there is still the large space below the logo approximately the size of the logo itself.

Regards,
Ken

[Kyle – SUPPORT]

Try adding this below:

#header-sticky-wrapper header#header {
height: 80px;
}

– Kyle