Lay Theme Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Popular
    • Users
    • Search

    Position of rotated textbox

    General Discussion
    2
    10
    734
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • P
      Paul_Moxie last edited by Paul_Moxie

      Hi Laytheme Forum, Hi Armin.
      I have a problem with the position of a textbox i rotated using the following CSS:

      0_1506940602902_Bildschirmfoto 2017-10-02 um 12.36.10.png

      Now i want the textbox to be positioned on the right side of my website.
      But if i put it in that way like this:

      0_1506940788394_Bildschirmfoto 2017-10-02 um 12.38.24.png

      The column brakes in the frontend are all messed up, as you can see here:

      0_1506940923855_Bildschirmfoto 2017-10-02 um 12.39.58.png

      and if i position it like this to give enough space for the text to break normal, it appears to far away from the right side in the frontend:

      0_1506941007941_Bildschirmfoto 2017-10-02 um 12.42.46.png

      0_1506941074039_Bildschirmfoto 2017-10-02 um 12.42.53.png

      Do you have any solution on how to get proper column brakes and the right position?

      You can find the page here: http://heikoschulz.de/interview

      Greets, Paul

      1 Reply Last reply Reply Quote 0
      • mariusjopen
        mariusjopen Global Moderator last edited by

        Hi Paul,

        there is not a very clean solution.

        You can try to add a margin: -1vw; to your CSS. That will move it more to the right.

        I hope I could help!

        Best!

        Marius

        www.mariusjopen.world

        1 Reply Last reply Reply Quote 0
        • P
          Paul_Moxie last edited by

          @mariusjopen said in Position of rotated textbox:

          margin: -1vw;

          Hey Marius! First of all thanks for your reply! Unfortunately the code didn't work.. I think the problem might be that 'margin: -1vw' and every other code that refers to the position of the textbox only affects the position inside the row. but if I place the textbox in the right row, the columns break as if there was not enough space for the text to go on. Do you know what i mean?

          Greets, Paul

          1 Reply Last reply Reply Quote 0
          • mariusjopen
            mariusjopen Global Moderator last edited by

            Hi @Paul_Moxie

            I would give the box you want to rotate a special class (you did that already, right?)
            And then I would just giver it a fixed width and height.
            That should be not a problem.

            Let me know if that works for you!

            Best!

            Marius

            www.mariusjopen.world

            P 1 Reply Last reply Reply Quote 0
            • P
              Paul_Moxie @mariusjopen last edited by

              @mariusjopen Yeah right, i rotated it by using CSS and then giving a class to the textbox.
              How is possible to give a certain width and height? Do i also need custom CSS for this? Cheers, Paul

              1 Reply Last reply Reply Quote 0
              • mariusjopen
                mariusjopen Global Moderator last edited by

                Hi @Paul_Moxie
                exactly. In the Custom CSS you wrote you can add a width an a height:

                .forschungsfeld {
                    -ms-transform: rotate(-90deg);
                    -webkit-transform: rotate(-90deg);
                    transform: rotate(-90deg);
                    z-index: 5;
                    margin: -1vw;
                
                    width: 300px;
                    height: 200px;  
                }
                

                Let me know if that works for you!

                Best!

                Marius

                www.mariusjopen.world

                P 1 Reply Last reply Reply Quote 0
                • P
                  Paul_Moxie @mariusjopen last edited by

                  @mariusjopen Thanks for your reply. Unfortunately it didn't work :-(
                  What i forgot to tell you is that I also added CSS to fix the textbox on the page. so the whole code looks like this:

                  .forschungsfeld {
                  -ms-transform: rotate(-90deg);
                  -webkit-transform: rotate(-90deg);
                  transform: rotate(-90deg);
                  z-index: 5;
                  margin: -5vw;
                  width: 600px;
                  height: 200px;
                  }
                  .fixed{
                  position: fixed;
                  top: 180px;
                  right: 0;
                  z-index: 0;
                  }

                  I already tried adding the width/height part to the other CSS as well but it didn't work either.
                  Do you have any other ideas how to fix it?

                  Greets and thanks a lt for your help, Paul

                  1 Reply Last reply Reply Quote 0
                  • mariusjopen
                    mariusjopen Global Moderator last edited by

                    Hi @Paul_Moxie

                    so until now it looks like this:
                    0_1507719632701_Bildschirmfoto 2017-10-11 um 13.00.06.png

                    Can you make a quick mockup of how you want it to look like?

                    Best!

                    Marius

                    www.mariusjopen.world

                    P 1 Reply Last reply Reply Quote 0
                    • P
                      Paul_Moxie @mariusjopen last edited by

                      Hi @mariusjopen,
                      sorry for the late reply and thanks again for your help.
                      It's supposed to look something like this:

                      0_1508403420208_Bildschirmfoto 2017-10-19 um 10.55.54.png

                      Do you have any more ideas how to make that happen?
                      Cheers, Paul

                      1 Reply Last reply Reply Quote 0
                      • mariusjopen
                        mariusjopen Global Moderator last edited by

                        Hi @Paul_Moxie

                        Can you try to use this code here:

                        .fixed {
                            position: fixed;
                            top: 0px !important;
                            z-index: 0;
                            width: 600px !important;
                            right: -26vh;
                        }
                        

                        Also this is a workaround.

                        I hope that helps!

                        Best!

                        Marius

                        www.mariusjopen.world

                        1 Reply Last reply Reply Quote 0
                        • First post
                          Last post

                        Before you post

                        Use the Search Feature. Maybe there is already a solution to your issue.

                        1. Update Lay Theme and all Lay Theme Addons
                        2. Disable all Plugins
                        3. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code ", click "Save Changes"
                        4. Now see if your problem solved itself
                        5. Go here, see if your problem is listed here:
                        Troubleshooting

                        When you post:
                        1. Post a link to where the problem is
                        2. If the problem is difficult to explain, post screenshots / link to a video to explain it

                        Thanks!

                        Online Users

                        S
                        A
                        7
                        T

                        Recent Topics

                        • S

                          can't change front page

                        • A

                          Theme crashed - because of Polylang?

                        • M

                          komische boxen auf der Website

                        laytheme.com