absolute repositioning of text?

  • Author
    Posts
  • #3057235

    411holy
    Member

    I want to reposition the text on the back of a flipcard. I tried using the following but it doesn’t adust well to screen size changes

    .cl-flipbox-back-h {
      position: absolute;
      right: 30%;
    }

    Should I use something different than ABSOLUTE? I tired also using pixels but get the same results.

    The blog I need help with is ewtn.blog.

    #3057366

    Hi @411holy,

    What kind of reposition of text do you want to be done? I see that you want to change the back flipcard with the Pope, is that correct?

    As I’m seeing its behavior on my end, the text position seems to be centered and displays normally.

    Could you give more details on what needed to be done?

    #3057367

    411holy
    Member

    Hi, yes the page with pope.

    Yes, right now I don’t have the adjustment above in my CSS.

    I would like to be able to move the text, button, and tile on the card to the left about 100 px, to have it centered in the white space. (It’s not so much an issue on this card, but for others I plan on doing in the future, it would be necessary.

    #3057368

    @411holy,

    I see what you mean now. I have added the modlook tag so a Staff can help you.

    Have you tried to edit the div in the CSS editor adding the “div” in front of the class name?

    div.cl-flipbox-back-h {
    position: absolute;
    right: 30%;
    }

    I would also make individual changes to each element to see if that works.

    #3057391

    supernovia
    Staff

    Hi @411holy, I wouldn’t recommend moving it in pixels, because the width of the box changes with your screen width. Also, trying to absolutely position it may cause issues..

    Unfortunately much of the CSS for this is added inline, which makes it difficult to override, but that suggests there are controls within the plugin itself to help with alignment and what not. Consider checking its documentation and community forums, too.

    You can try a percentage instead, like so:

    p.cl-flipbox-back-desc, h4.cl-flipbox-back-title {
        padding-right: 30% !important;
    }

    For what it’s worth, I noticed that the Pope gets cut off completely on smaller screen widths. I don’t see a good solution to that: note the dimensions of the box and how the picture would fit properly in that space.

    #3057401

    411holy
    Member

    Thanks. What you gave me worked best of all options, but there was still problems. I had to adjust the percentage, and at 8% it wasn’t even worth doing.

    The button did not move, either. I tried adding

    .cl-btn {
        padding-right: 8% !important;
    }

    but it had no effect.

    I don’t always use the right selectors.

    Thanks for your help :)

    #3057463

    supernovia
    Staff
    .cl-flipbox-back-h {
        padding-right: 50%;
    }

    Moves everything to the right, but it might be better to position elements individually.

    You could also use media queries to reposition things or resize text on smaller screens.

    #3057464

    411holy
    Member

    Thanks, that works with 30%. Still have issues for smaller screens, but may end up hiding it on them anyways.

    #3057472

    supernovia
    Staff

    Ah, cool. I think I must have got lost in the weeds as I was also trying to align the text earlier (and individual elements wouldn’t respond to a more general selector.) Glad that did the trick!

The topic ‘absolute repositioning of text?’ is closed to new replies.