same issue with the one-half columns…
Plugin Author
Code96
(@code96)
Have you tried it with a full page layout?
Just switched http://beacheddesigns.com/services/logo-design
to full width, but still have the same problem.
Plugin Author
Code96
(@code96)
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.
Plugin Author
Code96
(@code96)
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%;
}
Plugin Author
Code96
(@code96)
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.