Mobile Padding

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • Flash04jv
    Senior Member
    • Aug 2015
    • 474
    • 5.1.x

    Mobile Padding

    Me again! I'm sure you are all getting tired of me . We are dangerously close to having our forum all set up though, so the faster I can make these changes the faster I go away.

    I got the padding set nicely on our desktop site, but how can I change the padding above and below the Channel Titles, as shown in the photo below. I tried adding some media lines below the CSS code for the other codes you've given me, like we did on the avatars and read/unread topic icon, but no luck so far. Thanks for any help!!

    Someway for me to just add something into this?:

    Code:
    /*Padding for Forum Home page threads*/
    .cell-forum
    {padding-top: 8px!important;}
    
    .lastpost
    {padding-top: 7px!important;
    padding-bottom: 7px!important;}
  • Replicant
    Senior Member
    • Sep 2014
    • 527

    #2
    Try moving the icon down instead to give it a more equal look, then remove the forum-list-container padding. The area below should remain as is because two line titles will overlap topic/post info


    Comment

    • Flash04jv
      Senior Member
      • Aug 2015
      • 474
      • 5.1.x

      #3
      I tried removing each of the forum-list-containers, with a padding value, that I could find but they are mostly small changes to text spacing that I can see.

      It sounds like I need to edit this section to figure it out, is that true? Also, at the bottom I feel like I have something 'doubled up' or not needed. But I didn't want to remove anything yet since it is looking great, minus this padding thing.

      Code:
      /*black and grey NEFGA logos for unread and read topics*/
      /*our NEFGA custom status icons code*/
      
      /* unread topics*/ .topic-item .vb-icon.vb-icon-topic-status {
        background: transparent url(http://www.nefga.org/core/css/0/0/1/9/4/1//images/Status.png) no-repeat; }
      
      /* read topics*/ .topic-item.read .vb-icon.vb-icon-topic-status {
        background: transparent url(http://www.nefga.org/core/css/0/0/1/9/4/1//images/ReadStatus.png) no-repeat; }
      
      /* start custom forum icons */
      /* Forums */
      .forum-list-container .forum-item .cell-forum .icon, .forum-list-container .forum-item.sub.new .cell-forum .icon {
      background: transparent url(http://www.nefga.org/core/css/0/0/1/9/4/1//images/Read40x40.png) no-repeat; /* forum icon for forums with old posts */
      width: 40px; /* icon width */
      height: 42px; /* icon height */}
      
      .forum-list-container .forum-item.new .cell-forum .icon, .forum-list-container .forum-item.sub .cell-forum .icon {
      background: transparent url(http://www.nefga.org/core/css/0/0/1/9/4/1//images/40x40.png) no-repeat; /* forum icon for forums with new posts */
      width: 40px; /* icon width */
      height: 42px; /* icon height */}
      
      .forum-list-container .forum-item .cell-forum > .forum-wrapper > .forum-info {
      padding-left: 48px; /* icon width + 8 */}
      
      .forum-list-container .forum-item .cell-forum .forum-desc, .forum-list-container .forum-item.sub .cell-forum .forum-desc {
      margin-left: 48px;
      margin-top: -25px;}
      
      /* Sub Forums */
      .forum-list-container .subforum-list > td {
      padding-left: 53px; /* icon width + 13 */}
      
      /* Responsive *//*Mobile Phone Settings*/
      [USER="3396"]media[/USER] only screen and (max-width: 768px)  {
      .forum-list-container .forum-item .cell-forum .forum-desc {
      margin-left: 48px; /* icon width + 8 */}
       
      [USER="3396"]media[/USER] only screen and (max-width: 768px) {
      .forum-list-container .forum-item .cell-forum > .forum-wrapper > .forum-info {
      vertical-align: middle;
      display: table-cell;
      padding-left: 51px;}
      .forum-list-container .forum-item .cell-forum .rx-forum-stats, .forum-list-container .forum-item .cell-forum .rx-lastpost-info { margin-left: 51px; }}
       
      .forum-list-container .forum-item .cell-forum > .forum-wrapper > .forum-info {
      padding-left: 52px; /* icon width + 8 */}
      .forum-list-container .subforum-list > td {
      padding-left: 60px; /* icon width + 33 */}}
      /* end custom forum icons */

      Comment

      • Replicant
        Senior Member
        • Sep 2014
        • 527

        #4
        I wouldn't worry about it, it looks fine. The code to move the icon down is
        Code:
        .forum-list-container .forum-item.new .cell-forum .icon, .forum-list-container .forum-item.sub .cell-forum .icon {
            position: relative;
            top: 10px;
        }


        Comment


        • Flash04jv
          Flash04jv commented
          Editing a comment
          Thanks! I'll try to work in it more tomorrow night, may get it looking better now.

      Related Topics

      Collapse

      Working...