- This topic has 5 replies, 3 voices, and was last updated 4 months ago by
David.
-
AuthorPosts
-
November 1, 2020 at 3:28 pm #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?
November 1, 2020 at 7:35 pm #1513948Elvin
StaffCustomer SupportHi,
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?"November 2, 2020 at 2:13 am #1514154S.
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
November 2, 2020 at 7:13 am #1514424David
StaffCustomer SupportHi 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; } }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/November 2, 2020 at 8:17 am #1514782S.
David,
Thanks a lot! This was the solution I was looking for.
November 2, 2020 at 8:59 am #1514845David
StaffCustomer SupportI must admit it was a bit of puzzle that one 🙂
Glad to be of help.Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.