How can I make this CSS part mobile friendly?

Question

I've added a new section to my new HTML template which shows country flags and some other information. But as you see in this video when I switch to the mobile view it destroys. But in desktop mode it's ok.

The original template is new and mobile-friendly but only this new part which I added is not working in mobile devices. Video: see here

This is HTML code:

<section class="server-section">
<div id="left-server">
<ul>
<li><img src="images/icons/flags/us.png" alt="USA Flag" /> <span>Las Vegas, NV</span><a href="#">Speed Test</a></li>
<li><img src="images/icons/flags/us.png" alt="USA Flag" /> <span>Philadelphia, PA</span><a href="#">Speed Test</a></li>
<li><img src="images/icons/flags/us.png" alt="USA Flag" /> <span>Los Angeles, CA</span><a href="#">Speed Test</a></li>
<li><img src="images/icons/flags/us.png" alt="USA Flag" /> <span>Ashburn, VA</span><a href="#">Speed Test</a></li>
<li><img src="images/icons/flags/us.png" alt="USA Flag" /> <span>Garden City, NY</span><a href="#">Speed Test</a></li>
<li><img src="images/icons/flags/us.png" alt="USA Flag" /> <span>Chicago, IL</span><a href="#">Speed Test</a></li>
</ul>
</div>
<div id="center-server">
<ul>
<li><img src="images/icons/flags/us.png" alt="USA Flag" /> <span>Dallas, TX</span><a href="#">Speed Test</a></li>
<li><img src="images/icons/flags/us.png" alt="USA Flag" /> <span>Denver, CO</span><a href="#">Speed Test</a></li>
<li><img src="images/icons/flags/us.png" alt="USA Flag" /> <span>Bend, OR</span><a href="#">Speed Test</a></li>
<li><img src="images/icons/flags/us.png" alt="USA Flag" /> <span>Phoenix, AZ</span><a href="#">Speed Test</a></li>
<li><img src="images/icons/flags/us.png" alt="USA Flag" /> <span>Seattle, WA</span><a href="#">Speed Test</a></li>
<li><img src="images/icons/flags/us.png" alt="USA Flag" /> <span>Boston, MA</span><a href="#">Speed Test</a></li>
<li><img src="images/icons/flags/us.png" alt="USA Flag" /> <span>Miami, FL</span><a href="#">Speed Test</a></li>
</ul>
</div>
<div id="right-server">
<ul>
<li><img src="images/icons/flags/ca.png" alt="Canada Flag" /> <span>Canada</span><a href="#">Speed Test</a></li>
<li><img src="images/icons/flags/se.png" alt="USA Flag" /> <span>Sweden</span><a href="#">Speed Test</a></li>
<li><img src="images/icons/flags/de.png" alt="USA Flag" /> <span>Germany</span><a href="#">Speed Test</a></li>
<li><img src="images/icons/flags/nl.png" alt="USA Flag" /> <span>Netherlands</span><a href="#">Speed Test</a></li>
<li><img src="images/icons/flags/ch.png" alt="USA Flag" /> <span>Switzerland</span><a href="#">Speed Test</a></li>
<li><img src="images/icons/flags/uk.png" alt="USA Flag" /> <span>England</span><a href="#">Speed Test</a></li>
</ul>
</div>
</section><div class="clear"></div>

This is CSS code:

.server-section{
    padding:50px 0px 300px;
    height: 650px;
    background-color:#f8fefa;
    width:100%;
    background-image:url("../images/resource/server-location.jpg");
}

.server-section ul {
    list-style-type: none;
}

.server-section li {
    border-bottom: 1px solid #d4d1cb;
}

.server-section li span {
    display: inline-block;
    padding: 15px;
    color: #fff;
}

.server-section li a {
    float: right;
    position: relative;
    top: 20px;
    color: #00fc97;
}

.server-section li a:hover {
    color: #fff;
}

.server-section li img {
    margin-right: 20px;
}

.server-section #left-server {
    float:left;
    margin-left:35px; 
    width: 30%;
}

.server-section #center-server {
    float:left; 
    width: 25%;
    margin-left:50px;
}

.clear{
    clear:both;
}

.server-section #right-server {
    float:left;
    margin-left:45px; 
    width: 28%;
}

Possible duplicate of [Media Queries: How to target desktop, tablet and mobile?](https://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile) — disinfor, Oct 08 '19 at 18:40

score 0 · Answer 1 · answered Oct 08 '19 at 17:34

0

You copy your css style here:

@media screen and (max-width: 600px) {

.server-section{
    padding:50px 0px 300px;
    height: 650px;
    background-color:#f8fefa;
    width:100%;
    background-image:url("../images/resource/server-location.jpg");
}

.server-section ul {
    list-style-type: none;
}

.server-section li {
    border-bottom: 1px solid #d4d1cb;
}

.server-section li span {
    display: inline-block;
    padding: 15px;
    color: #fff;
}

.server-section li a {
    float: right;
    position: relative;
    top: 20px;
    color: #00fc97;
}

.server-section li a:hover {
    color: #fff;
}

.server-section li img {
    margin-right: 20px;
}

.server-section #left-server {
    float:left;
    margin-left:35px; 
    width: 30%;
}

.server-section #center-server {
    float:left; 
    width: 25%;
    margin-left:50px;
}

.clear{
    clear:both;
}

.server-section #right-server {
    float:left;
    margin-left:45px; 
    width: 28%;
}
}

answered Oct 08 '19 at 17:34

Nicolas Losson

121
2

It's not working an even get worst in desktop too.... Desktop: https://i.ibb.co/j59SFK9/desk.png Mobile: https://i.ibb.co/nDx2bwy/mobile.png – Amin Oct 11 '19 at 17:36
for me it's work, but you have to adapt it .. `@media screen and (max-width: 600px) {}` – Nicolas Losson Oct 11 '19 at 20:07
Look here, if you change the size of the screen, a red background will appear .. https://jsfiddle.net/ao8cq0hb/2/ – Nicolas Losson Oct 11 '19 at 20:08
I used min-width:961px (and some other bigger size and all worked) instead and it's working but the problem is when I switch to mobile view the "Speed Test" text stick to the left side of texts while all of them has padding-left:20px but when I switch to inspector it does not read thet code, it reads from "a" attribute not the code that I defined for it. https://i.ibb.co/cCN4PZ3/text.png – Amin Oct 14 '19 at 15:08

How can I make this CSS part mobile friendly?

1 Answers1