How to make an unordered list responsive that has icons to the right

Question

I have a list that I have added arrows to the right. I need to make it responsive. But as the browser resizes, the arrows wrap to the next line and the text overlaps other text. This in intended to have paragraphs that will be hidden or displayed based on the list that is selected, but I have not added that code yet since I cant seem to get the list to work for responsive. I have also tried placing a div around the list elements and adding a separate div within the list tag for the arrow, but that didn't work. I also tried mading the unordered list a display of table and the list a display of table cell, but I couldn't get that to work either. I'm not sure what I am doing wrong in any case. There is only one break point for reponsive, and that is 960. Thanks to anyone who can help!!

HTML:

<div class="col-left">
    <div class="line-left"></div>
    <ul class="faqs">
        <li class="sel"><a href="#">What is a notification?</a>
            <p class="faq">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat. </p>

        </li>
        <li><a href="#">How do I know if I’m eligible for notifications?</a>
        <p class="faq">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat. </p>
        </li>
        <li><a href="#">Will I see all notifications?</a>
        <p class="faq">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat. </p>
        </li>
    </ul>
</div>

<div class="col-right">
    <div class="line-right"></div>
    <ul class="faqs">
        <li><a href="#">How often are notifications sent?</a>
        <p class="faq">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat. </p>
        </li>
        <li><a href="#">How do I receive notifications?</a>
        <p class="faq">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat. </p>
        </li>
        <li><a href="#">What will I actually see in the notifications?</a>
        <p class="faq">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat. </p>
        </li>
    </ul>
    </div>

CSS:

    ul.faqs {
    list-style-type: none;
    padding: 0;
    margin: 0;
}


li {
    display: block;
    width: 470px;
    height:auto;
    height: 56px;
    line-height:56px;
    border-bottom: 1px solid #d8d8d8;
}
li a {
    display: block;
    font-family: "helvetica-75-bold";
    font-size:16px;
    color:343366;
    text-decoration: none;
}

li a:after {
    content: "";
    display: inline-block;
    width:41px;
    height:22px;
    background: url(../images/../images/DropDownCarat.svg) no-repeat;
    float: right;
    position: relative;
    top: 19px;
}

li a:hover:after {
    content: "";
    display: inline-block;
    width:41px;
    height:22px;
    background: url(../images/../images/DropDownCarat-hov.svg) no-repeat;
    float: right;
    position: relative;
    top: 19px;
}

li.sel {
    height: auto;
}

li.sel p {
    margin-top: -5px; 
    line-height: 19px; 
    margin-bottom: 20px;
    color: #595959;
    visibility: visible;
}

p.faq {
    visibility: hidden;
}


li.sel a:after {
    content: "";
    display: inline-block;
    width:41px;
    height:22px;
    background: url(../images/../images/DropDownCarat.svg) no-repeat;
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    transform: rotate(-180deg);
    margin-right:20px;

}

li.sel a:hover:after {
    content: "";
    display: inline-block;
    width:41px;
    height:22px;
    background: url(../images/../images/DropDownCarat-hov.svg) no-repeat;
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    transform: rotate(-180deg);
    margin-right:20px;
}


@media (max-width:960px){

    .faqs-title {
    padding-left: 30px;
    padding-bottom: 35px;
}

    .content-faqs {
    width: 100%;
    margin:0 auto;
    padding-left:30px;
    padding-right:30px;
    height: 500px;
}

.col-left {
    width: 100%;
    float:none;
    margin-right: 30px;
}

.col-right {
    width: 100%;
    float:none;
}

    .line-left {
    width: 100%;
    height:1px;
    background-color:#d8d8d8;

}

    .line-right {
    display: none;

}

    li {
    display: block;
    width: 100%;
    height;auto;
    border-bottom: 1px solid #d8d8d8;
}


}

score 1 · Accepted Answer · answered Mar 31 '17 at 21:03

If you use display: none | block for toggling visibility, the non-selected paragraphs will collapse. Also, I floated the left column, and gave the right column a 50% left margin when the browser window is larger than your media query.

