two column responsive layout

  • Using two column menu layout and looks great on desktop. Squishes down to 2 skinny columns on mobile. When I switch the category layout to 2 column responsive (either Twitter or Zurb) it display as one column on desktop and mobile.

    Is there a way for it to be 2 column for larger displays and 1 column for smaller. I guess I assumed it would do this when described as Responsive.

    If not, where is the code I need to change. I am very comfortable editing CSS.

    URGENT !! thank you!

    https://www.ads-software.com/plugins/easy-restaurant-menu-manager/

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter carlabaldwin

    (@carlabaldwin)

    Figured it out. If anyone is having same issue, add the following to my child theme:

    .wprmm_menu ul.two-column, .wprmm_menu ul.two-column li, .wprmm_menu .two-column li {
	  width:99%;
	  margin: 0 2% 5px 0;
	  padding: 0;
	  float: none;
	}
    Thread Starter carlabaldwin

    (@carlabaldwin)

    Forgot to add …. Put this under your media query:

    @media screen and (max-width: 600px)

    Plugin Contributor Richard Royal

    (@richardroyal)

    Hey Carla,

    Looks like you caught us on a weekend but was able to solve your own issue. Good work!

    I know this thread may be long dead, but I am a bit new to this and am also having an issue with the responsive columns. No matter what I set it always defaults to one column (zurb/twitter). You suggest adding something to the “child theme” which i take as the CSS editing for “Easy restaurant manager”. Then there is something called media query, does this also get loaded into the CSS editor?

    Sorry about that, never mind. Got it.

    If anyone else reads this, your media queries are in your “Style.css” file inside of the theme you are using.

    you must insert the following:

    @media screen and (max-width: 600px){
    .wprmm_menu ul.two-column, .wprmm_menu ul.two-column li, .wprmm_menu .two-column li {
    width:99%;
    margin: 0 2% 5px 0;
    padding: 0;
    float: none;
    }

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘two column responsive layout’ is closed to new replies.