Forums

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

Home Forums CSS using retina.js with ‘li’ tag

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #41064
    mikekellner
    Member

    I found today that using the ‘li’ tag is the best way for me to centre align text with images easily.

    All is perfect, until I want to use retina.js for HD images for HD/Apple retina displays. On a normal (non-HiRes display) the image shows great, then on a HiRes display any image with @2x gets its height squished.

    Any thoughts on workarounds, solutions?

    Thanks in advance :)



    #social_bar {
    background-color: #414141;
    color: #FFF;
    width: 100%;
    text-align: center;
    padding-top: 30px;
    padding-bottom: 30px;
    margin-bottom: 20px;
    vertical-align:middle;
    }
    #social_bar li {
    list-style-type: none;
    display: inline;
    padding-top: 5px;
    padding-right: 10px;
    padding-bottom: 5px;
    padding-left: 10px;

    height: 100px;
    line-height: 100px;

    }
    #social_bar li img {
    vertical-align: middle;
    padding-right: 10px;
    padding-left: 10px;
    }
    .social_bar_text {
    font-size: 1.5em;
    vertical-align:middle;

    }

    #115971
    mikekellner
    Member

    FIXED:

    I changed the ‘padding’ to ‘margin’ for the img CSS property

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