Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • April 20, 2023 at 4:06 pm #1405053
    Hofbraeu

    Hi, I have 2 issues:

    1. “Icon Circles” is not displaying correctly on mobile and after theme update it does not show at all in mobile mode. Tested with macOS and iPhone Safari
    2. “Advanced layout slider” images are not “retina” proof, meaning they have a low resolution in desktop view and mobile view.

    Please see both on this front-page.

    kind regards.

    April 21, 2023 at 5:49 am #1405126
    Ismael

    Hey Hofbraeu,

    Thank you for the inquiry.

    1.) It looks like there are some issues with the custom styles, which is causing the element to display incorrectly on mobile devices. To fix these styling issues, please try adding the following CSS code.

    @media only screen and (max-width: 767px) {
  /* Add your Mobile Styles here */

  #top .av-icon-circles-container.av-lftrm34e-005a047f6a57a1ad785b3cf1368ab8c9 {
    margin: 0;
    width: 100%;
    padding-bottom: 100%;
  }
}

    2.) To ensure your images look sharp on retina devices, you may need to upload images that are twice the size of the current ones.

    Best regards,
    Ismael

    May 3, 2023 at 11:31 am #1406321
    Hofbraeu

    Hi,

    1.) Did not work :/
    2.) The Images are available in high resolution that is min. twice as big as they are displayed by the advanced layout slider. I also tried too upload a 1000px width logo (TRUDE) which is very crisp, but when its displayed in the slider its still blurry.

    kind regards

    • This reply was modified 1 year, 6 months ago by Hofbraeu.
    May 6, 2023 at 3:39 pm #1406570
    Mike

    Hi,
    Thank you for your patience, your icon circle element seems to be hidden on mobile devices with the Element Visibility option:
    Enfold_Support_1985.jpeg
    try disabling this.
    Then try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    @media only screen and (max-width: 900px) {
  #top #wrap_all .av-icon-circles-container {
    margin: 0;
    width: 100%;
    padding-bottom: 100%;
  }
}

    Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
    After applying the css, please clear your browser cache and check.
    Please note that iPads & iPhones can be hard to clear the cache, often you need to also clear the history to fully purge the cache, following these steps for Safari and note Step 4 where you will Clear the History.

    Best regards,
    Mike

    May 8, 2023 at 12:37 pm #1406731
    Hofbraeu

    Hi Mike,

    thank you very much, this code worked for 1.)

    Please assist with point 2. The original images are uploaded in high resolution, however the advanced layout slider fetches a low resolution version of this image for the thumbnail – and I don’t see any option to change that. Its definitely not because of our images.

    thanks and kind regards
    Ben

    May 9, 2023 at 5:16 am #1406828
    Ismael

    Hi,

    Thank you for the update.

    The original images in their proper sizes (1600x1464px) seem to be displayed correctly in the layer slider. Please check the private field. Would you mind providing a screenshot of the issue? You can use imgur, savvyify or dropbox for the screenshot.

    Best regards,
    Ismael

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