[Resolved] Bar with text in background

Home Forums Support Bar with text in background

  • This topic has 5 replies, 3 voices, and was last updated 4 months ago by David.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1513860
    S.

    Hi,
    I want to implement a colored vertical bar in the content area, so between the header and the footer. This bar should be different per page, the color as well as the text upon it. The text should be close to the image above it. The image is implemented as the first section of the page, the text on the bar is implemented in the second section. The bar itself is currently implemented as background-image on the page (via custom CSS).
    My current implementation (e.g. https://jeelo.nl/scholen-en-ikcs) does not work nice on different devices since there is no connection between the vertical bar and the text.

    I use GP with Premium and Elementor on this website, and the construction applies only to tablets and desktops.

    Is there any solution/advice I could give a try so the text remains in the colored bar?

    #1513948
    Elvin
    Staff
    Customer Support

    Hi,

    To clarify:

    You want the text to be inside the yellow shape that stretches vertically downwards the whole page?

    Or, should the shape only stretch within the section?

    You may have to resort to absolute positioned text element on Elementor with this one.

    A wise man once said:
    "Have you cleared your cache?"

    #1514154
    S.

    Hi,

    To clarify: The text should remain in the yellow bar, no matter what screen size of the desktop/tablet.

    I changed the positioning of the text object to ‘absolute’, with top = 0px and left = 0px. But unfortunately that does not make a difference. This updated solution is still in place, so if you could verify, or give more advice it would be terrific!

    Best regards

    #1514424
    David
    Staff
    Customer Support

    Hi there,

    really difficult to do that with a background image as it will want to rescale with the size of the browser. Instead, remove the background and try this:

    @media(min-width: 769px) {
        .page-id-65 #content {
            position: relative;
        }
    
        .page-id-65 #content:before {
            content: '';
            display: block;
            position: absolute;
            background-color: #FCEE21;
            right: calc(((100vw - 900px) / 2) + 100px);
            top: 0;
            bottom: 0;
            width: 240px;
        }
    }
    #1514782
    S.

    David,

    Thanks a lot! This was the solution I was looking for.

    #1514845
    David
    Staff
    Customer Support

    I must admit it was a bit of puzzle that one 🙂
    Glad to be of help.

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.