Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • January 25, 2019 at 3:41 am #1058441
    radnerreyes

    Hi, I noticed an inconsistency with the display of images on my website when it comes to the desktop version and the mobile version.

    (I am comparing the 4 images in a grid row)
    https://imgur.com/a/6QeZIxQ – desktop images take up 50% of the page
    https://imgur.com/a/HQ22XqU – mobile images only take up maybe 15% of the page

    It seems like the images are enlarged on desktop but on mobile they are not. The ratio they are displayed on the screens are different. I prefer the way they look on mobile.

    Is there anyway to make them more consistent? Maybe make sure that specific grid row does not make the images fully fit the container?

    January 26, 2019 at 7:05 am #1059019
    Vinay

    Hey radnerreyes,

    The images in the grid are not of the same size hence it scales differently. Please make sure all images are of the same height and width.

    Best regards,
    Vinay

    January 27, 2019 at 8:12 am #1059312
    radnerreyes

    Ok – I made sure they are all the exact same dimensions. They continue to be enlarged though. Is there a way to make sure the grid row just leaves the images as their exact dimensions in desktop? They’re 232×232

    January 31, 2019 at 10:23 am #1060852
    Ismael

    Hi,

    You can set a maximum width for those images.

    .avia-image-container .avia_image {
    max-width: 100px;
}

    Turn on the custom css class field so that you can target them specifically.

    // https://kriesi.at/documentation/enfold/intro-to-layout-builder/#turn-on-custom-css-class-field-for-all-alb-elements

    Best regards,
    Ismael

    January 31, 2019 at 5:19 pm #1061063
    radnerreyes

    Hi Ismael,

    Thank you, that was able to adjust it nicely for desktop but it doesn’t seem to work on mobile. The images seem to overlap now.

    View post on imgur.com

    Any idea on how to avoid the image overlap? It looked exactly how I wanted it on mobile without the max-width code.

    Also, I’m trying to follow the specific targetting instructions but maybe I’m not getting it. Is this how it should look?

    #top .home-awards {
    max-width: 100px;
    }

    This doesn’t seem to be working. Any adjustments I should make>

    • This reply was modified 5 years, 10 months ago by radnerreyes.
    February 2, 2019 at 8:18 am #1061897
    Rikard

    Hi,

    I can’t reproduce those results on my end, and it looks like the CSS is applying since the images are displaying quite small. Do you still need help with this?

    Best regards,
    Rikard

    February 3, 2019 at 2:12 am #1062094
    radnerreyes

    Hi Rikard,

    That’s strange.. You are right, they are quite small and it looks like they shifted to the left now.

    I used this code:
    #top #home-awards {
    max-width: 252px;
    }

    Took the code out and it went back to the enlarged size.

    It seems like they are smaller than 252px as well. Any idea on why they shifted to the left and are much smaller? I’d like to have them centered and a little larger. They look alright on mobile, but the desktop view is what I want to adjust.

    February 5, 2019 at 3:51 pm #1063204
    Ismael

    Hi,

    That code adjusts the maximum width of the container where the images are. It’s not exactly what we instructed but it should still work. Have you tried adjusting the max-width value? You can also adjust the margin, so it align in the middle.

    #top #home-awards {
    max-width: 325px;
    margin: 0 auto;
}

    Best regards,
    Ismael

    February 5, 2019 at 9:09 pm #1063320
    radnerreyes

    Hi Ismael,

    The sizes work great – thank you. I used the following:

    #top #home-awards {
    max-width: 575px;
    max-height: 575px;
    margin: 0 auto;
    }

    One thing I noticed is that they are all centered now – which is fine. I was hoping to space it out but whenever I change the padding in the cells I notice it also affects the image size, especially in a mobile display. The images end up getting smaller since the margins get wider.

    • This reply was modified 5 years, 10 months ago by radnerreyes.
    February 7, 2019 at 9:46 am #1063952
    Ismael

    Hi,

    Alright. Instead of adjusting the width of the images’ container, try to resize the images themselves. Apply a custom css class attribute called “home-award” to every image element inside the “home-awards” section and then add this css code.

    #top #home-awards .home-award {
   max-width: 150px;
}

    Don’t forget to remove the previous css code and you have to enable the custom css class field first.

    // https://kriesi.at/documentation/enfold/intro-to-layout-builder/#turn-on-custom-css-class-field-for-all-alb-elements

    Best regards,
    Ismael

    February 9, 2019 at 7:10 am #1064872
    radnerreyes

    Hi Ismael,

    Followed your instructions and it all worked out – just what I was looking for. Thank you!

    February 10, 2019 at 5:48 am #1065053
    Rikard

    Hi,

    Great, I’m glad Ismael could help you out. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

    February 10, 2019 at 5:54 am #1065055
    radnerreyes

    Hi Rikard,

    I think it’s safe to say it can be closed. Thank you! Amazing support team.

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