Support Center Visit Demo License manager Buy @ envato

Feature List width

kathrin_helmedachkathrin_helmedach
in Shortcodes
Hello!

Is it possible to change the width of the feature list items? As you can see on this page, the width of one item is very big. It is double size of the text. I just want to have it as wide as the text length.



Comments

  • AlbertAlbert
    Hi,

    as we can see, all items are the same width (25%). So do you mean to move the 4th item into the same line as the rest of 3 elements are?
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • kathrin_helmedachkathrin_helmedach
    That's one concern, to move it in the same line. But what I really want to change is this big space on the right side of the text.

    Have a look here, I have mark the space in yellow:
    www.jaeger-handling.de/featurelist.png
  • AlbertAlbert
    Ok, got it. So to change list item width, you need to use the following css: 
    .feature_list[data-col="4"] ul li { width: 15% !important; }
    However, the last item won't go into the same line as list items, because the last one is not list item but just a plain link.
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • kathrin_helmedachkathrin_helmedach
    Unfortunately nothing is changing with this css. Do you have another idea?

    I have also deleted the link of the last item. It's also a list item, but still not in the same line.


    [item icon="icon-acrobat" title="Maßblatt" link="" target="" animate=""]
    [item icon="icon-acrobat" title="Datenblatt" link="" target="" animate=""]
    [item icon="icon-acrobat" title="Ersatzteile" link="" target="" animate=""]
    [item icon="icon-delicious" title="Step-Datei" link="" target="" animate=""]

            
  • AlbertAlbert
    It is not true. If you look at http://pasteboard.co/nuidQG3.png you will see that the css we gave you above of course works. You must did something wrong if it does not work on your end.
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • kathrin_helmedachkathrin_helmedach
    Well, I have pasted the css in the custom css area. I think there is not a lot what i could do wrong:

    And I am using the IE11 and Google Chrome 49 and in these browsers it still looks the same.

    Also the the 4th item is still not in the same line.


  • AlbertAlbert
    Ok, we see where the problem is. The css we gave you is different from what we gave you above. Just check and tell us why you added empty space between .feature_list AND [data-col="4"]
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • kathrin_helmedachkathrin_helmedach
    Oh wow... that was really the mistake. Now it's working. Thank you!
    But there was still the problem with the last item in the next line. I set the number of columns in the "feature list wrap" to 5, even if i have just 4 items, but now the last item is finally in the same line.

    That's a bit strange.
  • AlbertAlbert
    That's strange but we are glad to see that you sorted it out.
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
Sign In or Register to comment.