Column structure —smaller than 1/5th - Support | Kriesi.at

Please see example at: https://woodyboaterstg.wpengine.com

February 1, 2023 at 5:22 pm #1396253

Hi 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,
Nikko

February 1, 2023 at 6:02 pm #1396259

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 1, 2023 at 6:52 pm #1396264

Nikko, 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 #1396265

Update: 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 #1396266

I 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 #1396269

And also…

February 2, 2023 at 4:11 am #1396319

Hi 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,
Nikko

February 2, 2023 at 4:15 am #1396321

Hi 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,
Nikko

February 2, 2023 at 2:21 pm #1396397

https://baslerdesign.com/wp-content/uploads/Classic-Boats-Woody-Boater-scaled.jpg

Nikko, 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.

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 #1396708

Hi 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,
Nikko

February 5, 2023 at 5:47 pm #1396768

Your 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, 10 months ago by billbasler.

February 7, 2023 at 7:29 am #1396936

Hi 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,
Nikko

February 7, 2023 at 4:12 pm #1396995