Theme Header Divided In Two

[lvvvvvl]

Hey,

I recently replaced my wordpress themes header menu (Genesis Executive Theme) for a widget area which I created linking to my social pages that align beside the main logo image.

The widget looks fine in pc screens, but when I check the website on a small screen or mobile device, the header widget jumps to the next row and goes full width of the screen which distorts the whole site and compresses the content area to one side.

MOD EDIT – Codedump Removed

I haven’t modified the media queries (MOD – not provided) at all because I suspect there’s a way to reduce the social widget width somehow (I don’t need 554px of width, but if I set it to less then there’s a gap between the logo image and the social widget with the purple background color in between).

This is the website: http://goo.gl/v9MtXR

Can anyone shed some light or guide me toward the right direction?

Thank you

[Paulie_D]

Please no codedumps…they’re very hard to read, usually don’t have adequate information and take up huge amounts of screenspace.

Insofar as the difference would seem to be screen-width dependent it likely is a media query issue.

[wahhabb]

Your social icons are held in a section called #text-22. Your style.css line 2208 defines that as having width: 554px;
Your site-header and widget-area classes have float:right (line 1084).

Your header has a width of 586px.

As a result, the floating site-header will drop onto a second line whenever the container is too narrow to hold both the header and the widget. You can see this on a PC by making the window narrower.

You need to decide what you want to have happen for smaller screens and change your code to support that.

[lvvvvvl]

Sorry about that Paulie, I didn’t know about codedumps. According to your response and that of wahhabb I guess I will have to edit my media query.

I’m not very familiar with media queries (or css at all for that matter, took me 6 hours just to figure out how to divide the header).

How would I go about informing the css to for example, when the screen is smaller than 500px; to force the header widget to jump to the next row but remain the same width as that of the logo half?

Obviously you’d start with something like this:

@media only screen and (max-width: 500px) {

But then what?

[wahhabb]

You need to start earlier than the media query.
What you want is for the container, i.e. <header class=”site-header” to provide the white background and to match the width of site-container. Then you want to place the two items in it appropriately.

Because #text-22 is floated right, when you break to a second line, it floats to the right, which is not what you want. Even if you float it to the left, there is a bunch of white space to the left of #text-22. That is because its width is set to 554px in style.css line 2208, and also on line 1084 .site-header .widget-area is given that width, so it is quite a bit wider than just the four icons.

If you force its width to be auto, and then float it left when it goes to a second line, that might give you the results you want, although that approach is a bit fragile.

Let’s say you set #text-22 to have a width of 348px. .title-area has a width of 586px. So now if your max-width is 934px, you say

@media only screen and (max-width: 934px) {
.site-header #text-22 {
    float:left;
}
}

See if that gives you what you want. Meanwhile, I’m sure someone else will give you a better solution.

[lvvvvvl]

Hey wahhabb,

Thank you for replying, especially explaining the steps through it as it makes learning css easier.

I tried the suggestions you gave and it seem to work so far as to fixing the floating problem, but when I reduced the header widget to 348px’s, when viewing the website in a pc screen it left a gap website the header image and the header widget with the purple background of the website. How can I fill the gap with #ffffff to blend the two sides in?

Here’s a screenshot: http://snag.gy/aO8T9.jpg

[Paulie_D]

What you want is for the container, i.e. <header class=”site-header” to provide the white background

.site-header {
     background-color:white;
}

Should so it.

[Author]

Posts