How to keep icons that are to the right of unordered list from wrapping to next line for responsive

.content-faqs {
	width: 970px;
	margin:0 auto;
	height: 500px;
}

.col-left {
	width: 470px;
	float:left;
	margin-right: 30px;
}

.col-right {
	width: 470px;
	float:right;
}


.line-left {
	width: 470px;
	height:1px;
	background-color:#d8d8d8;
	
}

.line-right {
	width: 470px;
	height:1px;
	background-color:#d8d8d8;
	
}

H5 {
	font-family: "helvetica-75-bold";
	font-size:16px;
	color: #343466;
}

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;
}
	
	
}

Here is the HTML:

<div class="content-faqs"> 	
 
	<div class="col-left">
		<div class="line-left"></div>
		<ul class="faqs">
			<li class="sel"><a href="#">What are 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="#">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>		
 		
</div><!--end content-faqs-->

If you want something to be responsive, you can’t be using fixed widths like width: 470px;

1 Like

Can you show us the HTML that goes with the CSS, please? A link to a test page would probably be OK.

:slight_smile:

1 Like

I have just added the HTML as well.

1 Like

I was using fixed widths only for desktop, and changing to percentages when browser reaches 960px. I have tried using percentages but still does not solve the issue of the down arrows wrapping to the next line, along with the text in the list. I know that line-height is an issue, but not sure how to make the list the height that it needs to be to hide the text in the paragraph which is the answer. At some point, code will be added to hide and show the text in the paragraph. Thanks for any help I can get as I am not able to find a solution.

amymcdo3,

There should be very few fixed widths and equally few fixed heights in a responsive web page. In general, one does not need to change from fixed widths for desktop to percent widths for mobiles. Likewise, a block element, or one with display:block does not generally need a width of 100% assigned. By default, blocks expand to the full width of the available space.

I will create some placeholders to substitute for the .svg images.

Have you read a book or taken a course in web page design? Your code is nicely formatted :slight_smile:

I have experience with HTML and CSS, but I have not been coding for the past several years. I have also never done a responsive page before, so this is a learning curve for sure. Thank you for offering to help. I greatly appreciate it!

1 Like

A good alternative is to use max-width in place of width as this does not require changing for smaller screens. Blocks will behave like their default width: auto when their container is too small for their max-width.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.