[Resolved] How to show single line for individual footer widgets

Home Forums Support [Resolved] How to show single line for individual footer widgets

Home Forums Support How to show single line for individual footer widgets

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #1653985
    Deepak

    Hello,

    I have setup 5 sections in the footer widgets and I would like to show single line and trim our the extra line for each list item in each of the footer widgets.

    I tried white-space: nowrap but it seems to breaking the theme when I reduce the browser window width:
    screenshot

    Also currently the 100% footer widget area is used, I have manually added a padding

    #footer-widgets {
        padding: 20px 140px;
    }
    
    @media (max-width: 1360px) {
    	#footer-widgets {padding: 0px 10px;}
    }
    
    @media (max-width: 985px) {
    	#footer-widgets {padding: 0px 10px;}
    }

    But then I have to handle different layout such as TAB and Mobile as for mobile if I use the above padding then most of the space is used. Is there any better way to dynamically adjust this for different layouts with minimal CSS selectors.

    Can you please help.

    Regards
    Deepak

    #1654315
    David
    Staff
    Customer Support

    Hi there,

    to truncate the text you could something like this:

    .footer-widgets .widget ul li a {
      max-width: 250px; /* Set max width of content */
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    You can set min-width and max-width properties in your @media queries and stack them logically so they only apply to where you require them – for example.

    /* Default padding – used everywhere outside of the following media queries */

    #footer-widgets {
        padding: 20px;
    }
    /* medium to large screens */
    
    @media (min-width: 985px) and (max-width: 1360px) {
        /* CSS for screens between 985 and 1360px */
    }
    #1654727
    Deepak

    Thanks David

    With the provided solution again I have to define different max-width for different devices. Isn’t there any way wherein the width is auto adjusted based on each widget’s allotted width.

    When I choose the widget count in footer then the widget width is automatically adjusted based on the available space. For example, when I have two footer widget then they are divided with 50% space for each I assume and so the list item’s length also should be auto adjusted without having to define max-width

    #1656028
    Deepak

    Can anyone please support.

    #1656310
    Leo
    Staff
    Customer Support

    Hi Deepak,

    Sorry not sure how we missed your last reply.

    I’m not exactly sure what the current issue here.

    Are you trying to make the footer widgets 50% in width for certain screen widths?

    Let me know 🙂

    #1656512
    Deepak

    Hi Leo,

    Thanks for your response.

    The requirement is to truncate the text and show single line in each of the footer widgets.

    The provided solution requires max-width but this is not dynamic and I have to add different values for different media layout.

    The footer widgets are already responsive for different layouts so the same should work with white-space: nowrap?

    Regards
    Deepak

    #1656519
    Leo
    Staff
    Customer Support

    The requirement is to truncate the text and show single line in each of the footer widgets.

    I’m not aware of a method to do this without adding a bunch of media queries/CSS.

    Have you seen this done somewhere?

    #1656545
    Deepak

    I have added it for my left and sidebar widgets without adding any special media queries.

    I have just used white-space: nowrap and based on browser size, the text automatically truncates in the sidebar without breaking the theme

    Regards
    Deepak

    #1656787
    David
    Staff
    Customer Support

    Not easy to do this. You can try this method:

    .footer-widgets .widget ul li a {
      display: block;
      display: -webkit-box;
      max-width: 100%;  height: 1.4em;
      margin: 0 auto;
      line-height: 1;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .footer-widgets .widget ul li {
      margin-bottom: 1em;
    }
    #1657101
    Deepak

    Thanks David. Works perfectly as expected.

    #1657328
    David
    Staff
    Customer Support
Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.