Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • September 9, 2018 at 11:40 pm #1007716
    timahe

    Hi guys,
    I am actually creating a new website for a friend. Link where the problem occurs is added in private content. I am using WP 4.9.8 with Enfold 4.4.1.
    What we actually try to do: We include blog posts on a page using the masonry element because the blog posts use logos which unfortunately will always have different format / heights etc.

    1. At columns inside element I have selected “automatic, based on screen width” but actually once I access the site with my laptop it seems the automatic decision is bad because the best for my resolution would be 3 columns but it does 4 (see screenshot).

    2. I selected “Display Title” inside Element/Captions but it displays the publishing date, I do not want to display them..

    3. The logos get aligned correct so you can see the whole logo but they have a white background even if the logo itself has transparent background. In my view this looks bad….

    Thanks!

    September 11, 2018 at 4:36 am #1008159
    Ismael

    Hey Tima,

    Thank you for using Enfold.

    1.) What is the screen resolution of your monitor? I got a 1920x1080px screen and the masonry displays as 6 columns because of the following css media query.

    @media only screen and (min-width: 1800px) {
.responsive.html_stretched .av-masonry-col-flexible .av-masonry-entry, .responsive.html_av-framed-box .av-masonry-col-flexible .av-masonry-entry {
    width: 16.6%;
}
}

    In your screenshot, it is actually displaying the default column width, which is 24.90% or 4 columns. Use the following css code if you want it to display as 3 columns.

    @media only screen and (max-width: 1799px) and (min-width: 989px) {
.responsive .av-masonry-col-flexible .av-masonry-entry {
    width: 33.3%;
}
}

    2.) Use this css code to remove the date:

    #top .av-masonry-date {
    display: none;
}

    3.) And add this css code to remove the background or set it to transparent:

    .main_color .av-masonry-pagination, .main_color .av-masonry-pagination:hover, .main_color .av-masonry-outerimage-container {
    background-color: transparent;
}

    Best regards,
    Ismael

    September 11, 2018 at 2:29 pm #1008413
    timahe

    1. Hi, I checked @ PCwith FullHD resolution, its good with 6 units each row, but:
    1.1 The screenshot was taken from my Macbook Pro 2017 with 2880 x 1800 Px @ 220 ppi. So there it looks not good like its done.. I also do not want fixed entrys per row as the amount of entries will change every month – perfect amount should be calculated automatically (as Masonry element says it would do)
    1.2 At my PC @ FullHD the boxes do not have the same height while they have at Macbook. See screenshot in private content for more info on this.

    2. & 3. works, thanks!

    September 11, 2018 at 4:22 pm #1008449
    tonyrwd

    Hi,

    Just a very quick question (i hope you guys don’t mind). If you want a masonry type of blog, is it better to “build the masonry framework” first or to create all your posts ? I’m creating a very new website for a member of my family who already has some content but i was wondering if it would be more practical or easy to start with the masonry or with the blog posts ?
    Also, can you please confirm that on a one apge website, this is not an issue ?

    Thanks a lot

    September 11, 2018 at 8:41 pm #1008597
    Victoria

    Hi tonyrwd,

    Well, if there are not enough posts, the masonry will be partly empty, but it will still show on the page. So it does not really matter, whichever works for you – is fine.

    Best regards,
    Victoria

    September 12, 2018 at 12:15 pm #1008871
    timahe

    Hello Victoria or Ismael,

    could you please also answer on my question?
    Would be cool to get this fixed as soon as possible.

    Thanks!

    September 12, 2018 at 2:30 pm #1008934
    Victoria

    Hi timahe,

    Best regards,
    Victoria

    September 12, 2018 at 2:59 pm #1008962
    timahe

    Hi Victoria,

    for the Mac solution I do not think its fine…
    It show 4 elements in first row and 2 elements in second row. So there are totally 6 elements — I would only show 4 elements per row if its more than 6 elements. For 6 elements 3 each row. For 7 elements 4 first row, 3 second row but those should be centered. 8 elements 4 each row.. and so on. Hope you understand me. But ONLY for the mac thing/problem as I tested on my fullhd pc it was nice. Hope you understand 4 in one row and afterwards 2, even not centered looks a bit strange.

    Thanks

    September 13, 2018 at 3:02 am #1009148
    Ismael

    Hi,

    – perfect amount should be calculated automatically

    The amount or number of columns are not calculated dynamically but is based on the screen or browser width. Please review the css media query that I posted above. It displays as 6 column on my end (1920x1080px screen/monitor) because the screen resolution is equal or more than 1800px, so it sets the width of the masonry entries to 16.6% of the parent container.

    I also do not want fixed entrys per row as the amount of entries will change every month

    That is not possible, unfortunately. As I said, the number of columns is based on the current screen width or resolution. You can add more css media queries if you want to change the number of columns on larger screen resolutions such as your 2880px mac.

    Best regards,
    Ismael

    September 17, 2018 at 12:35 pm #1010707
    timahe

    Hi Ismael,

    thanks for the detailed info. Only one thing left:
    If you look at the masonry boxes now they have different heights? Can we please fix this?`

    Thanks!

    September 17, 2018 at 4:52 pm #1010840
    Ismael

    Hi,

    Did you remove the masonry element? I can’t find it anywhere in the page. Which size option did you set it to?

    Best regards,
    Ismael

    September 18, 2018 at 2:35 pm #1011307
    timahe

    Hi Ismael,

    no, did not remove the masonry blog element… Please dont forget to select the German version, maybe thats why you do not see it :)
    Also attached screenshot in private!

    September 19, 2018 at 3:41 am #1011592
    Ismael

    Hi,

    Thanks for the update. You can add this css code to set a minimum height for the masonry content or title container.

    .av-masonry-entry .av-inner-masonry-content {
    height: 79px;
}

    The height varies because the title breaks to a second line.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.