[mikewolf1127Participant]

1-I want to align the images in the side columns to the bottom of the column.
2-I want to center the ABOUT word image in the column.
3-The orange stripes above and below the About section contain images of 12 pixels high and 1 pixel high. How do I make the content band that small vertically?

http://www.thewolfbrohters.com

Can you help?

[DarshanaModerator]

Hi there,

I’m sorry but your site is not loading on our end. It seems your server is offline (http://screencast.com/t/tcqEe9cxTg). Let us know once you resolve this issue, so that we can assist you further.

Thanks!

[mikewolf1127Participant]

Sorry. Misspelled.

http://www.thewolfbrothers.com

[FriechModerator]

Hi there,

Thank you for writing in, to align the images in the side columns to the bottom you can add this under Custom > CSS in the Customizer.

img.x-img.x-img-none.none {
height: 100%;
margin-bottom: 0;
}

And the About header place it inside a div/column with an style of

width: 100%;
text-align: center;

And instead of using an image you can utilize the css border properties, remove the image boders and
add this under Custom > CSS in the Customizer.

div#x-content-band-2 {
border-top: 12px solid #dd9933; /*12 pixel high*/
}

div#x-content-band-4 {
border-top: 1px solid #dd9933; /*1 pixel high*/
}

Hope this helps, Cheers.

[mikewolf1127Participant]

What’s the way to do this in the individual parts with inline CSS in the ‘Style’ field so as not to make them site wide?

1-Inline CSS for aligning image at the bottom of a column.

2-Inline CSS to make the top border 12px and orange, and the bottom border 1 px and orange.

3-Inline CSS to center an image.

[mikewolf1127Participant]

BTW, the ‘ABOUT’ is an image, not text.

[mikewolf1127Participant]

BTW, the CSS in Customizer worked for orange borders in content band 2, but did not work for aligning the images of the kids to the bottom of the columns. Would love inline CSS as mentioned above…

[ChristianModerator]

Hey Mike,

For the left kid, please add margin-bottom: 0; to the Style field or attribute of the image. For the right kid, add position: absolute; right: 0; margin-bottom: 0;. If that doesn’t help, please give us access to your WordPress admin.

Hope that helps. 🙂

[mikewolf1127Participant]

This reply has been marked as private.

[John EzraMember]

Hey there,

I marked your reply as private so that no one else sees your login info. Please do this anytime you need to send us sensitive info.

With regards to your question, you can put inline styles on the short codes.

please refer to options at the bottom of the page.
http://theme.co/x/demo/integrity/1/shortcodes/content-band/

if you are using VC you can also refer to this video:
https://theme.co/x/member/kb/shortcode-walkthrough-content-band/

As per for CSS, you can add this under Custom > CSS in the Customizer.

.x-column.vc.x-1-6 img.x-img.x-img-none.none {
    position: relative;
    right: -7px;
    bottom: -19px;
}

div#x-content-band-2 .x-column.vc.x-1-6:first-child {
    position: relative;
    left: -7px;
    bottom: -17px;
}

.x-column.vc.x-2-3 img.x-img.x-img-none.none {
    position: relative;
    margin: 0 auto 1.313em;
    left: 39.5%;
}

That should do it. Hope this helps, Happy Holidays!

[mikewolf1127Participant]

None of those worked.

The

.x-column.vc.x-2-3 img.x-img.x-img-none.none {
    position: relative;
    margin: 0 auto 1.313em;
    left: 39.5%;
}

aligned the left side of the image, not centered it.

What specific CSS would I add to the style field to align images in the bottom of a column?

And what specific CSS would I add to a text block to make the font 1 point larger?

[mikewolf1127Participant]

To be clear, I want the images of the kids to be stuck to the bottom of the columns they are in, against the orange line.

BTW- figured out how to make the font a bit bigger.

[mikewolf1127Participant]

Might this be a clue: http://www.tequilafish.com/2009/04/22/css-how-to-pin-an-image-to-the-bottom-of-a-div/

How would we do this in X?

[mikewolf1127Participant]

Or this-

http://jsfiddle.net/hashem/46psK/

[mikewolf1127Participant]

Or this-

http://community.sitepoint.com/t/image-vertical-align-bottom-in-div/5712

They all seem to point to making the image container ‘position: relative’ and the image itself ‘vertical-align: bottom’.

Does this make sense?

[Author]

Posts