![Check out Enfold](https://kriesi.at/wp-content/themes/kriesi/images/banner-enfold.jpg)
Tagged: Columns in Avia Builder
-
AuthorPosts
-
January 31, 2023 at 8:09 pm #1396096
Kreisi Support:
First, thank you for your hard work on Enfold. I am now the holder of 8 licenses, and have used Enfold across 8 websites, each with their own unique challenges. The site I am currently getting started on is: woodyboaterstg.wpengine.com
On this site, I have need to establish a column structure for pages that is “finer” than the current 1/5 columns available in Avia Page Builder. For example, if a 1/5 column structure equals 20% of the page width (1/5, 3/5, 1/5 would roughly equal 20%, 60%, 20%), I need an option that is somewhere around 1/6, or roughly 15% page width. Of course the math needs to work out!
In short, is there any easy way to make the left and right columns narrower (and proportionately narrower for responsive) while making the center column wider?
February 1, 2023 at 3:56 am #1396123Hi William,
Please try the instructions in our documentation: (Under Six Columns or more) https://kriesi.at/documentation/enfold/columns/#six-columns-or-more
Let us know if it helps.Best regards,
NikkoFebruary 1, 2023 at 2:53 pm #1396225Thank you Nikko. I try to find the more obvious things! Documentation is great—just hard to find at times.
February 1, 2023 at 3:09 pm #1396232I have followed the instructions noted above. I have successfully created a six column structure within a Color Section Element. A few follow-up questions:
- The overall width of the six columns (within the Color Section element is narrower than the columns built with Page Builder. Can the left and right margins be matched to previously built columns?
Thanks to your inout, and the added Quick CSS, I now have my six columns. What do I need to do to convert this to a 1/6, 4/6, 1/6 structure?
And finally, how do I use this 1/6, 4/6, 1/6 on other pages?Thank you.
February 1, 2023 at 3:42 pm #1396238Please see example at: https://woodyboaterstg.wpengine.com
February 1, 2023 at 5:22 pm #1396253Hi billbasler,
If you use this 1/6 4/6 1/6 structure, then please change those CSS codes with this one:
#av-extra-columns .entry-content-wrapper { display: flex; gap: 2%; } #av-extra-columns .entry-content-wrapper::before, #av-extra-columns .entry-content-wrapper::after { display: none; content: ''; } #av-extra-columns .flex_column.avia-builder-el-first, #av-extra-columns .flex_column.avia-builder-el-last { flex-basis: 25%; }
Let us know if it helps.
Best regards,
NikkoFebruary 1, 2023 at 6:02 pm #1396259This worked Nikko. It gives me the result expected. On mobile I would like the “Main” 4/6 center column to present first, with the left 1/6 column second, and the right 1/6 column third. Can you help out on this?
February 1, 2023 at 6:52 pm #1396264Nikko, on my simple text columns within the Color Section test, things did appear to work. But, when I place some of my test content within each column, things have gone sour.
First, the left and right columns do not line up across the top. Left, Middle, and Right should all align at top. I have tried various settings on “Equal Height” etc. No success. In fact choosing equal height on the left column created other unexpected results.
Second, in the center column, I am actually using three Blog Page Elements each with different settings. The top of the three should be presenting as the full width of the center column. This Blog element is set to bring in only posts tagged as “Featured Post,” of which there will only be one per day. The setting on this Blog element is Single Author, big preview Pic (no author picture is displayed, feature image is big). For whatever reason, this will not display with these settings. Instead this Blog Post Element seems to be trying to break into columns (sub columns within the center column.
The second of the three Blog Elements will be set to pick up the most recent six posts in grid form essentially showing a week at a glance. Theis Blog Element appears to be working well.
And finally, the Third Blog Element will be set to present post in a simple list view for the rest of the month. This is kind of working, but the posts have off alignment. I would like them left aligned. Right now they are neither left, or centered.
February 1, 2023 at 6:56 pm #1396265Update: I have used a different Blog Element setting on the last of the three. This eliminated some issues and could work for me.
February 1, 2023 at 7:01 pm #1396266I am sorry for all of the follow up posts. I am trying to solve issues while waiting. I think I have solved a couple of things. The last remaining issue seems to be this:
…. in the center column, I am actually using three Blog Page Elements each with different settings. The top of the three should be presenting as the full width of the center column. This Blog element is set to bring in only posts tagged as “Featured Post,” of which there will only be one per day. The setting on this Blog element is Single Author, big preview Pic (no author picture is displayed, feature image is big). For whatever reason, this will not display with these settings. Instead this Blog Post Element seems to be trying to break into columns (sub columns within the center column.
February 1, 2023 at 7:05 pm #1396269And also…
This worked Nikko. It gives me the result expected. On mobile I would like the “Main” 4/6 center column to present first, with the left 1/6 column second, and the right 1/6 column third. Can you help out on this?
February 2, 2023 at 4:11 am #1396319Hi billbasler ,
On mobile I would like the “Main” 4/6 center column to present first, with the left 1/6 column second, and the right 1/6 column third. Can you help out on this?
Please add this CSS code in Enfold > General Styling > Quick CSS:@media only screen and (max-width:767px) { #av-extra-columns .entry-content-wrapper { flex-direction: column; gap: 30px; } #av-extra-columns .flex_column { order: 0; } #av-extra-columns .flex_column.avia-builder-el-first, #av-extra-columns .flex_column.avia-builder-el-last { flex-basis: auto; order: 1; } }
Best regards,
NikkoFebruary 2, 2023 at 4:15 am #1396321Hi billbasler,
Also, please add this code to fix the blogpost on the 4/6 grid
#av-extra-columns .av-alb-blogposts .entry-content-wrapper { display: block; }
Please let me know if I miss some things :)
Best regards,
NikkoFebruary 2, 2023 at 2:21 pm #1396397Nikko, again, thank you for your excellent support. The code you have provided has definitely worked and fixed the issues I stated previously. Unfortunately, it seems new issues have been introduced. I have screen captured my page and addressed the issues on the screen capture.
https://baslerdesign.com/wp-content/uploads/Classic-Boats-Woody-Boater-scaled.jpg
I have also created an admin login for you if it is easier to login and see what is going on. I feel that if I can get to the bottom of these new issues, we will be getting down the road on this. Thanks in advance.
February 5, 2023 at 7:13 am #1396708Hi billbasler,
I apologize for the delay.
Problem 1, is a layout issue, the image and heading should be inside the Color Section and not outside it, I just adjusted wrapped those elements inside the Color Section and adjust the position.
Problem 2, I’m not really sure what’s the issue with the text, can you give us more context?
Problem 3, I have fixed it with this CSS code:
#av-extra-columns .avia-content-slider, #av-extra-columns .avia-content-slider .slide-entry-wrap { margin-bottom: 0; }
Problem 4, fixed with this CSS code:
#top #av-extra-columns .post-meta-infos { float: none; }
Best regards,
NikkoFebruary 5, 2023 at 5:47 pm #1396768Your fixes are good. Things are improving. Thank you.
Addressing Problem 2. The top blog post element features an image that extends across the full width of the center column. This is desired and correct. However, I would like to have this image be “taller.” Right now, the aspect ratio is approximately 2.5:1. —or 2.5 times as wide as it is tall. I would like this image to be taller—as in not crop the photo as much. Please see rough Photoshop mockup:
https://baslerdesign.com/wp-content/uploads/Classic-Boats-Woody-Boater-–-Classic-Boat-News-and-Information-copy-scaled.jpg- Assuming you suggest an edit to Quick CSS to fix this, it would be preferable to have a height %/px dimension that I can edit to arrive at the best height.
- In addition to this, I would like the Blog Post headline and the Blog post excerpt to left align at the same line as the photo. Essentially this will use the entire middle column without wide margins.
- And finally, on the lower blog grid, it seems like a recent edit created an unexpected consequence. I would like the images for the 6 grid posts to be perfect squares. It seems that the one in the lower left is wanting to show the entire image rather than cropping it to a square as on the others.
Thank you Nikko.
-
This reply was modified 1 year, 7 months ago by
billbasler.
February 7, 2023 at 7:29 am #1396936Hi billbasler,
1. Assuming you suggest an edit to Quick CSS to fix this, it would be preferable to have a height %/px dimension that I can edit to arrive at the best height.
It is not good to use CSS in this case as it would just stretch the image, you can either modify an existing image size or create a new one, for example I found this in your child theme:$size['portfolio'] = array('width'=>495, 'height'=>495);
You can just change the height of the portfolio image size and then re-upload the featured images to get the desired size.
2. In addition to this, I would like the Blog Post headline and the Blog post excerpt to left align at the same line as the photo. Essentially this will use the entire middle column without wide margins.
I have added this CSS code:#top #wrap_all .av-alb-blogposts .post-title { margin: 0 0 10px; } #top #wrap_all .fullsize .av-alb-blogposts .entry-content { max-width: 100% !important; }
3. And finally, on the lower blog grid, it seems like a recent edit created an unexpected consequence. I would like the images for the 6 grid posts to be perfect squares. It seems that the one in the lower left is wanting to show the entire image rather than cropping it to a square as on the others.
It seems this plugin is interferring with the sizes: DeMomentSomTres WordPress Export Posts With Images
I have disabled the plugin and re-uploaded the featured images, then in the homepage I edited the Blogposts and have set its Preview Image Size to Choose the preview image size manually and Select custom preview image size and set it to Portfolio which is using 495px x 495px image size (on your site). And it seems to work properly.Best regards,
NikkoFebruary 7, 2023 at 4:12 pm #1396995Thank you Nikko. I think I have a handle son this now. I appreciate your help. You can close this thread.
Bill
February 8, 2023 at 4:19 am #1397068Hi,
Glad Nikko was able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.Best regards,
Mike - The overall width of the six columns (within the Color Section element is narrower than the columns built with Page Builder. Can the left and right margins be matched to previously built columns?
-
AuthorPosts
- The topic ‘Column structure —smaller than 1/5th’ is closed to new replies.