Skip to content
  • Recent
  • Tags
  • Popular
  • Users
  • Search
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse

Lay Theme Forum

  1. Home
  2. General Discussion
  3. text content to be have fixed width after a certain size

text content to be have fixed width after a certain size

Scheduled Pinned Locked Moved General Discussion
10 Posts 3 Posters 199 Views
  • 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 Offline
    P Offline
    panteley
    wrote on Sep 20, 2024, 7:58 AM last edited by panteley Sep 20, 2024, 3:58 AM
    #1

    Hi,

    Was wondering, is there any way to make this text in the first section, not to adapt to grid 'so to say' after a certain width.

    6ec38b06-7ffe-4374-8cba-cc462f1c4625-image.png

    What I mean, is the text box above not to extend more than how it looks in the image.

    For reference, see this text box here :

    2d629856-f500-4cfa-aa22-143dbef93135-image.png

    It responds when the browser is decrasing, but this form/view won't be deformed doesn't matter how big the screen is,

    🤔

    P 1 Reply Last reply Sep 20, 2024, 8:11 AM
    0
    • P panteley
      Sep 20, 2024, 7:58 AM

      Hi,

      Was wondering, is there any way to make this text in the first section, not to adapt to grid 'so to say' after a certain width.

      6ec38b06-7ffe-4374-8cba-cc462f1c4625-image.png

      What I mean, is the text box above not to extend more than how it looks in the image.

      For reference, see this text box here:

      2d629856-f500-4cfa-aa22-143dbef93135-image.png

      It responds when the browser is decrasing, but this form/view won't be deformed doesn't matter how big the screen is,

      🤔

      P Offline
      P Offline
      panteley
      wrote on Sep 20, 2024, 8:11 AM last edited by panteley Sep 20, 2024, 4:13 AM
      #2

      @arminunruh

      I think I did it through some CSS,

      .main-text-cover {
      	width: 70%!important;
        align-items: center!important;
        justify-content: center!important;
      }
      

      Just now I have to find how to center it, :D

      1 Reply Last reply
      0
      • A Offline
        A Offline
        arminunruh
        Global Moderator
        wrote on Sep 20, 2024, 11:09 AM last edited by arminunruh Sep 20, 2024, 7:12 AM
        #3

        can you right click the text, and then click:
        Screenshot 2024-09-20 at 13.09.16.png

        here you have settings for this i think this fixes it
        pls remove or comment out your css before using this

        1 Reply Last reply
        0
        • P Offline
          P Offline
          panteley
          wrote on Sep 20, 2024, 11:17 AM last edited by
          #4

          Tried it before I went for the costum CSS, and while it was changing in the Gridder, it wasn't affecting at all the element in the website preview.

          Maybe isn't 100% precise, but the costum CSS is working fine for now.

          Thank you again, :)

          1 Reply Last reply
          0
          • A Offline
            A Offline
            arminunruh
            Global Moderator
            wrote on Sep 20, 2024, 11:25 AM last edited by
            #5

            you could also think about using a textformat with fontsize in %. this way the text scales

            1 Reply Last reply
            1
            • P Offline
              P Offline
              panteley
              wrote on Sep 21, 2024, 9:07 AM last edited by panteley Sep 21, 2024, 5:11 AM
              #6

              @arminunruh Is there any way I can center the text block? 🤔 It's all I need now

              image.png

              1 Reply Last reply
              0
              • F Offline
                F Offline
                felix_rabe
                wrote on Sep 21, 2024, 1:04 PM last edited by
                #7

                @panteley

                Add this to your main-text-cover css:

                left: 50%!important;
                transform: translateX(-50%);

                P 1 Reply Last reply Sep 21, 2024, 6:12 PM
                1
                • F felix_rabe
                  Sep 21, 2024, 1:04 PM

                  @panteley

                  Add this to your main-text-cover css:

                  left: 50%!important;
                  transform: translateX(-50%);

                  P Offline
                  P Offline
                  panteley
                  wrote on Sep 21, 2024, 6:12 PM last edited by
                  #8

                  @felix_rabe

                  Thank you man, it works almost perfectly. If I can only get rid of that fraction of a second when you load the page and the text box moves from right to center.

                  1 Reply Last reply
                  0
                  • F Offline
                    F Offline
                    felix_rabe
                    wrote on Sep 23, 2024, 2:14 PM last edited by felix_rabe Sep 23, 2024, 10:15 AM
                    #9

                    @panteley try this:
                    transform: translateX(-50%)!important;

                    maybe this forces your style to be applied at page load.

                    P 1 Reply Last reply Sep 23, 2024, 5:16 PM
                    1
                    • F felix_rabe
                      Sep 23, 2024, 2:14 PM

                      @panteley try this:
                      transform: translateX(-50%)!important;

                      maybe this forces your style to be applied at page load.

                      P Offline
                      P Offline
                      panteley
                      wrote on Sep 23, 2024, 5:16 PM last edited by
                      #10

                      @felix_rabe

                      and it worked! 🎉

                      Appreciate your help a lot! 🙏

                      1 Reply Last reply
                      0
                      Reply
                      • Reply as topic
                      Log in to reply
                      • Oldest to Newest
                      • Newest to Oldest
                      • Most Votes

                      2/10

                      Sep 20, 2024, 8:11 AM

                      topic:navigator.unread, 8

                      I also code custom websites or custom Lay features.
                      💿 Email me here: 💿
                      info@laytheme.com

                      Before you post:
                      1. When using a WordPress Cache plugin, disable it or clear your cache.
                      2. Update Lay Theme and all Lay Theme Addons
                      3. Disable all Plugins
                      4. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"

                      This often solves issues you might run into

                      When you post:
                      1. Post a link to where the problem is
                      2. Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
                      3. If the problem is difficult to explain, post screenshots / link to a video to explain it
                      Online Users
                      A
                      axmannrottler
                      2 minutes ago
                      Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com
                      laytheme.com
                      • Login

                      • Don't have an account? Register

                      • Login or register to search.
                      2 out of 10
                      • First post
                        2/10
                        Last post
                      0
                      • Recent
                      • Tags
                      • Popular
                      • Users
                      • Search