Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • #942771

    Hola,

    i Noticed the enfold instagram widget is different heights. The otter images seem to be taller than the inner images.

    #943727

    Hey,

    I checked your website and they are all the same size on my end. Attached a screenshot in private content field.
    Have you figured it out already? :)

    Best regards,
    Yigit

    • This reply was modified 7 years, 2 months ago by Yigit.
    #943806

    hola,

    Those arn’t even. See the screenshot with the grids. The middle 2 columns are shorter in both rows. Do you see?

    #944995

    Hi,

    Thank you for the info.

    Set a minimum height to the instagram images.

    .av-instagram-item a img {
        min-height: 279px;
    }

    You may need to add css media queries to adjust the minimum height value for smaller screens.

    Best regards,
    Ismael

    #945511

    Hola, Thanks. it looks great on desktop but on mobile it scrunches the pictures hortixontal. How would I get that resolved?

    #945841

    Hi CColeman88,

    Can you try adding this css code also:

    @media only screen and (max-width:1024px) {
      #top .av-instagram-item a img {
        min-height: 0;
      }
    }

    Hope this helps :)

    Best regards,
    Nikko

    #946175

    great

    #946298

    Hi CColeman88,

    Glad we could help. :)
    Let us know if you need further assistance or if we can close this thread.

    Best regards,
    Nikko

    #948173

    After the newest enfold update. the code provided does not work. the heights are not the same.

    #948589

    Hi CColeman88,

    Can you please attach a few screenshots of the issue?

    Best regards,
    Victoria

    #949176

    the middle 2 boxes are not as high as the otter 2 boxes. The middle two are about 2-4 pixels smaller in height. is this how the boxes were coded? – to be different sizes??

    #949842

    Hi CColeman88,

    Can you try adding this css code in Quick CSS (located in Enfold > General Styling):

    #top .av-instagram-row .av-instagram-item {
        padding-left: 3px !important;
        padding-right: 3px !important;
    }

    Hope it helps :)

    Best regards,
    Nikko

    #954158

    @nikko

    I added that and it worked but when the theme updated to the newest version the height difference persists.

    Please advise

    #954384

    Hi CColeman88,

    Probably it’s because of the caching, can you try to flush out the cache, since I could not see the code before being reflected.
    If that doesn’t work try going to Enfold > Performance > CSS file merging and compression set to Disable – no CSS file merging and compression and before saving try to check: Delete old CSS and JS files?
    Hope this helps.

    Best regards,
    Nikko

    #954904

    The cache is flushed. By default the CSS file merging is set to disable and I checked the box and the issues still persists.

    Please Advise

    #955188

    Hi CColeman88,

    Please post us your login credentials (in the “private data” field), so we can take a look at your backend.

    1. Install and activate ” Temporary Login Without Password “.
    2. Go to ” Users > Temporary Logins ” on the left-side menu.
    3. Click ” Create New “.
    4. Add the email address for the account ( you can use (Email address hidden if logged out) ), as well as the ” Role ” making that the highest possible and the expiry about four days
      ( do be sure that we have enough time to debug ).
    5. Click ” Submit “.
    6. You’ll now have a temporary account. Please provide us here in the private section the URL, so we can login and help you out.

    When your issue is fixed, you can always remove the plugin!
    If you prefer to not use the plugin, you can manually create a admin user and post the login credentials in the “private data” field.

    Best regards,
    Nikko

    #955472

    Attached

    #955661

    Hi CColeman88,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
    .av-instagram-item:nth-child(n+1),  .av-instagram-item:nth-child(2n) {
      padding: 1px;
    }
    .av-instagram-item:last-child {
      padding: 2px 1px 2px 1px;
    }
    

    If you need further assistance please let us know.

    Best regards,
    Victoria

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