-
Posts
-
hi.
thanks so much for all your help so far. i’m just starting to play around with responsive features and color sections and i’m running into some issues.
you can find the page i’m editing here:
cindyworkman.comi have been playing around quite a bit to get exactly what i want visually and behaviour-wise.
the sample page noted above for my site (cindyworkman.com) includes lots of different variations tested to achieve my goals. for simplicity’s sake, please refer to the 1st color section and the layer slider right below this first color section as illustrations of what i’m describing below.
currently i have a one-page site using color sections with background images. When a browser window is fully expanded i’m seeing only one color section at a time – and this is what i want. when i expand the browser window to make it wider, the image is still great. but, when i reduce the size of my browser window (height, width or both), the image is not responsive and it is not resizing.
i saw another post where there were instructions to adjust the color-section’s background image to ‘stretch to fit’ and ‘center-center’ and while this does stretch the image effectively (when a browser window’s width is made larger), it does not resize the image when the browser window is made smaller (height, width or both). and it centers the image in the color section – which for me was not great as my image was willy-nilly clipped on both the left and right sides.
for my purposes, ‘stretch to fit’ produces a good visual result. but i also need to choose one of the fixed positions (e.g. bottom left) so i can control how my image gets clipped. in the end, how do you get this background image to responsively resize itself proportionally (based on a fixed point (e.g. bottom left)) when a browser window is made smaller or the site is viewed on a phone/tablet?
should i be using one of the other media elements?
i tried several other methods:
– nesting an image inside the color section. this didn’t work – and no longer on this sample page.
– just placing an image on the page. this also didn’t work as it created lots of surrounding white space. no longer on the sample page.
– i tried a fullscreen slider with a single image but it also didn’t respond responsively? it behaved just like the color section did as i described above.
and lastly i took a cursory peek at the site on my ipad and just see a clipped image?
what do you suggest as a solution? i’d prefer to stick with the color sections as they are easy/already coded with anchors to the various sections of the page but i’m open to anything….
thanks in advance for all your replies and suggestions.
cheers-
cindy
Hi cworkman1!
the problem with color section is that images used as background images can’t be controlled by CSS, only the color section itself. So my first suggestion would be to use normal images instead, so we can provide you with some CSS code to make them look like you want.
Cheers!
Andydear andy,
thanks so much for taking the time to reply to my question.
i tried using just an image and that was much better. it was responsive and i managed to get rid of the top/bottom padding but couldn’t get rid of all the extra space on the right and left sides no matter what i did.
at this point i’m caving and hiring someone from werkpress.
but thanks again for chiming in.
cheers-
cindy
Hi!
Good decision. I’m sure they will be able to help you better there. Anyway, if you still have questions, let us know. :)
Regards,
IsmaelCan you please tell me how to do this, too? You can see in my two color sections here: http://wordpresslearning.thepixelwizard.com/frontpage-test-3/ that they’re not responsive. Would I have to give each color section an ID, and then what?
thank you!
Hi!
Those columns are behaving as expected, the problem is their parent section background. I’d suggest doing that with CSS instead:
#av_section_1 .av_one_half.avia-builder-el-4, #av_section_1 .av_one_half.avia-builder-el-6{ padding: 20px; min-height: 355px; background: #e1e1d1; border-radius: 20px; }Regards,
Josuethank you!
How do I implement this? I know how to add css, but do I replace the background with my file, instead
background-image:url(http://wordpresslearning.thepixelwizard.com/wp-content/uploads/2015/03/robbinYouTubeColorSection-012.png); ? It’s an image that’s creating that background and not a background color and border radius? I’m not sure if that was clear?Hi!
No, the idea is to replace the image with the CSS code, because the image can’t behave responsively, it has a fixed size and a fixed position.
Cheers!
Josuequestion: could I provide different backgrounds based on screen size limits? The top one with the woman’s photo would be more important since it should always show her name at least. I think this sort of a manual workaround for the problem.
gary
I received this CSS to use for one of my other Enfold questions. Would this work?
<style type = "text/css">
@media only screen and (max-width: 479px) {
#av_section_1 { background-image: url("YOUR URL") !important;
}
</style>And then replace “YOUR URL” with the URL to your smaller image.
- You must be logged in to reply to this topic.