-
Posts
-
Hi.
Thanks for the awesome theme.
I would like to pin an image to the bottom of a div. I could do this by seting the image as background in a color section, but I want to do as a image itself, so I don’t lose any background quick css changes.I’m posting a link to my page. You can see the “imac” image I want to pin in the bottom and a gradient background color section.
Thanks for your time.
Hey icodemarchi!
Thank you for visiting the support forum.
You can add a unique selector for each Avia Elements. Edit functions.php, find this code:
if(isset($avia_config['use_child_theme_functions_only'])) return;Below, add this code:
add_theme_support('avia_template_builder_custom_css');Edit any avia elements like the IMAGE element then scroll below. Add a unique css selector on “Custom Css Class” field. For example, add “awesome-image”.
Add the custom css class after the elements default selector. Something like this on your custom.css or Quick CSS:
.avia-image-container.awesome-image { position: relative; bottom: -150px; }Adjust the bottom value if necessary.
Refer to this link for more info: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/
Best regards,
IsmaelHi Ismael, thanks for quick answering my question.
I couldn’t find this first code line in functions.php file, but I believe the purpose was to enable the same feature described in the link you provided, custom CSS class to all ALB ellements.
So, following the link instructions I’ve enabled the custom class section and added the class you wrote. What happens is as I zoom in and out the image do not stick at the bottom of the color section, it moves to keep its position in the window.
Is there a way to relate this image so it recognizes the color section and stick to that?
Again thanks for your time and help.
Enrico.
Hey Enrico!
Try using this code instead:
#gradientecinza { position: relative; } .pintobottom { position: absolute; bottom: -125px; left: 0; right: 0; }Regards,
JosueHey!
Try adding this code to the Quick CSS:
@media only screen and (max-width: 767px) { #av_section_1 { background-size: 80%; } }Which gradient effect did you have? what code did you use?
Cheers!
JosueHi,
This is my gradient effect:
#gradientecinza { background: -moz-linear-gradient(center top , #FFFFFF 0%, #FFFFFF 50%, #E5E5E5 100%) repeat scroll 0 0 rgba(0, 0, 0, 0); }I tried these last code you suggested and still no success. The websites I’ve seen this effect weren’t responsive, would it be limited only to non-responsive sites?
Thank you very much,
Enrico.Hi Enrico!
Refer to this on how to combine CSS gradients and image backgrounds:
http://stackoverflow.com/questions/2504071/is-it-possible-to-combine-a-background-image-and-css3-gradientsThe code i suggested should make the color section look like this on smaller screens.
Cheers!
JosueHi Jouse,
I’m posting 2 links referring how my website displays in landscape and portrait in my iPhone 4S ios7:
https://www.dropbox.com/s/m8wucza76dsvkya/photo%201.PNG
https://www.dropbox.com/s/nerm0oknr3v646k/photo%202.PNGAbout the css gradient, I’ll check if it works but i’m pretty confident it does.
I believe we’re almost there :)
Cheers,
Enrico.Hey!
You would need to add some additional css rules to your text to changes its padding for mobile/tablet layouts. So if you give the text its own class you could then target it using media queries for those layouts specifically.
It’ll take a bit of fine tuning to get it where you want it but because its response it’ll need to be close-enough rather than exact. A good reference is http://css-tricks.com/css-media-queries/
Best regards,
Devin
- You must be logged in to reply to this topic.