Reponse text size

Discussion in 'Programming/Html' started by Jamie T, Oct 22, 2015.

  1. Jamie T

    Jamie T Master Guru

    Messages:
    321
    Likes Received:
    0
    GPU:
    MSI GTX 980Ti OC Edition
    Hey,

    I'm using this free wordpress site and whenever a title is to longer it do's an enter and ruins the entire look of the website by pushing everything down looking out of place.

    Any idea how I can set the text size to shrink in a Class thats for example max 300 pixels width so it will always fit and not push the other stuff down.

    Has to be done in CSS only, don't think I can add js, because it's the free version.
     
  2. Anarion

    Anarion Ancient Guru

    Messages:
    12,921
    Likes Received:
    2
    GPU:
    EVGA GeForce GTX 1070 ACX
    You really should just buy webhotel or vps for your site... No limitations to Wordpress that way.

    If you want to set maximum width to element:

    Code:
    
    .classname {
       max-width: 300px;
    }
    
    
    If you want to truncate the text so that it doesn't wrap to next line:

    Code:
    
    .classname {
       max-width: 100%;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
    }
    
    
    If you want to adjust the font size based on browser window width, use media query:

    Code:
    
     /* This gets applied to screen/window size that are smaller than 400px */
    @media screen and (max-width: 400px) {
        .classname {
            font-size: 13px;
            /* and what ever else you want */
        }
    }
    
     
    Last edited: Nov 1, 2015

Share This Page