Help setting up and formatting columns on band bio page

  • Unknown's avatar
    tailgaterevival · Member ·

    I am trying to get my bands band member bio page to have columns that are setup to be the same size (including images and text). I have managed to split everything into two columns, but I can’t get everything to resize automatically and fit into its own space. As a result, everything is offset and looks quirky.

    https://tailgaterevival.com/the-boys/

    I am using the harmonic theme.

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

  • staff-loquaciousloon · Staff ·

    Hi @tailgaterevival!

    Everything looks properly resized – are you referring to the wide gap in between the two columns?

    If so, that’s being caused by a the width of the theme you’re using, and the way it calculates widths. On your theme, you can get away with setting both of your columns to be be 50% wide, instead of 40%.

    Give that a try, and let me know if it solves the issue, or if you meant something completely different :)

  • Unknown's avatar
    tailgaterevival · Member ·

    I was mainly referring to the overall width of the body text on the page. There is just a ton of deadspace on either side of it.

    I was also referring to the sections for each band member, since some of us have more musical influences or a slightly larger picture. Is there a way to set up a default size for pics on a page without having to resize them and re insert them. Is there also a way to set up a section within the column to make sure that everything fits within the section in the event a band members musical influences are three lines instead of two for example.

  • staff-loquaciousloon · Staff ·

    I was mainly referring to the overall width of the body text on the page. There is just a ton of deadspace on either side of it.

    You can try making the content area wider with some CSS like this:

    #primary.full-width, body.secondary-sidebar #primary.full-width {
 width: 100%	
}

    About the alignment of the columns. It sounds like you want the first two band members to be lined up, then the second two band members to be lined up, and so on. Is that right?

    If so, you probably want more of a grid than columns. Setting that up can take a bit of work, but here’s how I would do it:

    Eliminate the columns you have now.

    Instead, put each band member in their own container, with a class assigned to it. For example, before each band members photo/info, you can add this into your HTML view:

    <div class="bandmember">

    and then close it after that band member:

    </div>

    Repeat that before and after each band member.

    Now, you can use some Custom CSS to target those sections in My Site > Customize > CSS:

    @media screen and (min-width: 680px) {
	.bandmember {
		width: 50%;
		min-height: 1000px;
		float: left;
}
}

.bandmember {
	padding: 10px;
}

    That CSS does a few things:

    – it sets some spacing around the edges of the containers, so they don’t bump into one another
    – it floats the items to the left, so they can sit side by side (when there’s room)
    – it sets the width on wide screens to be half of the content column, so we can fit two side by side
    – it sets a minimum height, so the next row lines up together

    Now, the min-height: 1000px is an example number, you may need to adjust that a bit. If you find there’s a big gap between your rows, try decreasing it a bit. If you find the spacing isn’t working, and there are empty spots, try increasing it a bit :)

    Lastly, we have the images :)

    Your theme is responsive, so it resizes the image as needed to make sure they fit and don’t get cropped or cut off.

    The key here is that this affects the size, not the shape of it. For example, look at Blake’s picture compared to the guy with the dinosaur.

    Dinoguy’s photo is a much narrower ratio – it has a different aspect ratio. To make sure your images always line up, you’ll want to upload photos that have matching aspect ratio.

    If all the images have the same width-to-height (aspect) ratio, they’ll line up better – regardless of the actual size of the photo :)

  • The topic ‘Help setting up and formatting columns on band bio page’ is closed to new replies.