Two column responsive page

• 

  greeleyindivisible · Member · Jun 29, 2017 at 8:07 pm

  • Copy link
  • Add topic to favorites

  I am trying to add CSS to https://greeleyindivisible.org/resources/ that allows responsive column layout. I have simple inline styles to create columns on desktop (it’s not a theme option) but the columns do not stack on mobile. I am a beginner at CSS so any help is appreciated!
  Ronna

  The blog I need help with is: (visible only to logged in users)

• 

  ladysawen · Member · Jun 30, 2017 at 8:34 am

  • Copy link

  I took a look at your site on mobile and from what I can see you set the width to 40% and used float: left for your National Elections and Publications/Media DIVs in your custom CSS.

  The style will apply on both desktop and mobile devices. You should be using Media queries in your CSS to separate mobile from desktop styles.

  Media queries use the screen or browser size to trigger their CSS so you can control when to display 1 or 2 columns. They start with @media, you then need to set a max-width in pixel so they stop applying to screens larger than what you want.

  For example you could have something like that:

  @media screen and (max-width: 768px) {
  .example
      width: 100%;
      padding: 0 10pt 0 0;
      float: none;
  }

  This will then display 1 column on screens smaller than 768px. There is a guide on Media Queries here:

  https://en.support.wordpress.com/custom-design/custom-css-media-queries/

  Hope this helps!

• 

  thesacredpath · Member · Jun 30, 2017 at 9:59 pm

  • Copy link

  Hi @greeleyindivisible, to use the code that @ladysawen gave above, you would need to have the WordPress.com Premium Plan upgrade, which includes Custom Design and the ability to add custom CSS.

  There isn’t a way to limit the HTML you have used to make the two columns without custom CSS.

• 

  greeleyindivisible · Member · Jul 1, 2017 at 1:36 am

  • Copy link

  Thanks both of you, I’ll look at a different plan or template.

• 

  thesacredpath · Member · Jul 1, 2017 at 2:03 am

  • Copy link

  You are welcome, and let us know if you have additional questions.