Support » Plugin: Genesis Easy Columns » one-third not quite working as expected

Viewing 9 replies - 1 through 9 (of 9 total)
  • Thread Starter BeachedDesigns

    (@beacheddesigns)

    same issue with the one-half columns…

    Plugin Author Code96

    (@code96)

    Have you tried it with a full page layout?

    Thread Starter BeachedDesigns

    (@beacheddesigns)

    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;
    }
    Thread Starter BeachedDesigns

    (@beacheddesigns)

    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.

    Thread Starter BeachedDesigns

    (@beacheddesigns)

    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.

    Thread Starter BeachedDesigns

    (@beacheddesigns)

    RESOLVED.

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

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘one-third not quite working as expected’ is closed to new replies.