Image not going full width + height in column

Support
#1

Hi,

I created a mockup of what i’m trying to do with my layout on my homepage - http://staging.dwanedigital.co.uk/ and it involves full width + height images within a column

See the layout for the section below

However in practice I can’t get the image to go full height. I’ve turned off the internal containers, removed the padding from the row and i’ve added

$el {

 min-width: 100% !important;
 min-height: 100% !important;

}

to the image CSS but it just doesn’t want to go full height. I feel like i’m missing something really really simple but I can’t see it.

Thanks

#2

Hey Ryan,

There is a downside with this approach because the image will look stretched if you force it to fill the entire row and height.

What you can do is instead of adding the image to the column by the Image element, set the image as the column background instead.

That way, the image will automatically adjust according to the width and height of the column.

If you follow this approach, please make sure that you edit the row settings and set the marginless column to on.

Hope this helps.

#3

Hi Jade,

I made the image the background of the column and utilised the padding to change the size of the image

But this isn’t reflected on the front end - http://staging.dwanedigital.co.uk/

Would it be best to add some custom css, something like

 $el {

height: 750px;

}

Or could that cause problems with other breakpoints?

#4

Hey Ryan,

So far, you did it correctly.

When you have the Marginless Column enabled, it makes the height both the columns equal and the column with the longest height will be the height of other columns.

You can set a minimum height to the column where you have the web design text or add some padding to the text element to add more height to the section and the section with the image should adjust accordingly.

You can add this code to the left column’s Element CSS:

$el.x-column {
    min-height: 600px;
}

However, the better options would be to set a top and bottom padding to the text element so that the text in the section will be in the vertical center area of the column.

Hope this helps.

#5

Hi Jade,

After playing around I’ve managed to get it working with the padding etc. however I’m having trouble when it comes to responsive behaviour on other devices.

I have columns set out

Text - Image
Image - Text
Text - Image

and want to display

Text
Image
Text
Image
Text
Image

on mobile devices.

To do this I have added another section to put the image in and hidden the visibility on desktop and tablet so it is only visible on those breakpoints.

However it looks like this

I added the below into the element CSS

@media (max-width: 767px) {

$el.x-column {
min-height 200px !important;
}
}

But it doesn’t seem to be working?

#6

Hi Ryan,

This codes has an incorrect syntax.

Please change it to:

@media (max-width: 767px) {
    $el.x-column {
        min-height: 200px !important;
    }
}

You missed adding : after min-height.

Hope this helps.

#7

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