Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • September 30, 2015 at 12:11 pm #511384
    LeonieSijtsma

    Hello,

    I have an image in a content section and I’d like to put the image higher. The padding of the content section is set to ‘none’, but the image still appears in the middle. Is there a way to adjust this? This is the website: http://co-si.nl/nieuw and I’m talking about the first content section. I want the white rectangle that’s on the section with the large photo to go up, right under the header.

    With kind regards,
    Leonie

    September 30, 2015 at 3:44 pm #511617
    Elliott

    Hi LeonieSijtsma!

    Drag a codeblock element to the page and add this inside.

    <style type = "text/css">
#home .avia-image-container {
    position: absolute;
    top: 0px;
}
</style>

    Cheers!
    Elliott

    September 30, 2015 at 6:01 pm #511740
    LeonieSijtsma

    Hi Elliot,

    Thanks for your answer. The white image is higher now, only it isn’t centered anymore and something strange is happening with the header; there’s extra white under the header now.

    Tnx!
    Leonie

    September 30, 2015 at 6:06 pm #511745
    Elliott

    Hi!

    I don’t see the white space your referring to, take a screenshot. You can center it with this.

    <style type = "text/css">
#home .avia-image-container {
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
}
</style>

    Regards,
    Elliott

    September 30, 2015 at 6:16 pm #511754
    LeonieSijtsma

    Hey,

    The image now went from the left to the right ;-)
    Uuhm, strange question, but I want to sent you a screenshot, but I don’t see how I can sent an attachment.

    Regards,
    Leonie

    October 1, 2015 at 8:05 am #511982
    Rikard

    Hi,

    You can upload screenshots to for instance imgur.com or a public dropbox folder and then link to them here. The image looks centered on my end though so I’m not sure if you got it the way you want or not?

    Thanks,
    Rikard

    October 1, 2015 at 8:45 am #512001
    LeonieSijtsma

    Hi Rikard,

    You can see the screenshot here
    In Chrome the image is centered, but in Safari is the image on the right as in the screenshot.
    And like you can see, under the header is an extra white space (in both browsers), only when I’m on top of the page. When I’m scrolling down, the white scrolls up with it and disappears.

    Regards,
    Leonie

    October 2, 2015 at 5:13 am #512520
    Rikard

    Hey Leonie,

    This is what I get in both Chrome and Safari: http://imgur.com/Vvn16lW, I’m guessing you got it fixed?

    Regards,
    Rikard

    • This reply was modified 9 years, 7 months ago by Rikard.
    October 2, 2015 at 2:55 pm #512847
    LeonieSijtsma

    Hi Rikard,

    I found the solution for the white space; I placed the codeblock in the content section instead of above it.
    I haven’t found a good solution yet for the centering of the image; for now I changed 50px to 30px in the code you gave meand now it seems to be in the center. But on a mobile screen or a screen with different resolution the image isn’t centered anymore.
    I moved the site to http:/www.co-si.nl by the way.

    Regards,
    Leonie

    October 3, 2015 at 6:51 am #513097
    Ismael

    Hey!

    Please turn on the custom css class: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

    Edit the image element, add a unique custom css class attribute as described in the documentation. Use “custom-image” for example, add this in the Quick CSS field to center align the image:

    #home .custom-image {
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translate(-50%, 0);
}

    Remove the previous code.

    Cheers!
    Ismael

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.