Max-height not working

[seanlincoln]

HI,
I have put a featured image and set the class to ‘feature-image’.
then in the CSS section, I have used code:

.feature-image {
max-height: 400px;
}

but it’s not working correctly,
when using a wide monitor, the image increases in size and the image is still visible next to the content below.

any help would be excellent.

sean

[friech]

Hi Sean,

Thank you for writing in, do you want the feature image to take up the above fold of your page? If so, please remove the max-height: 400px that you applied, and apply a min-height or height instead.

e.g.

.feature-image,
.feature-image img {
min-height: calc(100vh - 124px);
}

The 124px is the height of the header, we need to offset that.

Hope it helps,
Cheers!

[seanlincoln]

Hi,
I was actually looking to reduce the size of the image or row height to 475px, but when i do that, the image itself stays the same size and the sections / rows after the image shift upwards.

so if the rows or sections after the image don’t use a container, the image can be seen below or next to the rows or sections.

another example of this is this page: http://astraframe.co.uk/astra/front-page/
which i created as i noticed some of the elements where classic elements on the other page and thought it might be causing an issue.

a couple of other things which i’m not sure about is that to get the first section to line up with the header, i have to use a -2.5em margin, any idea why that’s needed?

also i have tested the section with the image inserted by adding a red background and it appears the images doesn’t reach the full width of my screen as i can see the red background on the right side of the image.

[seanlincoln]

I have used the remove spacing option in the section which has stopped the need to use the -2.5em margin,
however the space on the right of the row/image has increased.

[lely]

Hi Sean,

Try this instead:

.feature-image img {
min-height: 475px;
width:auto !important;
}

The feature-image class is added on the image container. So we will use above targeting the actual image to avoid overflow. Now, about the red part you were seeing, it happens because, when settings maximum height on image, the actual image reduce size proportionally. The moment you reduce height of the image, it’s width will be reduce too thus it is not enough to cover the entire screen width.

An alternate solution for you, to make the image always fullwidtn, add it instead as background image of the section. Set background size as cover Then inside this section, add a gap element. Set the GAP element height as intended for image height like 475px.

Hope this helps.

[seanlincoln]

Thanks for your reply, i would be interested in using the image as a background to the section instead as you suggested as an alternate solution.

there are no background image settings for the section itself, so does this need to be done via custom CSS?

i have attempted this using the inline css for the section:
background-image: url(“http://astraframe.co.uk/astra/wp-content/uploads/2017/05/conservatory1.jpg”); height: 500px; background-position-x: center;

however on a wider screen the image starts to repeat.
kind Regards

[jade]

Hi Sean,

It looks like you are using a Classic Section. The background options for the Classic section is limited but if you use a v2 section, you get more customization freedom for the background as you will have these options:

As for your current setup, you can try adding overflow: hidden; to the style field of the row that contains the large image:

Hope this helps.

[seanlincoln]

Thanks for your reply,
as far as I’m aware I’m not using classic rows or sections.
This is the layout i get in cornerstone.

I have attempted to make this work using
background-image: url(“http://astraframe.co.uk/astra/wp-content/uploads/2017/05/conservatory1.jpg”); height: 500px; background-position-x: center; background-repeat: no-repeat;

which doesn’t quite go to the edge of the screen, which i could live with, however, it also doesn’t scale when the screen size is decreased to tablet or mobile, which I’m not sure how to resolve this.

[ruenel]

Hello @seanlincoln,

Please go to X > Settings > Permissions > User Preferences and then set the Advanced Mode to “Always ON”. Go back to editing the page and then use the advanced mode option so that you can insert the background image and not by using an inline element css.

Please also keep in mind that you have added this custom css:

.feature-image {
    max-height: 450px;
}

.feature-image img {
    min-height: 475px;
    width: auto !important;
}

The maximum height will only apply to the image element that has the .feature-image class. The height will not apply to the section.

Hope this helps.