Responsive Scrolling / Missing Background

Community Forums Forums General Discussion Responsive Scrolling / Missing Background

This topic is: not resolved

This topic contains 8 replies, has 5 voices, and was last updated by  gomlers 1 year, 9 months ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #19763

    eightcrazy
    Participant
    Post count: 9

    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?

    #20340

    flipflopfreelance
    Participant
    Post count: 1

    Yes, I am wondering the exact same thing!

    #21201

    David Chu
    Participant
    Post count: 1426

    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

    #24262

    scoe
    Participant
    Post count: 60

    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

     

    #24263

    eightcrazy
    Participant
    Post count: 9

    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.

    #24279

    scoe
    Participant
    Post count: 60
    This reply has been marked as private.
    #26067

    gomlers
    Participant
    Post count: 29

    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!

    #26074

    scoe
    Participant
    Post count: 60

    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

     

     

    #26078

    gomlers
    Participant
    Post count: 29

    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 :)

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.