Change column height for mobile devices

Hey Sabine,

I’m getting a 404 error on the page you linked to, please check the URL. If you have a screenshot highlighting what you would like to adjust on mobile screens, then please share that with us as well.

Best regards,
Rikard

Hi,

Thanks for that. I had a look at the page you linked to on mobile, but I’m not sure I understand exactly what you would like to change. Could you share a screenshot highlighting the changes you would like to make please?

Best regards,
Rikard

Hi,

Thanks for that. I think it depends on which device you are using, if the image is displayed in full or not? You can try using CSS though:

@media only screen and (max-width: 767px) {
.page-id-28 #av_section_1 .flex_column {
    width: 80%;
    display: table;
    margin: 0 auto;
}
}

But chances are that you will need a lot of CSS if you want to display them exactly the same on all types of devices.

Best regards,
Rikard

Hi,

Thank you for the update.

You have to apply a unique class name to the columns and specify the max-height property on smaller screens. In the Angebote > Heilbehandlungen page for example, you have to edit the first column element within the very first color section, apply a unique class name (ex. “av-angebote-columns”), then use the following css code to apply a maximum height to the columns on smaller screens.

@media only screen and (max-width: 768px) {
    .av-angebote-columns, .av-l4zdmdju-da9ad5719cfe00250f8791b5bfa001f6 {
        max-height: 300px;
    }
}

This is how the column should look after applying the modifications above.

Screenshot: https://1drv.ms/u/s!AjjTfXSRbKTvw1zlAhUAl-JfsZ_b?e=cMBF6y

Best regards,
Ismael