[Support request] How to remove blue border around pictures in mobile first photo gallery 2016-10-13T10:35:06+00:00

Build with IDX Broker Forums IDX Broker Control Panel Custom CSS in Control Panel How to remove blue border around pictures in mobile first photo gallery

  • Author
    Posts
  • Beth Aber
    Participant
    Post count: 7

    I am trying to remove the blue border that goes around the photos in the mobile first photo gallery. I have tried publishing the css selection into my style sheet and changing what I thought might be the color controlling that box to none with !important. It did not work. I can’t seem to find that border any where. It looks like the attached picture. The red arrows point to the box that I want to get rid of. Thanks so much in advance. -Beth

    Attachments:
    You must be logged in to view attached files.
    1 rating, 1 vote1 rating, 1 vote (+1 rating, 1 votes, rated)
    You need to be a registered member to rate this post.
    Loading...
  • Antonio Ortega
    Keymaster
    Post count: 172

    Hi,

    The border can be found in your browser dev tools. See attached screen shot.

    Can you post your CSS that you are using to try and remove this border?

    Attachments:
    You must be logged in to view attached files.
    1 rating, 1 vote1 rating, 1 vote (+1 rating, 1 votes, rated)
    You need to be a registered member to rate this post.
    Loading...
  • Beth Aber
    Participant
    Post count: 7

    O.K. I am almost there. I found the border it was around the thumbnails, which did not occur to me. So now I have to override a few of the lines of css for the mobile first photo gallery with some new css. Sometimes this is easier than other times as every thing can get totally screwed up. I need to remove this part of the style sheet Mobile1st.css1:

    .IDX-wrapper-standard .IDX-thumbnail {
    display: block;
    padding: 4px;
    margin-bottom: 20px;
    line-height: 1.42857;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 0;
    transition: all .2s ease-in-out;
    }

    Then I have to do some centering, which I can do. I am sort of new to this, but I give a good try. Let me know if you have any suggestions. Thanks so much. -Beth

    1 rating, 1 vote1 rating, 1 vote (+1 rating, 1 votes, rated)
    You need to be a registered member to rate this post.
    Loading...
  • Beth Aber
    Participant
    Post count: 7

    O.K. I fixed it. I used the photogallery’s custom css and added the following in:

    .IDX-wrapper-standard .IDX-container {
    margin-right: auto;
    margin-left: auto;
    padding-left: 15px;
    padding-right: 15px;
    text-align: center;
    }

    .IDX-wrapper-standard .IDX-thumbnail a>img, .IDX-wrapper-standard .IDX-thumbnail>img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    }

    .IDX-wrapper-standard img {
    vertical-align: middle;
    }
    .IDX-wrapper-standard img {
    border: 0;
    }

    Attached is a screen shot.

    Attachments:
    You must be logged in to view attached files.
    1 rating, 1 vote1 rating, 1 vote (+1 rating, 1 votes, rated)
    You need to be a registered member to rate this post.
    Loading...

You must be logged in to reply to this topic.