Lay Theme Forum

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

    Left align on mobile device

    General Discussion
    2
    8
    872
    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.
    • M
      Mauro A. Santos last edited by

      Hey, guys! (First post here)

      First and foremost let me thank you to Armin, for the effort of developing a very flexible and noob proof tool for folks like me (that don't understand anything of code. Even though previously having a blog on Tumblr and by setting this website made me dig and try to understand a bit more in this complex world....but is definitely not my cup of tea! hehe

      After this little introduction here is my problem:

      Does anyone know how to impose left alignment in mobile devices in some text (or column) that was set (aligned) primarily to be on the right side?

      I´ll show you better what I'm trying to do.

      This is my footer in the desktop version:

      1.jpg

      This is how it is on back end:

      2.jpg

      And this is how wrong it looks when in the mobile version.

      3.jpg

      Is it possible to impose it on left? I suppose yes. Since I´ve tried to play a bit in the chrome programmers tool and made it, But since I don't understand sh*t of code... I can´t apply it.

      But it seems possible to do via CSS right?

      If it helps here it is the website so far, so that you can take a look in the code. www.o-grafiks.pt

      I appreciate any help on this!

      Thanks.

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

        Hey!
        If you know some CSS: You can give elements a class by hovering over them in the gridder and clicking the "class" button. Then you can use the css fields in "Lay Options" -> "Custom HTML & CSS" to style the positioning of your text for mobile.

        But:
        In your special case I think the easiest solution would be to have one text element instead of two. In your one textelement you write "Avoid following the… (c) 2016" all into one line. Then you select the part "(c) 2016" and text-align it to the right using the texteditor's textalign buttons. And the part "Avoid following…" should be text-align left.

        Normally each element is stacked on top of each other on mobile thats why your 2 textblocks are on top of each other.

        M 1 Reply Last reply Reply Quote 0
        • M
          Mauro A. Santos @arminunruh last edited by Mauro A. Santos

          @arminunruh

          Armin, thanks for the help.

          The first option, the CSS one, is too much for me!

          I´ve tried the second one, but it doesn´t work as you describe...

          What I´ve tried before was something similar. I´ve tried using this "trick" in the source code (html). It kind of works... but it loses the formatting/paragraph style. :\

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

            Ah yeah thats looking good. If you want to keep using your paragraph style, then you need to add your class to your paragraph.

            You see, when you create a textformat like here, then theres "HTML Class: _My_Headline"
            Screen Shot 2016-02-24 at 10.27.26.png

            Please take a look at what the html class is of your textstyle that you want to use. Then you can add that class to your paragraph tags:

            <div id="textbox">
              <p class="alignleft _My_Headline">Text on the left.</p>
              <p class="alignright _My_Headline">Text on the right.</p>
            </div>
            
            M 1 Reply Last reply Reply Quote 0
            • M
              Mauro A. Santos @arminunruh last edited by Mauro A. Santos

              @arminunruh

              Thanks for the tip!

              I think that I am almost there... but now everything sits on the left (even on the desktop version).

              But let me tell you what I did:

              1st - I added the class to the text box.

              1.jpg

              2nd - I wrote this on the html source code:

              2.jpg

              3rd - And this is how it looks on desktop and mobile version:

              3.jpg

              4.jpg

              Do you see anything that I´ve might be doing wrong?

              1 Reply Last reply Reply Quote 0
              • M
                Mauro A. Santos last edited by Mauro A. Santos

                Oh I forgot to say...that in the gridder, things look proper. But they don't work as they shows there!! (Check the second picture on the post above)

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

                  Hey, thanks for your good explanations!

                  Well I don't see any CSS at all that targets the HTML of your footer.
                  You need to use CSS in combination with your HTML, just some HTML by itself doesn't do much.
                  This CSS in combination with your current HTML markup should work:

                  .alignleft{
                  float: left;
                  }
                  .alignright{
                  float: right;
                  }
                  

                  If you want to do more little customizations like this please look at how CSS and HTML works in these tutorials:
                  https://www.khanacademy.org/computing/computer-programming/html-css
                  https://www.khanacademy.org/computing/computer-programming/html-css/web-development-tools/a/using-the-browser-developer-tools

                  btw. really nice website you created and thx a lot for giving lay theme credit there.

                  M 1 Reply Last reply Reply Quote 0
                  • M
                    Mauro A. Santos @arminunruh last edited by

                    @arminunruh

                    Thank you so much for your time! You rock!

                    Ohhh ok! Totally noob on Webdesign. But it´s starting to make sense for me! Hehehe!

                    I´ve inserted the CSS, and now it works just perfect! :clap:

                    Thank you also for the links (I´ll definitely take a look and try to learn the basics of web coding). And for the feedback on my humble website, it wouldn´t be possible without your amazing work, the credits are the least that I can do. Hopefully, when €£$ start running I´ll make a donation. Mark my words! :-)

                    Cheers Armin!

                    1 Reply Last reply Reply Quote 1
                    • First post
                      Last post
                    Post a link to where the problem is if possible, please <3
                    I don't answer or check forum DMs, please just post on the forum.
                    Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com

                    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. When using a WordPress Cache plugin, disable it or clear your cache. Now see if your problem solved itself.
                    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

                    H
                    M
                    B

                    Recent Topics

                    • H

                      Vimeo embed with autoplay and loop is really slow...help!

                    • B

                      FILTER Categories showing all projects

                    • A

                      website not loading on iphone safari

                    • Gridder hides content / thumbnail grid

                    laytheme.com