Tweak my columns

stanleyanndunhamscholarship · Member · Nov 29, 2016 at 10:57 pm
Copy link

Add topic to favorites
Hi! I have the argent theme: I have a two-column table on my webpage, with a list of people and bios: photo on the left and text on the right. how do i tweak it in the following ways? I’m assuming that is using CSS. I’m a complete novice and not sure how to add a CSS code.
1. the photo and text do not start at the same level: the text starts a little lower than where the photo does. I would like the photo and text to align so that they both start on the same line, ie, the text starts at the top of the photo. I think that the photo starts at the top of the row.

2. There is a little more space between the columns (between the photos and text that accompanies them).

3. Make the photos larger. Right now they are smaller than the sizes that are available in my media library. Or maybe they are thumbnails. The photos are from both perspectives–portrait and landscape. Would the photos look too uneven if I made them larger, as opposed to what I have currently? I mean, should I leave as is and wait and take the photos at the same time so that they are all the same size? Is it easy to replace photos in the tables?

Thanks so much!

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Dec 1, 2016 at 8:46 pm
Copy link
Hi there, I’ve looked at your site and do not see a page that resembles what you describe. Can you give me a link to that page and I would be more than happy to help you get things looking as you want them.
stanleyanndunhamscholarship · Member · Dec 1, 2016 at 9:13 pm
Copy link
https://stanleyanndunhamscholarship.wordpress.com/wp-admin/post.php?post=647&action=edit
The page is called “Board of Directors and Advisory Council”
thesacredpath · Member · Dec 5, 2016 at 7:05 pm
Copy link
1. … I would like the photo and text to align so that they both start on the same line, ie, the text starts at the top of the photo.

I looked at the CSS and don’t see what is causing that. It may be line height on the top line of text causing the issue, but that would be a bit cumbersome to fix as it would require you to add a style statement to each of the top lines of text within the editor. Instead, let’s add just a bit of padding to the top of the image. I’ve used the unique page id CSS class from the opening body HTML tag on that page to target only that page with the change.
```
.page-id-647 td img {
    padding-top: 10px;
}
```
On the images, I see you have set vertical-align to center within the HTML in the editor. You may want to change that on the images to vertical align: top;

2. There is a little more space between the columns (between the photos and text that accompanies them).

If you wish to add additional space between the image and text, again, I would suggest adding padding to the image itself. Instead of the above, add the following and adjust as desired.
```
.page-id-647 td img {
    padding-top: 10px;
    padding-right: 10px;
}
```
3. Make the photos larger. Right now they are smaller than the sizes that are available in my media library.

Currently you have a width style declaration in the HTML for each of the td’s that contain the image. You can go into the Text tab in the editor and increase the 25% value you have now to make the images wider. This is what I see in the HTML on that page.
td style="vertical-align:middle;" width="25%">

No items found.