Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • April 25, 2015 at 12:59 am #434521
    mterrian

    Much of Enfold is nicely responsive, and for that I am grateful. But some parts are quite stubborn.

    I’ve found bits and pieces of this in other posts, but nothing that really solves the issue of unresponsive background images in color sections.

    It’s a simple page header…a background image (set to scroll, and sized at 1500px wide) overlaid by a text module (link provided) but it does not respond on mobile at all. I sense that to make it responsive I need to insert some custom CSS. Is that correct? What would that CSS be?

    Thanks, guys

    April 27, 2015 at 5:30 pm #435445
    Elliott

    Hi mterrian!

    You can set the “Background Repeat” option to “Stretch to fit” but in your case it would probably be best to upload an image with a larger height. It might not look very good since it’s so wide and not very tall.

    Some other stuff you can do is set your header to “No transparency” and set the background position to center center instead of top left.

    Best regards,
    Elliott

    April 27, 2015 at 5:53 pm #435465
    mterrian

    Hi Elliott,
    Thanks. It’s tough because this is just supposed to be a strip of a photo, and using a larger photo might be unpredictable in terms of what shows up. I’m not sure what you mean about making my header “no transparency” —- this isn’t a header, just a color section with a background image. Am I missing something?
    M

    April 27, 2015 at 9:59 pm #435669
    mterrian

    Just to be a little clearer, I’m showing you an image of what it looks like on iPhone. http://xponents.websitesforgood.com/wp-content/uploads/2015/04/Screen-shot-2015-04-27-at-1.55.12-PM.png If the color section were responsive, we would be able to read the page title. As it is, it remains full-size and you have to scroll down.

    I have set the background image to center/center and stretch to fit. Didn’t seem to fix this problem….

    Is there some custom CSS that would reduce the entire color section’s size (including background image) for iPhone/iPad? I’m a little disappointed this isn’t responsive, but maybe we can get there somehow?

    April 28, 2015 at 10:57 am #435912
    Rikard

    Hi!

    Seems like you’ve made some CSS customisation so the theme is not to blame, remove this from xponents.css. 

    .template-page .entry-content-wrapper h1 {
  margin-top: 120px!important;
  margin-bottom: 120px!important;
}

    I think you did this to show more of the image in the color section, please set the height of the color section instead.

    Cheers!
    Rikard

    April 28, 2015 at 2:49 pm #436046
    mterrian

    Thanks, Rikard. I’ve done that.
    BUT it does not change the lack of responsiveness. The Color Section and its background are still fixed and huge on smaller devices.
    Again, do you guys have some Custom CSS on file that will make that part of your theme responsive?

    • This reply was modified 9 years, 7 months ago by mterrian. Reason: Solution didn't affect problem
  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Responsive Color Section Background Image?’ is closed to new replies.