Need help with responsive design of Service Section

I am working in the section content. I have changed the service section to be a partner section. This section will only have logos of companyies that link to the company. I have the logos in-line at computer screen size, but when I try to get the logos to be in line at pad size, they only show one in a line making scrolling ridiculous. Here is what I have in the section. I am using the 1/4 column design, I want 1/2 at pad size or 1/3 columns at pad size. I have tried to use styling to move them to in-line but will not work. Can you help? I have this on local and not live. So no url is available until client pays for hosting.

[column_content type=”one_fourth”]
</br></br>
<h6>Windows and Doors</h6>
[/column_content]

[column_content type=”one_fourth”]
</br></br>
<h6>Floor Tiling and More</h6>
[/column_content]

[column_content type=”one_fourth”]
</br></br>
<h6>Custom Cabinets</h6>
[/column_content]

[column_content type=”one_fourth”]
</br></br>
<h6>Floor Tiling and More</h6>
[/column_content]

[column_content type=”one_fourth”]
</br></br>
<h6>Floor Tiling and More</h6>
[/column_content]

[column_content type=”one_fourth”]
</br></br>
<h6>Floor Tiling and More</h6>
[/column_content]

[column_content type=”one_fourth”]
</br></br>
<h6>Floor Tiling and More</h6>
[/column_content]

This is what I have for css

@media screen and (max-width: 767px)and (min-width:480px){
.container, .content-area{
width:80%;
}
}

and

@media screen and (max-width: 767px)and (min-width:480px){
.servicewrap.one_fourth{

}
}

@media screen and (max-width: 767px)and (min-width:480px){
#partnerServices{
min-width:60px;
min-height:110px;
}
}