Remove margins of "search store" section on small screen sizes

I'm trying to remove the margin around the "Find your local centre" on small screen sizes so the map on the page is not visible below it on bottom and on the sides.

I've tried using this, but it is not working:

@media only screen and (max-width: 900px)
#sl_find_a_store > span {
margin: 0 5px;
}
#sl_find_a_store{
border-radius: 0px !important;
margin: 0 -10px -5px;
}
}
  • Jayman Pandya
    • Recruit

    Hi allanlove,

    I was unable to test this code snippet on the site as the Staff Support Access was not active. You can try adding this snippet to Appearance -> Customiser -> Additional CSS

    @media only screen and (max-width: 460px)
    .post-9 #sl_postcodeLookup {
        margin-left: -10px;
    }

    Please respond to this thread with your observations after you add the snippet.

    Thank you
    Jayman

  • Ashik
    • Staff

    Hi allanlove,

    Sorry to hear that the issue still not fixed yet. After inspecting I can see there are some repeated CSS in your site stylesheet that actually conflicts with each other. So, some code needs to be removed and some needs to be added.

    Please search by using exact CSS selector (Class or ID) to find out the below code block in your style.css

    Commented Code line that should be removed.

    First of all please remove repeated rules in CSS from style.css file. I'm putting the whole code block with inline comment. So, you find it and remove. The commented line should be removed.

    .mobileonly {
        position: absolute;
       /* top: 70%; Remove this line */
        /* left: 50%;  Remove this line */
        /* transform: translateX(-50%); Removed this line*/
        display: table;
    }
    .sl_postcodeSearchInput-detached {
       /*  width: 78% !important; this line should remove */
        border-radius: 7px !important;
    }
    @media only screen and (max-width: 900px){
    #sl_postcodeLookup {
        position: fixed !important;
       /*  top: unset !important;  Remove this line  */
        bottom: 0 !important;
        width: 100vw !important;
    }
    }

    Commented Code line that should be add.

    @media only screen and (max-width: 900px){
    #sl_postcodeLookup {
        position: fixed !important;
        bottom: 0 !important;
        width: 100vw !important;
        left: 0; /* add this line /*
    }
    }

    Please let us know if it works for you. If you're having issues with that and want us to perform above changes, please do let us know. We are here to help you.

    Regards,
    Ashik

  • Ashik
    • Staff

    Hi allanlove,

    Thank you for your patience.

    I just made above changes that I proposed last day. I know you did same but some part was missing. No worry, I've fixed it for you.

    Feel free to reply here if you've any more questions or concerns about this. Have a great day ahead.

    Regards,
    Ashik

  • Ashik
    • Staff

    Hi allanlove,

    Thank you for your reply.

    I just made above changes that I proposed last day. The same line of code was in several places. I just removed it. It was conflicting with each other. Thank you for your understanding.

    Regards,
    Ashik

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.