The website uses a custom logo that is 960px. However, as the browser window approaches the size of the website abruptly the logo shrinks to about 90% exposing background. This happens when the left edge of the window hits the left edge of the browser window.
(Look at electoralalliance.ca to see it in action ... at least until it is fixed.)

Comments

Jeff Burnz’s picture

Jeff Burnz commented

Bascially its your theme settings for width and breakpoint - the width is set to 960 in Standard layout, then 100% for the next breakpoint down, but you have not adjust the breakpoint - it still thinks it should switch to the 100% flexible width at 1024px - higher than your page width of 960px.

Change the breakpoint for Tablet Landscape to something like this:

only screen and (min-width:769px) and (max-width:959px)

That should ensure the page width does not jump out beyond 960 and a smooth transition between breakpoints for the header.

Patricia_W’s picture

Patricia_W commented

Hi Jeff,

1) I'm not using a tablet
2) This is for the desktop
3) I do not see any breakpoint setting - but I tried changing the media setting to "only screen and (min-width:961px)" (and also 960px) but it made no difference

Jeff Burnz’s picture

Jeff Burnz commented
Status: Active » Fixed

Sorry, I just don't know how to respond to this, I gave you the answer, fwiw breakpoint = media query.

Patricia_W’s picture

Patricia_W commented

Even though I do not understand why a tablet setting would affect a desktop layout, I tried your settings and they make no difference.
What are the default settings for these media settings? ... once they are changed I do not know how to reset them to the values that the theme comes with. What should the settings be for the desktop device?
Since I am not using Pixture Reloaded for mobile devices, is there any way of turning off the device options?

p.s. I have several sites using Pixture Reloaded. One of them does not behave this way. I've compared all of the settings and they appear to be identical. For another site when I reduce the width of the page the header image shrinks to about 50%, and after reducing the width a bit more it abruptly resizes to the size of the window and behaves like a smartphone ... sidebars disappear. As far as I can see all three sites have the same configurations.

Jeff Burnz’s picture

Jeff Burnz commented

See #1, that is all you really need to know.

I don't see any setting changes in the site, meaning I don't see a change in the media query setting.

You can find the defaults in the info file, they should be there.

You cannot turn off responsiveness in 7.x-2.x AT sub-themes, this is a feature added to the 7.x-3.x branch, it was too hard and to back-port to 2.x themes.

Patricia_W’s picture

Patricia_W commented

Hi Jeff,

At the time I posted #4, the site that was working was tcan.ca with the same settings (at that time) as electoralalliance.ca

Since then I have changed the tablet setting for electoralalliance.ca and it appears to be working correctly now.

However, another site is still not working ... climateactionnow.ca ... in this case, the logo (960px) is being displayed about half size until the page is quite a bit narrower than desktop. I can see the layout changing from desktop to tablet and at some point the header expands to fill the screen.

Do the Adaptive Theme settings have any effect?

(I'm going to make a spreadsheet of all settings for the various sites I am using Pixture Reloaded on ... see if I can see a pattern).

Jeff Burnz’s picture

Jeff Burnz commented

Pixture reloaded controls the size of the branding element, so its around 50% normal, then changes to full width in narrower screens.

You will need to do some CSS...

#header {
background: #163d6a;
}
#header .header-inner {
  background: none;
}
#branding {
  width: auto;
}

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

Patricia_W’s picture

Patricia_W commented

I didn't post any more because ultimately I found a better (for me) solution using the mobile switch modules, a non-responsive theme for the desktop and tablets and a responsive theme for smartphones.