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

Tagged: , , ,

Viewing 3 reply threads
  • Author
    Posts
    • Beth Aber
      Participant
      October 13, 2016 at 10:35 am
      Post count: 7
      #1570

      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...
    • idxbroker
      Keymaster
      October 13, 2016 at 12:04 pm
      Post count: 179
      #1572

      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
      October 13, 2016 at 12:20 pm
      Post count: 7
      #1574

      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
      October 13, 2016 at 12:43 pm
      Post count: 7
      #1575

      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...
  • Author
    Posts
Viewing 3 reply threads
  • You must be logged in to reply to this topic.