Community Forums › Forums › Archived Forums › Design Tips and Tricks › Making Columns Responsive
Tagged: Genesis Easy Columns responsive
- This topic has 4 replies, 3 voices, and was last updated 9 years, 10 months ago by workky.
-
AuthorPosts
-
June 5, 2014 at 9:12 am #108158workkyMember
I have a website I use for theme testing purposes before I upgrade my main site. I use Genesis Easy Columns to create my columns. I have not been able to get them responsive on my phone for some reason.
Is there maybe another plugin for columns that works better?
life’s tough, it’s a lot tougher if you’re stupid
My WebsiteJune 5, 2014 at 5:13 pm #108248AnitaKeymasterGenesis Easy Columns is a third-party plugin that is supported here. Does your style sheet include the column classes in your media queries?
Love coffee, chocolate and my Bella!
June 6, 2014 at 9:05 am #108310workkyMemberIt does not, I have gone through the style sheet and found the media queries section. I do see something, but it does not look right. I don't think its the Column classes. I see the Column class further up in the CSS, out of the media queries section. Ive tried to add some things to the media queries section, but have failed miserably.
@media only screen and (max-width: 767px) {body {
font-size: 14px;
font-size: 1.4rem;
}.footer-widgets,
.site-container {
width: 94%;
}.site-container {
padding: 20px 5%;
padding: 2rem 5%;
}.five-sixths,
.four-sixths,
.home-middle-left,
.home-middle-right,
.one-fourth,
.one-half,
.one-sixth,
.one-third,
.three-fourths,
.three-sixths,
.two-fourths,
.two-sixths,
.two-thirds {
margin: 0;
width: 100%;
}.genesis-nav-menu a,
.nav-primary .sub-menu a {
font-size: 12px;
font-size: 1.2rem;
padding: 12px;
padding: 1.2rem;
}
life’s tough, it’s a lot tougher if you’re stupid
My WebsiteJune 6, 2014 at 9:39 am #108318Kyle RumbleMemberChange the plugin settings not to include the optional CSS. Then add this to your stylesheet or wherever you're adding your custom CSS:
/* Column Classes ------------------------------------------------------------ */ @media only screen and (min-width : 768px) { .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 { float: left; margin: 0 0 20px; padding-left: 3%; } .one-half, .three-sixths, .two-fourths { width: 48%; } .one-third, .two-sixths { width: 31%; } .four-sixths, .two-thirds { width: 65%; } .one-fourth { width: 22.5%; } .three-fourths { width: 73.5%; } .one-fifth { width: 17.4%; } .two-fifths { width: 37.8%; } .three-fifths { width: 58.2%; } .four-fifths { width: 78.6%; } .one-sixth { width: 14%; } .five-sixths { width: 82%; } .first { clear: both; padding-left: 0; } } .clear { clear: both; } .clear-line { border-bottom: 1px solid #ddd; clear: both; margin: 0 0 15px; }
If you need to add any mobile styles add them before these.
June 6, 2014 at 3:29 pm #108389workkyMember -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.