1. HOT Divi Ultimate Header Plugin - More variety for your Divi header: https://header.diviultimate.com/

How to lock images position between different elements

Discussion in 'Free Divi Community Forum' started by kotkota, Jun 30, 2020 at 3:52 AM.

  1. kotkota

    kotkota Member

    Hi, i have design with text, arrows and buttons. You can look here on the top of the homepage.
    I have made styles for arrows images with "%". On most devices looks good, but if check on mobile with landscape mode it becomes wrong.
    Which utins to use to freez position of the arrows for all devices? How to fix it. Thanks
     
    1. AD Add over 2500 icons in Divi to create attractive web designs: https://divi.help/link-forums/divi-icons.164/
  2. Problemizer.com

    Problemizer.com Divi Expert

    You should add these images as background :after and :before of buttons, that way you will ensure that they will stick when the website is visited on different devices.
    I gave you the idea, if you don't know how to achieve this I can try and write the code for you.
     
  3. kotkota

    kotkota Member

    Could you please help me with this? Never doing this before
     
    1. AD Add over 2500 icons in Divi to create attractive web designs: https://divi.help/link-forums/divi-icons.164/
  4. Problemizer.com

    Problemizer.com Divi Expert

    Please give the two buttons a unique ID here
    upload_2020-7-1_2-6-49.png
    Save and let me know.
     
  5. kotkota

    kotkota Member

    Ready.
    "bookbtn" and "reqbtn"
     
    1. AD Speed up your Divi site with Divi specific cache plugin: https://divi.help/link-forums/divi-rocket.160/
  6. Problemizer.com

    Problemizer.com Divi Expert

    Sorry for the delay. I had to twist my mind around this but I found the hack. :) Please try this custom CSS.
    @media (max-width: 767px) {
    .page-id-9 .et_pb_button_0_wrapper,
    .page-id-9 .et_pb_button_1_wrapper {
    display: inline-block;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    }
    .page-id-9 .et_pb_button_0_wrapper:after {
    content: " ";
    background: url(https://megavisuals.nz/wp-content/uploads/2020/06/arrow_1.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 40px;
    height: 60px;
    display: block;
    position: absolute;
    right: -50px;
    top: -10px;
    z-index: 1;
    }
    .page-id-9 .et_pb_button_1_wrapper:before {
    content: " ";
    background: url(https://megavisuals.nz/wp-content/uploads/2020/06/arrow_2.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 40px;
    height: 60px;
    display: block;
    position: absolute;
    left: -50px;
    top: -10px;
    z-index: 1;
    }
    }

    Let me know if this worked. This should work on mobile both horizontally and vertically.

    Best regards,
     
    kotkota likes this.
  7. kotkota

    kotkota Member

    Thanks!!!! I think it is working!!
    It is possible to make this for all devices: For Deskop and Tablets too?
     
    1. AD Easily add Mega Menu for your Divi site: https://divi.help/link-forums/divi-mega-pro.149/
  8. Problemizer.com

    Problemizer.com Divi Expert

    Your issue is was mobile landscape view so I made a solution for that. You already have arrows on the desktop view.
     
  9. kotkota

    kotkota Member

    Yes, it is correct, your code are awesome.
    It is possible to make the same for desktop and tablet with code?
     
    1. AD Use modules from the Extra theme with the Divi Builder: https://divi.help/link-forums/divi-extra.163/
  10. Problemizer.com

    Problemizer.com Divi Expert

    Of course, it is possible, just, I spent some time solving your original issue, and my free time used for helping people is limited. Hope you understand.
     
  11. kotkota

    kotkota Member

    yes, thank you
     
    1. AD Access 2000 icons from Font Awesome & Material Icon set in Divi: https://divi.help/link-forums/divi-icon-king.154/

Recommended Divi Hosting