-
AuthorPosts
-
April 25, 2015 at 12:59 am #434521
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 #435445Hi 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,
ElliottApril 27, 2015 at 5:53 pm #435465Hi 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?
MApril 27, 2015 at 9:59 pm #435669Just 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 #435912Hi!
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!
RikardApril 28, 2015 at 2:49 pm #436046Thanks, 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, 8 months ago by mterrian. Reason: Solution didn't affect problem
-
AuthorPosts
- The topic ‘Responsive Color Section Background Image?’ is closed to new replies.