Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • February 2, 2023 at 6:31 pm #1396444
    Monika

    Hey there,

    is it possible to force a column or picture with css to stick to the right side of the browser window?
    Attached you see the right side there’s space on big screens which i would like to avoid.
    I could put the picture in the background of the color section but then i cant use the customizes css for the picture to be inside this special shape. And I need this Textblock on the left side which i can’t put in when i use a fullwidth element like a slider .
    So I tried it with this css for the column, but on larger screens it does not work.
    It would be better to not use absolute pixel numbers but i have no idea how it would work out better.
    Perhaps you have an Idea.

    .zum-rand {
    right: -70px;
    top: -90px;
    }

    February 3, 2023 at 4:43 am #1396478
    Ismael

    Hey Monika,

    Thank you for the inquiry.

    You can set the position property of the element to “fixed”.

    .zum-rand {
   position: fixed;
   right: -70px;
   top: -90px;
}

    // https://www.w3schools.com/Css/css_positioning.asp

    You can also use a plugin.

    // https://wordpress.org/plugins/all-in-one-wp-sticky-anything/

    Best regards,
    Ismael

    February 28, 2023 at 9:41 am #1399493
    Monika

    hey Ismael,

    thank you!
    The “position: fixed;” sadly does not change the picture to be positioned on the right side of the browser.
    I also do not want it to be sticky in a sense of staying at one position. Is should just “know” that th picture should be placed on the horizontal right end.
    As if i would put it in the background and tell him to be at the “right top”, but also be scollable.
    Actually i need the code which is used when a background picture is positioned at the right side.

    Is this possible?

    Thank you!

    March 1, 2023 at 9:55 am #1399644
    Nikko

    Hi Monika,

    To position the picture to the right (using a color section) assuming the layout you’re using is the same as the one in private content, please do the following:
    1. Edit the Color Section, then go to Advanced > Developer Settings > Custom CSS Class and put move-right and save.
    2. Go to Enfold > General Styling > Quick CSS and add this CSS code

    #top .move-right .container {
    margin-right: 0;
}

    You can use this again on other sections by repeating only step 1.

    To position the picture to the left:
    1. Edit the Color Section, then go to Advanced > Developer Settings > Custom CSS Class and put move-left and save.
    2. Go to Enfold > General Styling > Quick CSS and add this CSS code

    #top .move-left .container {
    margin-left: 0;
}

    You can use this again on other sections by repeating only step 1.
    Hope this helps.

    Best regards,
    Nikko

    March 2, 2023 at 4:57 pm #1399856
    Monika

    Hey Nikko,

    i did this:
    First grid Element and second color section I added css class “move-right” and this css code in the customizer 

    #top .move-right .container {
    margin-right: 0;
}

    But nothing happens, the picture is still not on the right side of my browser window.
    What did I wrong?

    March 2, 2023 at 11:13 pm #1399909
    Nikko

    Hi Monika,

    Please use this CSS code instead:

    #top .move-right .container {
    margin-right: 0;
    padding-right: 0;
}

#top .move-left .container {
    margin-left: 0;
    padding-left: 0;
}

#top .move-right .container .avia-image-container,
#top .move-left .container .avia-image-container {
    margin: 0;
}

    Best regards,
    Nikko

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