Trying to get the image in the box to go vertical top to bottom

Support
#1

HI
I’ve tried this in some pages used the “man” code from the demo, but its not working here? is there a trick?
what’s the difference between the vab and man in my column code from the demo?
I’m trying to get the deployments to do top to bottom here on the bottom of the homepage
(see screenshot)
but not here also? on the /platform/ page
(see screenshot)
thanks
designbabe

#2

Hi There,

I’ve removed the padding of the left column then added the padding to the text element instead.

Everything looks good now.

Cheers!

#3

[quote=“designbabe, post:1, topic:26333”] I was also looking at this on the homepage to see why i wa getting the line. (see secure note with dropbox link with other area same issue.)

[/quote]

I tried what you said and added padding the right and removed on the left and i got this screenshot #2 in secure not

#4

Hi There,

Sorry for the confusion, what Thai means is he remove (set to 0) the paddings on the right column so the image will take-over the entire space of the columns. But as you can see it was not the case its just transfer the gray-gap above the image. That is because the image refuses to take the entire space of the column so it can maintain its aspect ratio (not to look strecth), please remove your image and set it as a background-image of the column instead. Background-Images has a different way of being responsive as it always covers its entire container (in this case the 1/2 column).

You need to put a Gap element on the right 1/2 column, this Gap element provide a height to the right column when its viewed on mobile, else your right 1/2 column (with background-image) won’t show up on mobile.

Hope this helps,
Cheers!

#5

HI thanks I was looking for where to set column background image and I’m only seeing color, and i can’t do row as it will do the whole row and not respond correctly on mobile, what am I missing?..

#6

Hi There,

I am a bit confused with the situation right now.

Man stands for MARGIN ALL NONE , this is a native class from the theme.

VAB mean Vertical Align Bottom, it is not a native class it is added on X > Theme Options > CSS on this specific demo.

To remove the gaps on mobile from your grid images, you can add the following code : to Theme Options CSS

.ua-interactive-banner figure {
   
     margin-bottom: 0px !important;
}

let us know if you need further assistance and please be specific with the issue.

Thanks

#7

HI,
i’m asking where do I add the image as a background in the column as you instructed above. I updated and figured where it is but its still not working to fill the left complete with an image I got the info here


I did this but my image is still not extending to full column on some screen sizes (see gray at the bottom of the photo in screenshot) and then is cropping super odd when you are on a near mobile. See screenshots in note
Ideas?

thanks
designbabe

#8

Hi there,

I took another approach. I kept the background image but deleted the Gap element. Then went to the Column options and clicked on the Customize tab and added a minimum height of 250px for the mobile devices in the Inline CSS option:

Then I went to the Row options and clicked on the Customize tab and added the code below to Element CSS option:

@media (min-width: 767px) {
$el {
  display: flex;
}  
}

For more information about the Element CSS please read this article:

For more information about the Flex code I used in the CSS:

Thank you.

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.