Retina display media queries

[pyramisa]

Hey guys,

I am relatively new to CSS and I am having trouble making four pictures to look OK on retina displays.

I know it should be fixed by using media queries, but I can’t code them myself.

http://pyramisaegypt.com/ – here is how it looks normally
http://pyramisaegypt.com/wp-content/uploads/2015/05/Screen-Shot-2015-05-04-at-12.32.51-PM.png – here is how it looks on macbook pro with a retina display

Is there a quick way to fix that issues?

Thanks in advance.

[pyramisa]

Thats kind of strange, because the screenshot I’ve attached is made on fully maximized Safari on Macbook pro with Retina display.

When I try it on my Lenovo it breaks at some point when I start resizing and then they just become 4 vertical images.

Any suggestions?

[pyramisa]

Nope, it’s not that. If I zoom out it becomes normal, but it is not at 100%.

[pyramisa]

Here is how it looks on iPad 3/4. It is messed up as it is on macbook pro retina.

http://responsivetest.net/#u=http://www.pyramisaegypt.com|2048|1536|2

The resolution is 2048×1536

[pyramisa]

Hi Jerba,

Thank you very much for your willingness to help.

As I’ve said, I am CSS noob and I did my best to represent everything in codepen.io, but I am still missing something. Those pictures are hard coded into front-page.php file.

Here is the link: http://codepen.io/anon/pen/NqGprx

I did my best to extract all parts from my style.css which concern those 4 images,but…

Just in case I’ve uploaded my style.css file here:

https://jumpshare.com/v/WOI6f6Q0P3Dy8ckjRgTZ

Thank you!

[Author]

Posts