[ChristopherModerator]

Hi there,

Please try this :

@media (min-width:979px){
.home #x-content-band-2 .x-column.vc.x-1-6 img {
position: relative;
top: 178px;
margin-bottom: 0;
padding-bottom: 0;
}
}

Add class to first kid image and give it some margin:

@media (min-width:979px){
.my-class {
margin-top:20px
}
}

Hope it helps.

[mikewolf1127Participant]

Nope.

I don’t just want top margin, I want the image to stick to the bottom of the column even while the browser window is being resized.

[ChristianModerator]

Hey Mike,

We’re sorry for all the confusion. I copied and tweaked your homepage Visual Composer code to a new page (http://www.thewolfbrothers.com/home-2/). Please check. What I did there are:

1. Get the 2 images of the kids out of the column (because the column has a position of relative so it’s impossible to align the images to the bottom).
2. Add position: relative inline style to the row.
3. Add position: absolute; bottom: 0; left: 0; inline style to the images (right: 0 for the right image)
4. Add the CSS below in the Appearance > Customize > Custom > CSS to make the columns take its place even when empty.

.x-column {
min-height: 1px;
}

5. Wrapped the images with [visibility type="visible-desktop"] so it only shows in desktop (see http://theme.co/x/demo/integrity/1/shortcodes/responsive-visibility/ for details).

NOTE: Since I’ve placed the images outside of Visual Composer shortcodes, you cannot use Visual Composer anymore for this page. What I did is only a sample and not to be taken as single perfect solution. There are still other ways and you might want to show and tweak this on mobile. You can do this with Visual Composer also but in this particular row, you need to use our X Column Shortcode (http://theme.co/x/demo/integrity/1/shortcodes/columns/).

We’d love to help you further with this layout however, this falls beyond the scope of our support since this is custom content development which users of the theme should be responsible of.

Hope that helps and thank you for understanding

[mikewolf1127Participant]

OK, that’s awesome. One last thing.

How would I center the image of the word ‘ABOUT’ in any width browser window?

[Paul RModerator]

Hi,

To center the image, you can add this under Custom > CSS in the Customizer.

.page-id-7057 #x-content-band-2 .x-column,
.home #x-content-band-2 .x-column {
    text-align:center;
}

.page-id-7057 #x-content-band-2 .x-column p
.home #x-content-band-2 .x-column p{
    text-align:left;
}

Hope that helps.

[mikewolf1127Participant]

OK cool. That got the images stuck to the bottom.

Where is the ‘class=”mbn”‘ defined?

[RadModerator]

Hi there,

Not sure what you mean by your last question. You mean where mbn was declared? or where is mbn from your content?

mbn is part of X’s core stylesheet (spacing helpers) and available at http://www.thewolfbrothers.com/wp-content/plugins/x-shortcodes/css/integrity-dark.css

and mbn are added from your image shortcodes and remove them anytime you wish.

Thanks!

[mikewolf1127Participant]

Yes, I meant where is it declared. Is there a reference for the stylesheet declarations?

[ChristopherModerator]

Hi there,

Please check this : theme.co/x/member/kb/css-class-index/

Thanks.

[mikewolf1127Participant]

Great! Thanks.

One last thing. How do I get rid of the little close ‘box’ in the upper left corner of the video lightbox?

I’d like to keep the little ‘x’ to close the window, but get rid of the little ‘box’ for full screen toggle, as Vimeo has it’s own full screen button.

[ChristopherModerator]

Hi there,

Please add this :

a.ilightbox-fullscreen {
display: none;
}

Thank you.

[mikewolf1127Participant]

Great! Thank you for all your help. The site is done!

[ChristianModerator]

You’re welcome Mike. Glad we could help.

[Author]

Posts