one-third not quite working as expected

same issue with the one-half columns…

Have you tried it with a full page layout?

Just switched https://beacheddesigns.com/services/logo-design
to full width, but still have the same problem.

You did not include this CSS when you copied into your theme’s CSS:

.first {
	clear: both;
	padding-left: 0;
}

I’ve added that code into my custom css for my theme, but it hasn’t changed anything.
If I use the exact same code as supplied in the plugin’s css, it will work fine in a browser, but if using a mobile device or small window, the columns will become squished.

So with my current custom css, it will display correctly on mobile devices but not in full broswers

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

	.five-sixths,
	.four-fifths,
	.four-sixths,
	.one-fifth,
	.one-fourth,
	.one-half,
	.one-sixth,
	.one-third,
	.three-fifths,
	.three-fourths,
	.three-sixths,
	.two-fifths,
	.two-fourths,
	.two-sixths,
	.two-thirds {
		padding: 0;
		width: 100%;
	}
}

.first {
	clear: both;
	padding-left: 0;
}

.clear {
	clear: both;
}

.clear-line {
	border-bottom: 1px solid #ddd;
	clear: both;
	margin: 0 0 15px;
}

What I am looking for is for mobile devices to display the columns one above the other like a list (or rows) instead of squished columns.

Thanks.

Ok, I think I have figured it out. On line 1317 in your CSS change

.one-third {
float: left;
margin-right: 3%;
width: 31.33%;
}

to

.one-third {
float: left;
margin-right: 2%;
width: 31.33%;
}

Let me know if there is anything more that I can do.

Thanks for that.
I’ve updated the css to suit your suggestion.

If I now reduce the window of my browser to be under 800px to replicate what it would look like on a mobile device, you will notice that the columns are then stacked but no longer 100% width.

Do you have any suggestions to that?
As the new code you’ve supplied overrides the code

@media only screen and (max-width: 800px) {
	.one-third,{
		padding-left: 0;
		width: 100%;
	}
}

Which creates responsive column layout so the columns are stacked instead of side by side.

Thanks a million for your assistance, much appreciated.

RESOLVED.

Thanks a million for your help with the issue.
I have solved the responsive column stacking issue on mobile devices.