Archived topic
How to show single line for individual footer widgets
10 replies · Started by Deepak on February 11, 2021
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:
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
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 */
}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
Can anyone please 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 :)
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
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?
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
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;
}Thanks David. Works perfectly as expected.
Glad to hear that.
