Making ul & li text responsive on all devices

HTML & CSS
1

I have a ul that has 4 columns that I need help with making responsive so on smaller devices, the text does not bunch up over each other. It looks good up until the smaller devices 400px and under and then the text overlaps each other. I don’t really want to make the font-size smaller because then it gets harder to read so I am hoping there is something else I could possibly do that is a better practice.

Here it the code that I have:

HTML:

<div id="services-content-working">
<h1>What’s it like working with me?</h1>
<div class="working-with-me">
<div id="working-define">
<h3>Discover</h3>
<p>&nbsp;</p>
<ul class="working-define-text">
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
<li>List item four</li>
</ul>
</div>
<div id="working-design">
<h3>Design</h3>
<p>&nbsp;</p>
<ul class="working-design-text">
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
<li>List item four</li>
</ul>
</div>
<div id="working-develop">
<h3>Develop</h3>
<p>&nbsp;</p>
<ul class="working-develop-text">
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
<li>List item four</li>
</ul>
</div>
<div id="working-deploy">
<h3>Deploy</h3>
<p>&nbsp;</p>
<ul class="working-deploy-text">
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
<li>List item four</li>
</ul>
</div>
</div>
</div>

CSS:

.working-with-me {
    width: 70%;
    margin: auto;
    color: #232C33;
}

#working-define, #working-design, #working-develop, #working-deploy {
    width: 25%;
    float: left;
    text-align: center;
    margin-bottom: 70px;
}

.working-with-me h3 {
    font-size: 36px;
    margin-top: 10px;
    width: 50%;
    margin: auto;
    border-bottom: 2px solid #232C33;
}
.working-with-me ul {
    text-align: left;
    margin-left: 5px;
    width: 95%;
    margin: auto;
    list-style-type: circle;
    padding-left: 30px;
}
@media (max-width: 900px) {
	.working-with-me h3 {
		font-size: 26px;
	}
	.working-with-me ul {
		font-size: 	12px;
	}
}
@media (max-width: 768px) {
	.working-with-me h3 {
		font-size: 20px !important;
	}
	.working-with-me ul {
		font-size: 	10px !important;
	}
@media (max-width: 600px) {
	.working-with-me h3 {
		font-size: 16px !important;
	}
@media (max-width: 400px) {
	#services-content-working h1 {
		font-size: 20px;
	}
	.working-with-me {
		width: 90%;
	}
	.working-with-me h3 {
		font-size: 10px !important;
	}
2

I’ve updated the post so that sections of code are wrapped in code tags to make it easier to understand the code.

The FAQ has some good details about formatting your post in the Forum Posting Basics thread.

3 Likes
3

Yes you don’t want to make the text smaller and smaller and indeed readable text on a mobile is 16px at least. I would never go below 14px anyway and in most cases you may actually want your body text larger on a mobile device. Of course you should avoid px anyway and use em or rem instead.

Also you don’t want to make your 4 columns smaller and smaller but rather refactor the layout as screen space diminishes. For column layouts you would usually reduce the number of columns progressively ending up with a single column for mobile screens.

These days we don’t use floats but use flexbox instead for a more reliable layout.

Avoid ids as targets for your css and just use classes to keep specificity easier to manage. Your 4 columns are all the same so could have been styled with one class.

Here’s a very quick re-jig using flexbox.

Note that I changed your h3 to an h2 for the demo because you can’t have an h3 on a page unless there already exists an h2.

As I said that’s a very quick demo as I am just on my way out and did this quickly but you should get the idea. :slight_smile:

2 Likes
4

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