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. how to stretch Title and description text wider than the thumbnail image

how to stretch Title and description text wider than the thumbnail image

Scheduled Pinned Locked Moved General Discussion
7 Posts 3 Posters 118 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
    pavloradich
    wrote on last edited by
    #1

    Hi, my title and description are wider than my thumbnail image (I need thumbnail to be pretty small), and I don't like how it start going on a third line. How to let them stretch in their full width (wider than the thumbnail)?

    Please see image.
    Thank you!

    Screenshot 2024-07-24 at 13.34.55.png

    1 Reply Last reply
    0
    • arminunruhA Offline
      arminunruhA Offline
      arminunruh
      Global Moderator
      wrote on last edited by
      #2

      its a project thumbnail right?

      .thumb .title{
      white-space: nowrap;
      }
      

      can u try this css in lay options → custom css & html

      P 1 Reply Last reply
      0
      • arminunruhA arminunruh

        its a project thumbnail right?

        .thumb .title{
        white-space: nowrap;
        }
        

        can u try this css in lay options → custom css & html

        P Offline
        P Offline
        pavloradich
        wrote on last edited by
        #3

        @arminunruh Worked, but it positioned the text aligned to the left, and not center, for some reason.
        PS. I have "align to center" activated in thumbnail settings.

        Screenshot 2024-07-25 at 21.22.49.png

        1 Reply Last reply
        0
        • F Offline
          F Offline
          felix_rabe
          wrote on last edited by felix_rabe
          #4

          @pavloradich you can make the thumbnail in the gridder a big wider and shrink the size of the image in it with css. You can inspect the element in your browser and find out the different classes.

          Or you deactivate the thumbnail titles in the customizer and place the titles in separate text fields under the thumbnails.

          P 1 Reply Last reply
          0
          • F felix_rabe

            @pavloradich you can make the thumbnail in the gridder a big wider and shrink the size of the image in it with css. You can inspect the element in your browser and find out the different classes.

            Or you deactivate the thumbnail titles in the customizer and place the titles in separate text fields under the thumbnails.

            P Offline
            P Offline
            pavloradich
            wrote on last edited by
            #5

            @felix_rabe thank you for the suggestion but I would prefer to keep them as thumbnails with title and description underneath because this way they scale properly. I just need to know how to center the offset title.

            1 Reply Last reply
            0
            • F Offline
              F Offline
              felix_rabe
              wrote on last edited by
              #6

              maybe:

               .thumb .title{
               white-space: nowrap;
               transform: translateX(-50%);
               }
              

              Than can move the text to the left by 50 percent of its length. You can adjust this value.

              1 Reply Last reply
              2
              • arminunruhA Offline
                arminunruhA Offline
                arminunruh
                Global Moderator
                wrote on last edited by
                #7

                very good felix, only thing that is missing is left: 50%;

                so it should be:

                 .thumb .title{
                    white-space: nowrap!important;
                    left: 50%!important;
                    position: relative!important;
                    transform: translateX(-50%)!important;
                    display: inline-block!important;
                 }
                

                also it needs to be inline-block and position relative for that to work properly

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


                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
                alasdair17
                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.
                • First post
                  Last post
                0
                • Recent
                • Tags
                • Popular
                • Users
                • Search