Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • August 1, 2018 at 11:22 am #992334
    capuchin

    Hi!

    I need a transparent text block over a background image. So I have a colour section and a text block with this quick CSS

    .cssid {
    background: rgba(255, 255, 255, 0.7);
    padding: 50px 50px 50px 50px;
    margin: 50px 50px 50px 50px;
    }

    —–

    It’s all looking good, but when resizing in responsive mode – the colour section doesn’t resize the same way as the rest of the page.
    Which is built with columns, sitting in colour sections.

    Is there another way to achieve the look and feel I need to achieve? Or can we ‘talk’ to the colour section?

    Thank you in advance!

    Kind regards
    capuchin

    August 1, 2018 at 12:20 pm #992358
    Guenni007

    if you let the background-image determine the height of the color-section (yes this is possible) you will have troubles on small screens to have all content in that color-section. ( that is the reason why the content normaly determines the section height)

    see here – i gave to the color section a custom-class: responsive-container

    and did this to quick css:

    .responsive-container {
    background-size: contain;
    padding-top: 56.25vw;
    width: 100vw;
    height: 56.25vw !important;
}
.responsive #top #wrap_all .responsive-container .container {
    margin-top: -56.25vw
}

    see result here – and see for smaller screens what i mean with troubles: https://webers-testseite.de/responsive-colorsection/

    so better is to have background-images which could be cropped or to have interesting gradients

    August 1, 2018 at 5:17 pm #992486
    capuchin

    Hi to you all

    Thanks for your input, Guenni, I tested it and it does not work for my case.

    Basically, I have a colour section ‘A’ 1180px wide (with image and text block)
    underneath I have another colour section ‘B’ – 1180 px wide – with two columns

    When resizing the browser the colour section A and B are not resizing the same way…A stays wider.

    Please share any other thoughts on this?

    Kind regards
    capuchin

    August 1, 2018 at 7:15 pm #992524
    Guenni007

    you see my test page – and my comment on the problem which arises doing responsiveness to color-section.
    look to smaller screens what happend to the content.

    it depends essentially on the content of the container whether it is practicable or not

    August 1, 2018 at 10:27 pm #992593
    Basilis

    Hi,


    @Guenni007     once again – we appreciate it!

    Best regards,
    Basilis

    August 6, 2018 at 8:34 am #993835
    capuchin

    Hi

    Thank you for your time and effort!
    You can close this topic.

    Kind regards
    capuchin

    August 6, 2018 at 1:28 pm #993915
    Mike

    Hi,
    Glad @guenni007 was able to help, we will close this now. Thank you for using Enfold.

    For your information, you can take a look at Enfold documentation here
    For any other questions or issues, feel free to start new threads under Enfold sub forum and we will gladly try to help you :)

    Best regards,
    Mike

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘colour section doesn't resize as rest of page in responsive mode’ is closed to new replies.