Resolved site look different on different computers

[svabodesign 0]

Apparently my clients website look different on her computer and macbook pro than it does do my macbook pro. We both use google chrome. She lives in the US though while I live in Norway. Can distance change the look of a site too? The differences is the space under the background image.

I logo and navbar is nothing to worry about because I changed it after she took a screen photo of her site. For her the space under the image is huge, and is affecting how the site is suppose to look. While for me the space is not that much at all.

How do you guys see the site?

http://www.sailubju.com/

Is it possible to do so it look the same on all devices? at least pc and mac.

On the pictures I attached, version 1 is my client and version 2 is how it looks for me. She want it more like my version, less space under the image. What do I need to do so the site look the same for everyone?

[Simon 248]

maybe you have different screen sizes?

[svabodesign 0]

yes I checked the site on my friends computers, and the site do look different on different screen sizes. The bigger screen the bigger space under the image. Is it possible to change so the site look the same on any screen?

[Danny+ 1,327]

Hi,

The issue is that you have this in your custom CSS:

.simplenav {

margin: 125px;

padding: 20px 0;

text-align: center;

}

[/CODE]


The Margin is causing the issue, I recommend you try and position your simply nav menu in a different way. Try removing the margin and see if that resolves your issue.

[svabodesign 0]

I removed the margin and it looks good at least on my screen. Don't have any chance to check on other screens at the moment .But the navbar position moved a little bit too much up. Is it possible to change the navbar position without using margin?

[Rob 547]

Several things:

First, when scaled, the logo remains static, and non responsive, causing the logo to move from one bit to another.

Next, it's clear that the branding doesn't show, nor does the menu at the bottom (literally) against the color background image.

You can see the two images shown in full scale (100%) view.

It's almost impossible to view the branding or menu.

The last image is at 60%, but you'll see how the branding slides to the left. That's caused by incorrect CSS.

[svabodesign 0]

Where do I start so the site will at least look a little bit more alike on different screens? Most important is the logo and navbar position. The logo is suppose to be over the image and the navbar is suppose to be on the bottom of the image on the blurry part

[Rob 547]

I think you need to start with basics of the PageLines Framework.

There seems to be lots of customization but not all of it's working. How did you set this up to begin with?

[svabodesign 0]

The home page contain of 4 elements. The background color. The background image. The logo and the navbar. On PageLines Framework I set the bg image on page settings for home. the image is set on do not repeat. 100% vertical, 50% horizontal and scroll.

For the background color it is just suppose to be on that page. So I customized it at the css custom code.

.page-id-13 {

background-color: #01293D;

I also customized the logo and simple nav position using custom code. I'm having a hard time to position the logo and the simple nav

[catrina 103]

I think the best way to implement your navigation would be to put it inside a Content Box section (available from the PageLines Store) and use CSS to position it. However, the position may still vary from browser to browser.

[svabodesign 0]

Ah okey, like the logo in one Content box and the image in another content box? Right now it's not the different browsers that are the problem, the site just look different on different screens. But I might try your idea

[Jenny 33]

Yeah by separating it into different sections, you'll be able to get it more uniform.

If you consider this topic resolved, please let us know - thanks!

[svabodesign 0]

Yes topic is resolved. Thanks

[Rob 547]

The topic was marked as resolved.