Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #780073

    Hi, could you help me with this?:

    -I have 5 images in a row, each of them in 1/5 column.
    In mobiles devices each of them fall one below the other. Is it possible to keep them in one row on mobiles too? How could I do that?
    (I attach 2 screenshots to explain me better).
    Thank you very much!

    #780333

    Hey cipriana,

    Could you post a link to the page in question so that we can take a closer look please?

    Best regards,
    Rikard

    #780389

    Sure, here you have.

    #780971

    Hi,

    Please try the following in Quick CSS under Enfold->General Styling:

    @media only screen and (max-width: 767px) {
    .home #av_section_2 .no_margin.av_one_fifth {
        width: 20% !important;
        float: none !important;
        display: table-cell !important;
        margin-left: 0 !important;
        margin-top: 0 !important;
    }
    }

    Best regards,
    Rikard

    #781083

    Hi, it worked! Thanks
    Now, I don´t know why some of the texts (epigraphs) over the images are not well centered with the image.
    I show you with a screenshot.

    Thanks!

    #781540

    Hi,

    I think that happens because the text cannot fit inside of the container. That’s why it’s a better idea to let the elements have their space on mobile sizes too.

    Best regards,
    Rikard

    #781946

    HI, what do you mean Rikard?
    I´ve given them default size.
    And if I give them 10px, which is the smaller possible size offered, they are not well centered either.
    What do you suggest?
    Thanks

    #782123

    Hi,

    I’m not sure to be honest, do you have to keep them inline on small screens? I would try to find a layout which works on mobile too, maybe you could try creating a separate layout for mobile only? You can do so by putting it in a Color Section and give the section an ID (for instance my-id), then hide it on all screen sizes except mobile:

    @media only screen and (min-width: 768px) {
    #my-id {
      display:none;
    }
    }

    Best regards,
    Rikard

    #782352

    That sounds good.
    and I think I should do the same with the layout for desktop right? Hiding it for mobiles…
    Which would be the css code in that case?

    Thanks

    • This reply was modified 7 years, 8 months ago by cipriana.
    #782672

    Hi,

    Yes, the process would be the same for hiding sections for mobile/desktop. You could try something like this in Quick CSS:

    @media only screen and (min-width: 768px) {
    #section-desktop {
      display:block !important;
    }
    #section-phone {
      display:none !important;
    }
    }
    
    @media only screen and (max-width: 767px) {
    #section-desktop {
      display:none !important;
    }
    #section-phone {
      display:block !important;
    }
    }

    Best regards,
    Rikard

    • This reply was modified 7 years, 8 months ago by Rikard.
    #782746

    That worked. Thank you very much!!

    #782787

    We’re always glad to be of help! Do let us know here in the forums if you need help with anything else.
    Thank you for using Enfold.
    Cheers!
    Sarah

Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Images in a row’ is closed to new replies.