• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Responsive Scrolling / Missing Background

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › General Discussion › Responsive Scrolling / Missing Background

This topic is: not resolved

Tagged: background, responsive, scroll

  • This topic has 8 replies, 5 voices, and was last updated 10 years ago by gomlers.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • February 11, 2013 at 10:55 pm #19763
    eightcrazy
    Member

    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?

    February 14, 2013 at 11:33 am #20340
    flipflopfreelance
    Member

    Yes, I am wondering the exact same thing!

    February 18, 2013 at 10:50 pm #21201
    David Chu
    Participant

    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

    March 4, 2013 at 9:33 pm #24262
    scoe
    Member

    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

     

    March 4, 2013 at 9:43 pm #24263
    eightcrazy
    Member

    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.

    March 5, 2013 at 5:27 am #24279
    scoe
    Member
    This reply has been marked as private.
    March 13, 2013 at 4:44 pm #26067
    gomlers
    Member

    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!

    March 13, 2013 at 5:07 pm #26074
    scoe
    Member

    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

     

     

    March 13, 2013 at 5:34 pm #26078
    gomlers
    Member

    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
Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘General Discussion’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble