Viewing 20 posts - 1 through 20 (of 20 total)
  • Author
    Posts
  • October 17, 2022 at 9:55 am #1369066
    fkm

    Hi Enfold team,

    with the following CSS code I was able to reduce the vertical distance between the entry titles of the ajax portfolio preview (and also adjust the left margin and the font size) that I´m using on my page:

    .grid-entry-title {
font-size: 17px!important;
margin-top: -14px!important;
margin-left: -20px!important;
}

    The settings for the left margin and the font size also affect the smartphone view.
    However, the vertical spacing between the titles in this view remains unchanged.

    I also tried the following one but it doesn´t work:

    @media only screen and (max-width: 767px) {
.grid-entry-title {
margin-top: -40px!important;
}}

    So please let me know how to decrease the vertical distance between the entry titles on mobile view (smartphones).

    Thank you very much in advance.

    Best regards,
    fkm

    October 17, 2022 at 12:17 pm #1369081
    Yigit

    Hey fkm,

    Thanks for contacting us!

    Please add following code to Quick CSS field in Enfold theme options > General Styling tab

    
@media only screen and (max-width: 480px) { 
#av-sc-portfolio-1 .grid-content {
  padding: 0 20px 0 20px;
}
}

    Best regards,
    Yigit

    October 17, 2022 at 3:10 pm #1369109
    fkm

    Hi Yigit,

    after reversing the order of the first two padding values, it works fine:

    @media only screen and (max-width: 480px) { 
#av-sc-portfolio-1 .grid-content {
  padding: 20px 0 0 20px !important;
}
}

    Great – thank you very much.

    Could you please also let me know how to move the whole entry title block closer to the text above?
    Please see screenshot.

    Thanks a lot in advance.

    Best regards,
    fkm

    October 17, 2022 at 3:16 pm #1369110
    Yigit

    Hey,

    You have following custom CSS code which is causing the extra white space

    
.portfolio_preview_container.open_container {
  top: -66px !important;
}

    Could you please change it to following 

    
