Abnormal look on lower resolution display

Jakal

Hello,

Do you have any idea why my site (http://www.gabriel-jakab.com/) looks different on smaller displays? On my 27" it looks the same in every browser, but when i tried it on 15.6" and 12.5" laptops the left side menu bar appears disproportionated (as you can see in the attachement), although the main body, with the photos, looks ok. Thanks!

Allen

Check and make sure the browser is set to 100% zoom.

leftquark

Hi Jakal, I took a look in CHrome and it looks like everything is fine, even at smaller resolutions. In the screenshot you posted I don't quite see the disproportioned left -- perhaps I'm missing something?

Jakal

leftquark wrote: »

Hi Jakal, I took a look in CHrome and it looks like everything is fine, even at smaller resolutions. In the screenshot you posted I don't quite see the disproportioned left -- perhaps I'm missing something?

Hello,

Thanks for the reply. I forgot to mention that on my 27" display, the social media buttons are visible in the homepage, without needing to scroll down. So that's my problem: on different displays, the site looks different

Jakal

Allen wrote: »

Check and make sure the browser is set to 100% zoom.

That was the first thing I checked, but it's something else Thanks anyway

Jakal

This is how it looks on my 27"" display. As you can see, the social media icons are visible and you don't need to scroll down to see them

leftquark

It looks like your 15.6" and 12" laptop screens are at a smaller resolution, which would explain why the menu bars appear larger and need to scroll. Everything on your site appears to be functioning as expected.

Jakal

leftquark wrote: »

It looks like your 15.6" and 12" laptop screens are at a smaller resolution, which would explain why the menu bars appear larger and need to scroll. Everything on your site appears to be functioning as expected.

I suspected that, but do you know if there is any solution to fix this? Some kind of CSS or Html code to optimize it for different resolutions? Thanks

leftquark

Typically, we can write some CSS that will change things when the width of the screen isn't as large (for example, a mobile screen vs a desktop screen), but resolution is a bit different, since that very low resolution small laptops have to blow up the size due to the smaller pixels. I don't know of any code that works on resolution - they all use width. Your page loads find at any width, it's just that those monitors with low density pixels display them larger/poorer. Perhaps someone else can chime in

annnna8888

You could make the top margin in the logo content block and the social icons content block smaller; right now they are 110 and 180 pixels respectively, pushing the content blocks down.

Ana
SmugMug Support Hero