-
Posts
-
Dear Enfold Support,
Have been trying to find a custom CSS for the matter for a few days now but to no avail.
Was wondering whether you could help me with this.I am trying to use the Grid Row with Columns inside to achieve an even gutter around the Columns. The only thing is that I cannot set the Column at 100% height. I also want to locate text and objects inside each sector of Grid Row in the center and not the top of the sector. I am trying to avoid the excessive amount of white space under the text and objects. I hope you could see what I mean by looking at the website: https://desmil-malimanji.savviihq.com/?page_id=2.
The Grid Row in question is one with text, quote and a tube under the big image with painting.
Best,
AlexanderHi Alexander,
Can you try adding this CSS code in Quick CSS, located in Enfold > General Styling:
.page-id-2 #av-layout-grid-1 .av_one_half.avia-builder-el-first { background-color: rgba(237,28,139,0.07); background: linear-gradient(45deg,rgba(237,28,139,0.07),rgba(36,186,236,0.07)); padding: 20px; border-radius: 3px; } .page-id-2 #av-layout-grid-1 .av_one_half.avia-builder-el-first .flex_column { background: none !important; }This code on is page-specific and also targets a specific point so it won’t affect any other elements.
Best regards,
NikkoHi Nikko,
Thank you so much for taking the time too look at my site.
Although the code worked well, there is yet still another hiccup.
Honestly speaking I am trying to achieve the apple-like website blocks. Thus I was trying to set 10px gutters around the blocks (Columns). You can see this with an image of a tube. The only thing is that with the code you provided I am no longer able to set these gutters.
Before that I was using another code found in the forum but this was not entirely my goal. I would like to keep as much of a standard functionality of the theme and Grid Rows as possible, thus need to only stretch the Column background to fill the Grid Row section.
Hope this makes sense.
Do you think it would be possible to achieve this?
Best,
AlexanderHi Nikko,
Hope you did not forget about me. Please let me know if you could find a solution for the Column padding.
Looking forward to hear from you.
Best,
AlexanderHi Alexander,
Can you try to do the following instead:
1. Edit the Grid Row, Advanced > Developer Settings > Custom CSS Class, then put this value: equal-columns (You can use this in multiple gridrows you want this to apply, just by doing step 1)
2. Go to your child theme’s functions.php and add this code:function equal_height_columns(){ ?> <script> (function () { const wrapper = document.querySelector(".equal-columns"); const columns = wrapper.querySelectorAll(".av_one_full"); let max = 0; function adjustHeight(el) { el.style.height = max + "px"; } function maxHeight(el) { max = Math.max(max, el.clientHeight); } columns.forEach(maxHeight); columns.forEach(adjustHeight); })(); </script> <?php } add_action('wp_footer', 'equal_height_columns');Best regards,
NikkoHi Nikko,
Thank you for your reply. And thank you lots for your help! It worked!
Have a nice weekend :)
Best,
AlexanderDear Nikko,
I have been trying to incorporate this method on both of my website to no avail.
Would you please be able to look at the website once more to try to determin what exactly is causing the issue.
It definitely doing something as when I shrink the page to mobile version then the column stays as long as another column. Actually not the effect I am looking for. On the mobile version of the page I desire to keep the settings to standard. Only on desktop the grid needs to have even boxes.
Looking forward to your reply.
Alexander
Hi Alexander,
Please replace the code I gave with this one: (this should adjust columns to equal height on desktop and tablets but not on mobile)
function equal_height_columns(){ ?> <script> (function () { const wrapper = document.querySelector(".equal-columns"); const columns = wrapper.querySelectorAll(".av_one_full"); let media = window.matchMedia("(min-width:768px)"); let max = 0; function adjustHeight(el) { el.style.height = max + "px"; } function defaultHeight(el) { el.style.height = "auto"; } function maxHeight(el) { max = Math.max(max, el.clientHeight); } function checkMediaWidth(myMedia) { if (myMedia.matches) { columns.forEach(maxHeight); columns.forEach(adjustHeight); } else { columns.forEach(defaultHeight); } } media.addListener(checkMediaWidth); checkMediaWidth(media); })(); </script> <?php } add_action('wp_footer', 'equal_height_columns');Best regards,
NikkoHi Nikko,
Thank you very much again for looking at the website again, appreciate it.
It seems as if the first Grid Row works as intended, but all other Grid Rows placed under the first one do not seem to work. You can see it here:
Please let me know if I am missing on something.
Best,
AlexanderHi Alexander,
You need to repeat this step on every Grid Row you want to apply this behavior:
1. Edit the Grid Row, Advanced > Developer Settings > Custom CSS Class, then put this value: equal-columns (You can use this in multiple gridrows you want this to apply, just by doing step 1)
I checked it and the Grid Row does not contain the equal-columns class.Best regards,
NikkoHi Nikko,
Thank you for a promt reply. This is rather weird, I have included the ‘equal-columns’ note in the custom CSS class in every element I wanted this to be active in and it does not seem to work.
Best,
AlexanderHi Alexander,
I apologize that’s my mistake, please replace this part of the code I gave:
const wrapper = document.querySelector(".equal-columns"); const columns = wrapper.querySelectorAll(".av_one_full");to:
const columns = document.querySelectorAll(".equal-columns .av_one_full");Hope it helps.
Best regards,
NikkoHi Nikko,
Like a charm! Thank you so very much!
Just one last question, did you set the borders between the Grid Rows to be that big or is it something I have missed in the settings. Have been trying to figure this our for the past few days.
Other than that I have no further questions. Thank you so much again!
Alexander
Hi Alexander,
You’re welcome, we’re just happy that we could help :)
As for the borders, I believe you’re referring to the gap between the columns, you can adjust that in the Cell of the Grid Row, just adjust the Cell Padding.
If you set it to 0, there will be no gap, and the higher the value the greater the gap.Best regards,
NikkoHi Nikko,
I think that I have already asked this before, but I need help.
Would you be able to help me with setting gutters in between the sells on this page https://www.smileicon.eu/test-page/ ?
I am looking to accomplish something similar to the home apple page: https://www.apple.com .
Looking forward hearing from you.
Thank you!
Alex
Hi Alex,
No worries :)
Can you try adding this CSS code:#top .equal-columns .av_one_half { border: 5px solid white !important; }Best regards,
NikkoHi Nikko,
Thank you for the reply.
Your code works well, thank you. The only thing is that gutters outside are smaller than on the inside.
Also it would be great if it would be possible to isolate this section in terms of custom CSS so that other elements are not effected in the future.
Thank you!
Here is a screenshot to give you an idea:
https://www.smileicon.eu/wp-content/uploads/2021/04/Screenshot-2021-04-16-105306.jpgAlex
Hi Nikko,
I had to move the test page to the home page of the website yesterday.
Apologies for the inconvenience that might have caused.
Thank you,
Alex
Hi Alex,
Just add a Custom CSS Class name for it in order to target it specifically.
I’ve seen it had a class of equal-columns but you can just change it into equal-columns with-borders then change the code to:#top .with-borders .av_one_half { border: 5px solid white !important; }As for the gutter outside is smaller, you can add a border left and right about 5px in the container.
If you need help with the CSS code, then please give us a link as a reference.Best regards,
Nikko
- You must be logged in to reply to this topic.