WP Retina 2x CSS Change required

  • Hi all,

    I’m using the fantastic WP RETINA 2X plugin, for my new website using a wonderful WP Shower theme, https://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: https://stage.visualcontinuity.co.uk/tabrezdotseesee/portfolio/retina-tester-2

    The full image is on this link: https://stage.visualcontinuity.co.uk/tabrezdotseesee/wp-content/uploads/2012/08/[email protected]

    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 785×523 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. ]

Viewing 7 replies - 1 through 7 (of 7 total)

  • 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.

    Thread Starter dadsidea

    (@dadsidea)

    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!

    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.

    Thread Starter dadsidea

    (@dadsidea)

    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 290×290 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!

    Thread Starter dadsidea

    (@dadsidea)

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

    Thanks again!

    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;
}
    Thread Starter dadsidea

    (@dadsidea)

    [ 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. ]

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘WP Retina 2x CSS Change required’ is closed to new replies.