How to change column width with css.

  • Unknown's avatar
    monstergirl · Member ·

    I’m new to css. I gave my blog an over hall with a new theme (I need 3 columns, and there are very few free WordPress themes with this option). I picked Colinear, and it’s great BUT unless someone has their browser window opened as wide as possible (all the way to the edges of my 13″ macbook), only 2 columns show up instead of all 3. I really want all 3 columns to show!

    http://www.thelastdrivein.com

    I’ve tweaked a little css (captions and headings) but don’t know much. Is there anything I can do to change column size?

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

  • Unknown's avatar
    shawnajroberts · Member ·

    Hi there!

    You may want to take a look at Cerauno:

    https://ceraunodemo.wordpress.com/

    This theme keeps the third column all the way down to screens that are 1100 pixels wide, compared to Colinear’s breakpoint at 1272 pixels.

    If you’d prefer to stay with Colinear, here’s some CSS code you can use to resize this. Please note that updates to the theme may cause this to break.

    @media screen
	and (min-width: 1100px)
	and (max-width: 1271px) {
	.right-sidebar-2 {
			width: 125px;
			float: left;
	}

	.has-double-sidebar .right-sidebar {
		float: right;
		width: 125px;
	}

	.site {
		padding-left: 40px;
		padding-right: 40px;
	}

	.widget-area {
		width: 300px;
	}
}
  • Unknown's avatar
    monstergirl · Member ·

    thanks! It works great!

    FINALLY I have an updated looking blog! :)

  • Unknown's avatar
    fdhly · Member ·

    Very nice.. :)

  • The topic ‘How to change column width with css.’ is closed to new replies.