Skip to main content

Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #275158
    janet4now
    Participant

    On the left hand side is a menu with icons over the page titles. They should be centered, but only looks right in Chrome:

    http://grow.habovillage.com/testing/

    #sfm-sidebar .sfm-menu a img {
        max-width: 100%!important;
        margin-left: -15px !important;
        display: block;
    }
    #sfm-sidebar .sfm-menu li > a span {
        margin-left: -30px!important;
        margin-top: 6px!important;
    }
    
    

    That is the code I added to try and get it to center above instead of the icons being on same line as title.

    Anyone know why only Chrome looks correct?

    #275258
    Atelierbram
    Participant
    #sfm-sidebar .sfm-menu a img {
      display: block;
      max-width: 40px  !important;
      max-height: 40px  !important;
      margin: 0 auto !important;   
    }
    #sfm-sidebar .sfm-menu li > a span {
      display: inline-block;
      margin-top: 6px !important;
    }
    .sfm-has-child-menu > a, 
    .sfm-pos-right .sfm-has-child-menu > a {
      padding: 0 !important;
    }
    

    Have you considered embedded SVG sprites (with the use element)?

    #275262
    Pogany
    Participant

    Hi,

    In your code as it is you may replace #sfm-sidebar .sfm-menu a img {max-width: 100% !important; with #sfm-sidebar .sfm-menu a img {width: 100%;

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.