Okay
  Public Ticket #3496528
Centered Overflow Images on Mobile
Closed

Comments

  •  2
    Thomas started the conversation

    I like using the overflow feature on desktop to send these collages off the browser, but on mobile, I would like them to overflow BOTH left and right, scale them up in a size a bit, and center on the screen.

    Is there a way to do that in the column settings or is that custom CSS?

  •  1,921
    Judith replied

    Hello Thomas,

    Thanks for writing to us.

    I am not sure I understood your query, please send us screenshots or a video describing the outcome you want so that we can respond accurately.

    I look forward to hearing from you.

  •  2
    Thomas replied

    Sure. You can check it out at https://learningvillage.org/programs/


    I like having the overflow on desktop, but on mobile I want to center these images but have it overflow left and right.

    Attached files:  Screenshot 2023-10-13 at 11.11.28 AM.png
      Screenshot 2023-10-13 at 11.11.22 AM.png

  •  1,921
    Judith replied

    Hi Thomas,

    Thank you for reaching out.

    It seems that both images share the same class, causing adjustments made on one image to affect the other negatively. Could you please provide us with your admin login details? This will enable us to assign a unique class to one of the images, allowing us to adjust them independently on mobile.

    Looking forward to your response.

    Best regards,

  •   Thomas replied privately
  •  1,921
    Judith replied

    Dear Thomas,

    Thank you for your prompt response.

    It appears that the login credentials provided are not currently valid. I kindly request that you thoroughly review the provided logins once more and, if necessary, provide updated and functioning login details.

    I eagerly await your prompt assistance in resolving this matter.

    Best regards,

  •  2
    Thomas replied

    Fixed.

  •  1,921
    Judith replied

    Hi Thomas,

    Thanks for writing back.

    I have added this class:

    6196078916.png

    Then added this CSS:

    @media only screen and (min-width: 1px) and (max-width: 999px){
    .img-with-aniamtion-wrap[data-max-width-mobile*="%"]:not([data-max-width="75%"]):not([data-max-width="50%"]) img {
        width: 74%;
        margin-right: 0em;
    }
    }
    @media only screen and (min-width: 1px) and (max-width: 999px){
      .image01 {
        width: 77vw !Important;
        margin-left: 0em !Important;
    }
    }

    Please check it out.

    Let me know what the outcome is looking like on your end.

    I looks forward to hearing from you.

  •  2
    Thomas replied

    We're halfway there...we centered them on mobile which is great, but can it overflow both left and right sides on mobile?

  •  1,921
    Judith replied

    Hi Thomas,

    Thank you for your prompt response.

    To achieve the desired effect of overlapping images on the left and right, you'll need to modify the margin settings in the CSS I provided earlier.

    If you encounter any challenges during this adjustment or need additional help, please don't hesitate to reach out. I'm here to assist and just an email away.

    Looking forward to hearing from you.

    Best regards,