WordPress.org

Ready to get started?Download WordPress

Forums

WP Retina 2x CSS Change required (8 posts)

  1. dadsidea
    Member
    Posted 1 year ago #

    Hi all,

    I'm using the fantastic WP RETINA 2X plugin, for my new website using a wonderful WP Shower theme, http://wpshower.com/themes/portfolium/

    Unfortunately, I can't get it working for some reason trying every option (I think) under the sun.

    You can view my dev site with the retina test here: http://stage.visualcontinuity.co.uk/tabrezdotseesee/portfolio/retina-tester-2

    The full image is on this link: http://stage.visualcontinuity.co.uk/tabrezdotseesee/wp-content/uploads/2012/08/retina_tester@2x.jpg

    On this theme, to add images, you have to drop files into the portfolio section, I'm choosing large (785 × 523), then save changes (not “insert into post”) and this is how images are uploaded to this theme.

    The images are not being scaled down, and just appear huge and the thumbnail is also pixelated.

    I got in touch with the developer, and he kindly responded with the following:

    “The problem is actually very simple: a retina image is used, but also the HTML code has a different width and height (which actually shouldn't have changed). The problem is therefore located in your theme, and you will have to force the image to be 785x523 in the HTML code or the CSS.”

    So…my question is, what do I do in my CSS to make this change?

    Thanks very much in advance.

    Tabrez

    [ Please do not bump, that's not permitted here. ]

  2. Jordy Meow
    Member
    Posted 1 year ago #

    Hey Tabrez,

    Look in your style.css for "#show img", you will find:

    #show img {
      cursor: pointer;
    }

    Replace it with:

    #show img {
      cursor: pointer;
      width: 785px;
      height: 523px;
    }

    Tell me if it works better for you.

  3. dadsidea
    Member
    Posted 1 year ago #

    Jordy you legend!

    Thanks for that, works a treat, I just need to sort my other portrait images out.

    Also, what do I about my “logo” and the retina tester (and other) 145px x 145 px icons?

    Thanks so much!

  4. Jordy Meow
    Member
    Posted 1 year ago #

    You're welcome! You have to do the same thing for the other elements as well. You have no knowledge at all of CSS and HTML? It should be quite easy to do, just take time to look at the elements.

  5. dadsidea
    Member
    Posted 1 year ago #

    More of a designer than a programmer, and I only know some absolute basics :)

    I've got the logo sorted now (woo!), but still can't work out the thumbnails. This is the code I have for the thumbnails:

    .thumb {
    display: block;
    width: 145px;
    height: 145px;
    margin-bottom: 5px;
    position: relative;
    color: #333;
    }

    I thought by having the image at 290x290 would be fine. It has the green retina check box next to it in the media list.

    Sorry, but I'm stumped here, still can't get the thumbs working. Any ideas?

    Many thanks!

  6. dadsidea
    Member
    Posted 1 year ago #

    Stilll can't get it working I'm afraid! Any idea what it could be?

    Thanks again!

  7. Jordy Meow
    Member
    Posted 1 year ago #

    Sorry for the late reply. I am not using a Retina display right now (today) but can you try this?

    .thumb {
    display: block;
    width: 145px !important;
    height: 145px !important;
    margin-bottom: 5px;
    position: relative;
    color: #333;
    }
  8. dadsidea
    Member
    Posted 1 year ago #

    [ Moderator Note: Please post code or markup snippets between backticks or use the code button. The blockquote doesn't work as well. ]

    Thanks for getting back to me, and no worries about the delay!

    I've tried that, and it never worked. After the line, there is also:

    .thumb span {display: block; width: 145px; height: 145px; position: absolute; top: 0; left: 0; background: #99FFFF;}

    which I changed to

    .thumb span {display: block; width: 145px !important; height: 145px !important; position: absolute; top: 0; left: 0; background: #99FFFF;}

    Still nothing changed on this one. In the media list, they definitely are approved for Retina images as well, so I'm a wee bit stumped here.

    Thank you for your help so far, but I'm afraid I still need your help on this one. Any more thoughts?

    Thanks again!

    [ Please do not bump, that's not permitted here. ]

Topic Closed

This topic has been closed to new replies.

About this Topic