Tagged: ,

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #920871

    Hey Guys,

    i have a question about the mobile-break-line.
    I want to add a mobile-break-line between my Deals on my Website. I tried this code, but it didn’t works.The Target ist to have a grey, thin mobil breakline on front, category tag pages and custom post-types between every article. But only on mobile devices

    @media (max-width: 767px)
    .mobile-break-line {
    background-image: -webkit-linear-gradient(left, #e3e3e3 50%, rgba(255, 255, 255, 0) 0%);
    background-image: linear-gradient(to right, #e3e3e3 50%, rgba(255, 255, 255, 0) 0%);
    background-position: bottom;
    background-size: 10px 1px;
    background-repeat: repeat-x;
    background-repeat-x: repeat;
    background-repeat-y: no-repeat;
    padding-bottom: 20px;
    margin-bottom: 20px;
    }
    Can you please help me?

    Best regards
    Steps3011

    #920971

    Hey steps3011,

    Could you post a link to the site in question so that we can take a closer look please? Also, I’m not sure if I understand exactly what you are looking for, so if you could post a screenshot highlighting the changes you want to make that would likely help us understand your intentions.

    Best regards,
    Rikard

    #921240

    Hello Rikard,

    I would like to realize two things that increase the usability on my website. I will send you two screenshots of the things and my website in the private content area.

    1. Mobile break line between the individual elements on the website (but only on mobile)
    2. Social Profiles in the Mobile Menu. I made a Screenshot from a side, wich is also using the enfold theme. I Tryed a lot of things in a function php. and css, but the changes took no effect at all. The social Profiles on the example are in the menu.

    Thank you for your support.

    Best Regards
    Steps 3011

    #922010

    Hi,

    Thank you for the info.

    1.) Use this css code to add a border below the slider items.

    @media only screen and (max-width: 767px) {
        .responsive #top #wrap_all .avia-content-slider-odd .slide-entry {
            border-bottom: 1px dashed;
            padding-bottom: 20px;
        }
    }

    2.) Where can we find that section? Is that the mobile menu?

    Best regards,
    Ismael

    #922162

    Hello Ismael,

    First of all thanks again for your help in designing the different Read More Buttons. That worked great. Thank you.

    Point 1 in this thread also works wonderfully, so I thought so with the mobile-break-line.

    To point 2:

    Yes, that’s a screenshot of the mobile website. As you can see on the first photo, the social profiles mobile are built up in 3 lines. I would like to have the social profiles in the mobile menu but below all 3 in a row. I just send you the screenshot again, as I imagine it and how the other website has also realized it with the enfold theme. I tried a lot, but nothing worked.

    Best regards

    Steps 3011

    #922236

    Hi steps3011,

    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

    
    @media only screen and (max-width: 767px) {
      .html_av-overlay-side #top .av-burger-overlay li.burger-social {
        width: 26%; 
        float: left;
        margin-bottom: 20px;
      }
      .html_av-overlay-side #top .av-burger-overlay li.social_bookmarks_facebook {
        margin-right: 50px;
      }
    }
    

    If you need further assistance please let us know.

    Best regards,
    Victoria

    #922607

    Hey Victoria,

    The code works great for arranging social profiles in the mobile menu. But if you click on a button, all social profiles disappear. The social profiles are not clickable because they disappear when you click in the menu and nothing happens.

    Best regards

    Steps 3011

    #922886

    Hi Steps 3011,

    Not sure that there is an easy pure css solution for what you’re trying to achieve.

    I’ll ask my colleagues to have a look.

    Best regards,
    Victoria

    • This reply was modified 9 months, 1 week ago by  Victoria.
    #922907

    Hi!

    The first menu item covers the social icons. Please try this css code.

    #top #wrap_all #header #av-burger-menu-ul > li.social_bookmarks_instagram, #top #wrap_all #header #av-burger-menu-ul > li.social_bookmarks_facebook, #top #wrap_all #header #av-burger-menu-ul > li.social_bookmarks_twitter {
        z-index: 10000;
        position: relative;
    }

    Regards,
    Ismael

    #922909

    Hi,

    We have added the below CSS code to the Quick CSS section under Enfold > General Styling:

    #top .burger-social {
        z-index: 9999!important;
    }
    

    The social icons are working correctly. Please review the site and let us know if you have any questions.

    Best regards,
    Vinay

    • This reply was modified 9 months, 1 week ago by  Vinay.
Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.