Css for responsive 2 columns

• 

  grassoart · Member · Nov 23, 2016 at 6:49 pm

  • Copy link
  • Add topic to favorites

  Hi, I created 2 columns in my homepage under the slideshow. How can I make the distance between the 2 columns fixed instead of the distance from the margin?

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

• 

  siobhyb · Member · Nov 24, 2016 at 2:26 pm

  • Copy link

  Hi Marco,

  I took a look over your code and can see that the margins you’ve set for your columns aren’t needed:

  @media screen and (min-width: 896px) {
      .leftColumn {
          width: 18em;
          margin-right: 20em;
          float: left;
      }
  
      .rightColumn {
          width: 18em;
          margin-left: -20em;
          float: right;
      }
  }

  You can safely remove margin-right: 20em; and margin-left: -20em; without it having any impact on the appearance of the columns.

  As for your request: Could you clarify your end goal? What do you currently dislike about the way your columns are displayed? I want to make sure I understand your request before guiding you further.

  Thanks!

• 

  grassoart · Member · Nov 25, 2016 at 10:44 am

  • Copy link

  Thanks for the help. When you start to reduce the width, the 2 columns get really close to each other, especially at 950-900px. I would like to have the distance between the 2 fixed to a certain em or px value. Thanks in advance

• 

  siobhyb · Member · Nov 25, 2016 at 1:55 pm

  • Copy link

  Thank you for clarifying, Marco!

  Part of the reason for this behaviour is that both columns have a set width which leaves little room for a space between the columns on smaller devices. Try setting the width of each column to 40% to see if that helps achieve the effect you’re after:

  @media screen and (min-width: 896px) {
      .leftColumn {
          width: 40%;
          float: left;
      }
  
      .rightColumn {
          width: 40%;
          float: right;
      }
  }

• 

  grassoart · Member · Nov 26, 2016 at 10:41 am

  • Copy link

  Exactly what I was looking for! Thanks a lot!