Tagged: background, column, full, height
-
AuthorPosts
-
April 15, 2019 at 5:53 pm #1091026
Hello I am trying to reproduce the second element of the home page of this site
I’ve tried using the color section containing a column with a color transparency but I can’t get the column to be of the same height as the color section.
I also have difficulties for the slider to partially cover part of an element
Thanks
April 16, 2019 at 1:27 pm #1091416Hey juliovilaine,
I have checked your site and it seems you have already done the full height column.
Where do you want to reproduce the 2nd element you have?
For the slider partially covering a part of an element, you can use z-index to adjust it but I don’t see any issues atm.Best regards,
NikkoApril 17, 2019 at 4:09 pm #1092059What I am trying to reproduce is the transparent green column where the text “Eco Tropical Living” is written.
Currently my column inside the color section is not top to bottom.
I hope I am clearer
April 18, 2019 at 8:17 am #1092333Hi juliovilaine,
Can you please attach a mockup of what you’re trying to achieve?
Best regards,
VictoriaApril 18, 2019 at 10:18 am #1092373So I am trying to achieve that:
https://ibb.co/8ByK2YDI am getting there at the moment:
https://ibb.co/VQp99b3Thanks
April 19, 2019 at 6:47 am #1092593Hi juliovilaine,
I see, we currently don’t have that feature but I think it can be done with some custom css.
Please post us your login credentials (in the “private data” field), so we can take a look at your backend.- Install and activate ” Temporary Login Without Password “.
- Go to ” Users > Temporary Logins ” on the left-side menu.
- Click ” Create New “.
- Add the email address for the account ( you can use (Email address hidden if logged out) ), as well as the ” Role ” making that the highest possible and the expiry about four days
( do be sure that we have enough time to debug ). - Click ” Submit “.
- You’ll now have a temporary account. Please provide us here in the private section the URL, so we can login and help you out.
When your issue is fixed, you can always remove the plugin!
If you prefer to not use the plugin, you can manually create an admin user and post the login credentials in the “private data” field.Best regards,
NikkoApril 19, 2019 at 9:44 am #1092642April 20, 2019 at 8:15 am #1092868Hi juliovilaine,
Thanks for giving us admin access. I have added a Custom Class to the section (named it flex-section).
Then in Quick CSS, located in Enfold > General Styling:#top #main .flex-section .template-page, #top #main .flex-section .template-page .entry-content-wrapper, #top #main .flex-section .template-page .flex_column_table { display: flex !important; height: 100%; } #top #main .flex-section .template-page .flex_column_table .flex_column { display: flex; flex-direction: column; align-items: center; justify-content: center; } #top #main .flex-section .template-page .flex_column_table .flex_column .av_textblock_section { padding: 10px 100px; } #top #main .flex-section .template-page .flex_column_table .flex_column .avia-slide-slider { width: 125%; margin-left: -25%; }
Best regards,
NikkoMarch 24, 2020 at 9:04 pm #1197094Hi! I want to achieve sort of the same for my site. This code is not working, but I can do it with padding top and bottom. Than the background is sort of full height, but the pink background stops at the menu header. Is it possible to make the content of this section go behind the transparent header? See link attached!
Thanks a lot! Janneke
March 27, 2020 at 11:26 am #1198298Hi jannnnnneke,
We apologize for the delayed response.
Can you give a screenshot of the issue or at least what you want to achieve?
If I check the link you gave the semi-transparent menu header is above the content and pink background.Best regards,
NikkoMarch 30, 2020 at 7:56 pm #1199185Hi! Yes I want the pink column to reach the top of the screen. Now it stops at the bottom of the header menu, but I’m using the transparency header so I would like the pink column to go behind/above the header menu. I’ve made a screenshot and added a pink color in it so you can see what I mean.
Thanks!
April 3, 2020 at 6:58 pm #1200587Hi jannnnnneke,
Try adding this CSS code in Quick CSS, located in Enfold > General Styling:
.page-id-2 #av_section_1 .av_one_fourth { position: absolute; top: -140px; }
Hope it helps.
Best regards,
NikkoApril 8, 2020 at 3:10 pm #1201926Yes, perfect!! THANK YOU!
April 8, 2020 at 6:15 pm #1201972Hi jannnnnneke,
Where glad that we could help :)
Let us know if you need further assistance.Best regards,
Nikko -
AuthorPosts
- You must be logged in to reply to this topic.