Responsive Scrolling / Missing Background

[eightcrazy]

Can anyone see why when you shrink your browser on the Decor theme you can scroll right and some of the background is missing in the header/wrap

http://demo.studiopress.com/decor/

Yet, that doesn't happen on a theme like Going Green

http://demo.studiopress.com/goinggreen/

 

What is it about the code in Decor that is causing that?

[flipflopfreelance]

Yes, I am wondering the exact same thing!

[David Chu]

That's a pretty little problem.  🙂    If I'm following what you're saying, I think this is it...  I didn't completely tear apart the code, but.... the first thing I thought of was the triple column thing.  The green site doesn't have that.  But I looked more closely, and I think they have that working fine.

Looking further, although this theme "responds" pretty well, it looks like long about iPad landscape size, the footer is not reducing like everything else; it's still lumbering along at its 1140 width.  It just needs a little nip and tuck there - the rest reduces fine.

Dave

---

Dave Chu · Custom WordPress Developer – likes collaborating with Designers

[scoe]

Hi EightCrazy!

I hope you have not given up on Decor. I am seeking the same solution. I wonder if you have found an answer to your question about the header background disappearing for mobile viewers.

To pin this down here are my notes. If anyone here can help me fix the style sheet (where I think the problem is), I'd appreciate it.

It Only Happens on "Pages" -------

It happens only on "page" pages not "posts." So the link you posted above does not show the problem. But, you can see it in the demo at:

http://demo.studiopress.com/decor/columns/

When you shrink the screen below 800 pixels.

If you see it on your own site's homepage it is because you selected a static page for the homepage. Go with "latest posts" and it will be ok on the homepage. (Methinks, let me know.)

Missing Header Background ONLY On "Pages" when Screen Size <= 800 pixels --------

When you view a page on a smartphone or shrink your screen down past 800 pixels you will see the background on the header disappear. In the cascading style sheet there are adaptions for 800 pixels and 400 pixels screens. The problem starts at the 800 pixel level. (@media only screen and (max-width: 800px)

It does not affect the header menu area.

Missing Footer Background on Pages at Any Size--------

Also on "Pages" the background behind the footer widgets is also missing from the .wrap .widget-area. So the footer widget boxes will have the usual gray background but the box around the boxes will be white. Again this happens only on "Pages" but not "Posts."  This happens at all screen sizes.

Correct Background is Replaced in Both Cases (Footer and Header) by Left-Corner-Scroll Graphic in Error --------

The background seems to be replaced by the same graphic that forms the lower corner of posts, the white background with the faint gray scroll in the lower left corner.

So it could be something as simple as a graphic in the wrong place. But I can't remove it from the places where it should not be without removing it from the places where it should be.

-------------------------

Help Us Not Reinvent the Wheel.

If a Decor/CSS Guru is looking at this theme. Please help. These are problems out-of-the-box that any Decor user will have.

I do love this theme. It's not right for my personal site but for home decor client sites looking for a certain dignified look, no other theme comes close.

--- SCOE

 

P.S. Another out-of-the-box problem is this.

Above 800 pixels, the search results will appear in the header.

http://demo.studiopress.com/decor/?s=test+search+results

 

[eightcrazy]

Hi EightCrazy!

I hope you have not given up on Decor. I am seeking the same solution. I wonder if you have found an answer to your question about the header background disappearing for mobile viewers.

 

Just to clarify...I'm not the theme developer.  This is a StudioPress theme.

[scoe]

This reply has been marked as private.

[gomlers]

Anyone found a solution to this problem?

I can see that it seems to fixed on the decor-demo, but on my page, I experience the same problem described in this thread.

Thank you scoe for addressing the problem so accurately!

[scoe]

Hi gomlers,

Thank you for reminding me to post this!

StudioPress support got back to me within 24 hours. AWESOME, aren't they?

In your style.css file, find the following:
.page .wrap,
.post .wrap {
background: #fff url(images/post-swirl.png) no-repeat right bottom;
}

Change this to:
.entry .wrap {
background: #fff url(images/post-swirl.png) no-repeat right bottom;
}

To fix the search results appearing in the header,  add this to your style.css file:

.search h1 {
margin-top: 40px;
}

((I added it at the end of the first screen section (before the <800 section starts, but that's me.))

If there is any other problems you are having let me know.  I am just stumbling through but I have worked out so many kinks with the help of other people here, I won't hesitate to help if I can.

- scoe

 

 

[gomlers]

scoe: PERFECT 🙂

Yes, StudioPress have great support, one of the best!

But thank you for giving such a quick reply! This worked so good, I should buy you a cup of coffee 🙂

I changed the search to margin-top: 60px; though.
I think that was more correct for my site 🙂

[Author]

Posts