Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1360785

    Hi,

    I would need help with Responsive customization please. On the website (link in private content) there are 6 pages with offers. The title consists of 3 elements: An image with a headline shifted to the left, then a narrow image (brown overlay) and then a text. The height of the first image is set at 100%.

    Below 767px screen width the image becomes extremely long. How can I reduce the height of the image here to e.g. 50%?

    It concerns each of the 6 pages under the menu item ANGEBOTE.

    Thank you very much and best regards, Sabine

    Change column height for mobile devices

    Translated with http://www.DeepL.com/Translator (free version)

    #1360838

    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

    #1360853

    Hi Rikard,

    I’m sorry, it was too hot today …. the new link is in the private content …. ;)

    Best ragrds, Sabine

    #1360863

    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

    #1361102

    Hi Rikard,

    I have put the screenshots in the dropbox. It is about the height of the first column. It is set to 90% for the normal laptop. Below 767px screen width the image stretches. The height had to be set so that the image is completely visible on the screen – maybe only as a square. I have already tested different codes, but I always get the wrong one ….

    I hope there is a solution ;)

    Thanks and many greetings,
    Sabine

    #1361122

    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

    #1361221

    Hi Rikard,

    I found no page with page-id-28. I have id: 30, 32, 34, 36, 38 and 54 for this 6 pages. I changed the id, but the code does not work – i am so sorry.

    I have only used the code so far and don’t quite understand what else I would need to enter besides the code. I have very rarely worked with CSS codes before.

    I am asking for help again as I need to finish the page this week.

    Thank you very much and best regards,
    Sabine

    #1361293

    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

    #1361318

    Hi Ismael,

    thank you so much guy – you are great and I checked how to use css codes. It works. Thank you for your patience :)

    Much greetings and best regards,
    Sabine

    #1361422

    Hi Sabine,

    I’m glad that Ismael could help you :)
    Thanks for using Enfold and have a great day!

    Best regards,
    Nikko

Viewing 10 posts - 1 through 10 (of 10 total)

The topic ‘Change column height for mobile devices’ is closed to new replies.