WordPress update from 6.4.3 to 6.5.2 breaks header

I deleted [avia_search] from Phone Number… and the header_meta element shrinks in size. Add it back in and re-save and it reverts back to ‘wrong’ size.

But I’ve just spotted there’s something else going on here. On the dev site under 6.5.2 the HTML is:

<div id="header_meta"...
<div class="container">
<form action="http://dev.jacksgallery.co.uk/" id="searchform" method="get" class="">...</form>
<div class="phone-info "><div></div></div>
</div></div>

But on the www site with 6.4.4. the HTML is:

<div id="header_meta"... 
<div class="container">
<div class="phone-info ">
<div><form action="https://www.jacksgallery.co.uk/" id="searchform" method="get" class="">...</form></div>
</div>
</div></div>

I’ve made no changes to layout, content etc yet simply updating WP from 6.4.4 to 6.5.2 changes the HTML code and swaps the order of the ‘form’ and ‘phone-info’ elements. Both code blocks have 4 sets of <div>…</div> so there is no extra div being added.

I have now and it moves the search box back to the right but there is still a difference between the sites if you look at them.

The www site has a header_meta height of 47px whilst the dev site is now smaller at 43px.

The www site’s search box has 5px padding top and bottom from the phone-info div element so there is gap within the header_meta element. It’s overall height is 36px.

The dev site’s box now fills the header_meta element despite the phone-info padding being specified (but is apparently ignored), and its height has increased to 42px.

Now I am sure that I could either just leave it as is in its new format or play around with the CSS on the dev site to get it looking as it did (although the HTML code changes might preclude this).

But the big issue here is why has the WP update from 6.4.3 to 6.5.2 changed the layout and code? It’s altered the dimensions of the search box, its location (right to left before your CSS fix) and changed the order of the HTML code for the search box. Surely there’s something here that’s “wrong” and needs looking into/fixing?

I would normally say I could probably figure the CSS out but because 6.5.2 has swapped around the order of ‘form’ and ‘phone-info’ in the HTML, and the “id=searchform” line is now outside of the phone-info div, the phone-info CSS definition is not working as it should.

This is the default from layout.css

.phone-info {
    float: left; - overridden by your float:right directive above
    font-weight: bold;
    line-height: 20px;
    font-size: 11px;
    padding: 5px 0;
}

If I change the first padding parameter, then white space around the box does not appear until a setting of “12px 0” and then space is only added beneath the search box, not above. If I increase it further just to test, say “25px 0”, then again no padding is added above.

So please can you have a look at what is going on and advise which CSS elements I now need to target to get control back of the box, e.g. how to get padding to appear above and below the box?

Thanks, that works. The box and header_meta element are bigger than they were before the WordPress update, but it looks OK and I can’t be bothered to mess around with it any further. ;-)

I still do wonder though whether this change of element size and code after the update of WordPress should be flagged to your dev team to look at because something has caused the theme to alter its layout/design from what it was before. Case closed!

Yes all done, thanks for your help.