.portfolio_preview_container.open_container {
  margin-top: -66px !important;
}

    Cheers!
    Yigit

    October 17, 2022 at 5:45 pm #1369149
    fkm

    Hey Yigit,

    thank you for pointing that out, I’ve changed it accordingly.
    In addition, I could then make all the adjustments I wanted to.
    Just great.

    There’s one more thing about the entry titles that I realised just now (maybe you can help me with this as well):
    Every time after clicking an entry title to open a new preview, the entire title block jumps up and down a little bit immediately.
    Do you have an idea what could be causing this and how to prevent it?

    Thanks a lot for another reply in advance.

    Best regards,
    fkm

    October 19, 2022 at 3:06 am #1369305
    Ismael

    Hi,

    Thank you for the update.

    Are you referring to the “Slidershow” links at the bottom of the page? We can’t reproduce the same issue on our end. The links stay where they are on click.

    Would you mind providing a screenshot? You can use imgur, savvyify or dropbox for the screenshot. Thanks.

    Best regards,
    Ismael

    October 19, 2022 at 10:04 am #1369360
    fkm

    Hi Ismael,

    thank you very much for your reply.

    Right, it´s about the “Slidershow” links.
    They move down and up about half a second after clicking each.
    I just tried on chrome and firefox – same issue.
    I also tried to make a video of it – it’s pretty wobbly, but I hope you can still see it.
    Please see below.

    Thanks a lot in advance.

    Best regards,
    fkm

    October 20, 2022 at 1:48 am #1369495
    Ismael

    Hi,

    Thank you for the short clip.

    We can’t reproduce the issue on our end, or rather we can’t see the issue because every time we click the links, the site scrolls back to the top and focus on the active slide. Not sure why this is not happening in the short clip.

    Best regards,
    Ismael

    October 20, 2022 at 9:55 am #1369550
    fkm

    Hi Ismael,

    thank you very much for your reply.

    I just removed all the images and text from the ajax portfolio previews so it no longer scrolls back to the top.
    Now it’s easier and clear to see – sorry, I should have consider that before.

    Please take another look.
    I just checked again in several browsers including smarthphones (iPhone, Samsung) and it’s the same in each case.

    In addition I replaced the video with a screen record (iPhone) while tapping the entry titels to show the issue in a better resolution and without the shaking.
    Please see the link below.

    Thanks a lot in advance for another reply.

    Best regards,
    fkm

    October 21, 2022 at 9:22 am #1369694
    Ismael

    Hi,

    Thank you for the info.

    The jump occurs because of the inline height property, which is applied to the .portfolio-details-inner element before and after the slider animation. Applying a minimum height to the slider or to the mentioned element should fix the issue.

    .portfolio-details-inner {
    min-height: 200px;
}

    Best regards,
    Ismael

    October 21, 2022 at 10:05 am #1369706
    fkm

    Hi Ismael,

    thank you very much for figuring out what’s causing this issue – that’s great.
    The CSS code does fix the issue for now (as long as it doesn’t include images and text).

    However, once I reinsert images and text, the issue returns.
    Please let me know how to fix this as well.

    Thanks a lot in advance.

    Best regards,
    fkm

    October 26, 2022 at 8:34 am #1370257
    Ismael

    Hi,

    Have you tried adjusting the minimum height, and did you bring back the scroll option? The jump is not really visible when clicking any of the links because the document immediately scrolls to the active slider. Adjusting the minimum height using the css code above should fix the issue.

    Thank you for your patience.

    Best regards,
    Ismael

    November 2, 2022 at 5:13 pm #1371099
    fkm

    Hi Ismael,

    thank you very much for your reply and please excuse my late reply.

    I did bring back the scroll option for “slidershow 1” and “slidershow 2” by bringing back the images and the text to see if it still jumps then – and it does.
    Each ajax portfolio preview will later contain images (slideshow or image list) and text.
    I only removed the same to demonstrate the jump.

    So I tried to adjust the minimum height:
    Without images and text a minimum height of 200 pixels (according to the CSS code above) stopes the jump.
    Containing images and text, the minimum height needs to be around 1010 pixels for it to stop jumping.
    But unfortunatley that´s not a solution because this value is way to much for the smartphone view.

    Please let me know if there is another option to stop the jump?

    Thank you very much in advance.

    Best regards,
    fkm

    November 3, 2022 at 2:33 am #1371167
    Ismael

    Hi,

    But unfortunatley that´s not a solution because this value is way to much for the smartphone view.

    You can add css media queries and adjust the minimum height value on different screen sizes. Again, the jump is not visible or noticeable when there are images in the slide because the document automatically scrolls to the active slider. Do you still see the jump when the slider images are present and after the document scrolls to the active slider?

    Best regards,
    Ismael

    November 3, 2022 at 11:28 am #1371201
    fkm

    Hi Ismael,

    thank you very much for your quick reply and for your patience.

    I just realized that adjusting the minimum height value on different screen sizes wouldn´t be a solution as well because the length of the text and the type of display (slideshow or image list) will vary for each preview and with it the spacing.

    Yes, I still see the jump, it´s noticeable when all elements are visible at once on big screens (like on my end on the desktop).
    I just took two screenshots of the jump, overlaid them and saved them as an animated GIF.
    Please see the link below.

    Thanks a lot in advance for another reply and sorry for the inconvenience.

    Best regards,
    fkm

    November 5, 2022 at 9:34 pm #1371490
    Mike

    Hi,
    Thanks for your patience, I have reviewed your page and have come to the same conclusion as Ismael the reason the list of links at the bottom of the page moves is because the portfolio-details-inner div gets it’s height set based on each slide’s height, so the solution is to set a minimum height for the element. But the minimum height will be different for each device width and unfortunately I don’t see a way to make this automatic because the slides are not added to the element on page load they are only added after each link is clicked so it can not be calculated before hand.
    Since you are still adding content to the slides you will need to first add all of your content, then manually check each slides height for each screen width and add media queries for the portfolio-details-inner minimum height.
    For example, currently you only have content in slides one & two, so the media queries for mobile (425px), tablet (768px), and desktop (up to 2560px) would look like this.

    @media only screen and (max-width: 767px) { 
#main .portfolio-details-inner {
    min-height: 790px;
}
}
@media only screen and (min-width: 768px) and (max-width: 2560px) { 
#main .portfolio-details-inner {
    min-height: 1036px;
}
}

    Best regards,
    Mike

    November 8, 2022 at 4:08 pm #1371767
    fkm

    Hi Mike,

    thank you very much for your reply and for the CSS codes.

    I understand.
    But wouldn’t I then have to specify individual minimum heights for each portfolio entry (in adition to each screen width) because of its different text lengths?
    Is it possible to set different values ​​for each individual portfolio entry (via an ID or something like that)?

    Thanks a lot for another reply in advance.

    Best regards,
    fkm

    November 8, 2022 at 7:42 pm #1371805
    Mike

    Hi,
    You want to set the height of portfolio-details-inner equal to the tallest inner article.
    You don’t want to set different values ​​for each individual portfolio entry, this would give you the same jumping that you have now.

    Best regards,
    Mike

    November 9, 2022 at 12:27 pm #1371886
    fkm

    Hi Mike,

    thanky you very much for your reply.

    I have the impression that there is a small misunderstanding here (if I’m not mistaken):
    I didn’t mean the kind of jump where the entry titles block adapt/move to the end of each content when selecting a porfolio preview – this is a very nice feature that I don’t want to change.
    I meant the little “extra jump” of the entry title block (just a few pixels down and up) right after clicking one of it and right after moving to the end of the content of the sellected portfolio preview.

    But I also accept what Ismael said earlier here:
    This extra jump is not really noticeable.
    Maybe I became a little obsessed with this matter.
    Basically, it’s still fine the way it is now, so I´ll leave it like that.

    Please don´t take it amiss and thank you very much for your patience.

    Best regards,
    fkm

    November 9, 2022 at 8:14 pm #1371985
    Mike

    Hi,
    Thanks for the feedback and since you have decided to leave it as it is we will go ahead and close this thread, 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

  • Author
    Posts
Viewing 20 posts - 1 through 20 (of 20 total)
  • The topic ‘ajax portfolio preview: decrease the distance between entry titles’ is closed to new replies.