Image align at bottom of column and… – Themeco Community

Image align at bottom of column and…

mikewolf1127 — Mon, 22 Dec 2014 10:19:22 +0000

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?

Reply To: Image align at bottom of column and…

Darshana — Mon, 22 Dec 2014 14:16:08 +0000

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!

Reply To: Image align at bottom of column and…

mikewolf1127 — Mon, 22 Dec 2014 16:04:01 +0000

Sorry. Misspelled.

http://www.thewolfbrothers.com

Reply To: Image align at bottom of column and…

Friech — Tue, 23 Dec 2014 00:17:41 +0000

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.

Reply To: Image align at bottom of column and…

mikewolf1127 — Wed, 24 Dec 2014 02:19:39 +0000

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.

Reply To: Image align at bottom of column and…

mikewolf1127 — Wed, 24 Dec 2014 02:31:27 +0000

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

Reply To: Image align at bottom of column and…

mikewolf1127 — Wed, 24 Dec 2014 02:33:08 +0000

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…

Reply To: Image align at bottom of column and…

Christian — Wed, 24 Dec 2014 06:12:12 +0000

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. 🙂

Reply To: Image align at bottom of column and…

mikewolf1127 — Wed, 24 Dec 2014 20:03:25 +0000

This reply has been marked as private.

Reply To: Image align at bottom of column and…

John Ezra — Wed, 24 Dec 2014 23:06:17 +0000

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:

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!