ul.faqs {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

li {
    display: block;
    width: 470px;
    height:auto;
    height: 56px;
    line-height:56px;
    border-bottom: 1px solid #d8d8d8;
}
li a {
    display: block;
    font-family: "helvetica-75-bold";
    font-size:16px;
    color:343366;
    text-decoration: none;
}

li a:after {
    content: "";
    display: inline-block;
    width:41px;
    height:22px;
    background: url(../images/../images/DropDownCarat.svg) no-repeat;
    float: right;
    position: relative;
    top: 19px;
}

li a:hover:after {
    content: "";
    display: inline-block;
    width:41px;
    height:22px;
    background: url(../images/../images/DropDownCarat.svg) no-repeat;
    float: right;
    position: relative;
    top: 19px;
}

li.sel {
    height: auto;
}

li.sel p {
    margin-top: -5px; 
    line-height: 19px; 
    margin-bottom: 20px;
    color: #595959;
    display: block;
    /** visibility: visible; **/
}

p.faq {
    display: none;
    /** visibility: hidden; **/
}


li.sel a:after {
    content: "";
    display: inline-block;
    width:41px;
    height:22px;
    background: url(../images/../images/DropDownCarat.svg) no-repeat;
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    transform: rotate(-180deg);
    margin-right:20px;

}

li.sel a:hover:after {
    content: "";
    display: inline-block;
    width:41px;
    height:22px;
    background: url('ddcarat.png') no-repeat;
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    transform: rotate(-180deg);
    margin-right:20px;
}

.col-left{
    float:left;
}

.col-right{
    margin-left: 50%;
}

@media (max-width:960px){

.faqs-title {
    padding-left: 30px;
    padding-bottom: 35px;
}

.content-faqs {
    width: 100%;
    margin:0 auto;
    padding-left:30px;
    padding-right:30px;
    height: 500px;
}

.col-left {
    width: 100%;
    float:none;
    margin-right: 30px;
}

.col-right {
    width: 100%;
    float:none;
    margin-left: 0;
}

    .line-left {
    width: 100%;
    height:1px;
    background-color:#d8d8d8;

}

    .line-right {
    display: none;

}

    li {
    display: block;
    width: 100%;
    height: auto; /** typo: had semi colon **/
    border-bottom: 1px solid #d8d8d8;
}


}

Thanks for the response. This is not working when the browser gets to 509 pixels width, the down arrows start to wrap to the next line. When the browser gets to 465 pixels width, the text wraps too low, which is because of the line-height of 56 pixels. How can this be fixed so the down arrows stay within the correct line, but at the same time allowing the text to wrap when it needs to. Thanks! — user3162058, Apr 03 '17 at 04:25
Forgot to mention that although the second column is still to the right, it appears to be pushed down below the first one, and still having the same issue that happening initially with the arrows wrapping and line-height too much as mentioned above. Thanks for any help! — user3162058, Apr 03 '17 at 04:35
I think the down arrows wrapping are due to the fact that they are "after" the heading. So even if you float them, they still are positioned relative to the point where the preceding line ends. I think this could be solved by creating a span class for the heading and floating that. Then setting the width of the heading so that it allows the caret to wrap right. — Jeffhowcodes, Apr 08 '17 at 13:53
Alternatively you could utilize the list itself to achieve this effect. Here is an article that shows a technique for placing bullets on the right of a list. You can then use the list-style-type property to set the bullet to use your caret image: http://stackoverflow.com/questions/21058885/align-bullet-points-to-the-right-instead-of-left — Jeffhowcodes, Apr 08 '17 at 13:55
Not sure what you mean by adding a span to the heading and then setting the width on the heading. Do you mean around the a tag? I tried that but it didn't work. Can you show an example of the code for that? Thanks! — user3162058, Apr 10 '17 at 14:08
Yes, this is perfect! Just what I was looking for. Thank you! — user3162058, Apr 11 '17 at 18:55

How to make an unordered list responsive that has icons to the right

1 Answers1