Website looks different on bigger screen

13 years ago

One reason is your #wrap div is closed to soon.
There are most likely other issues also, that was the first element that I noticed.

I see there is an unclosed table by the footer also.

Is this suppose to be a fixed width, centered site?

Thanks
1 reply

{{ DiscussionBoard.errors[2818470].message }}

Commissioner 13 years ago

Ok i have removed the side bar and fixed things up a little bit. let me know if the slideshow and everything else seems to be in place. I am working on a small computer so can't see what i looks like on a larger one right now. Here are the updates
- Thanks
{{ DiscussionBoard.errors[2818733].message }}

we_got_tops

13 years ago

Pretty much what phpbbxpert said.

I think the slideshow and everything looks fine. What was different on the larger screen? In some of my sites I've had problems with centering across different screen resolutions, but there are some easy fixes for that.

And what are you using to design this site? That might matter depending on what you want to change.

Thanks

Signature

Social Web Q and A -- Teaching you all about the ever-evolving web

Bowling Tips for better bowling

{{ DiscussionBoard.errors[2818993].message }}

phpbbxpert

13 years ago

How do you want everything positioned?
Do you want it all centered or all float left?
Your main Salsa image is part of the body background, so that is fixing it to the left which leaves and odd large gap between it and the content on large monitors.

It's kind of leaving things scattered all over.

Thanks

{{ DiscussionBoard.errors[2819268].message }}

devbrook

13 years ago

Always use the width tag in css/html.

Because the alignment changes as the screen size increases.

You can always opt to design centrally and use standard screen size as wrapper size.

Thanks
1 reply

{{ DiscussionBoard.errors[2819307].message }}

Hannu

13 years ago

I attached screenshots from a website which have same kind of problem, but I'm stupid enough not to understand what should be done. Could anyone advice as simply as possible what need to be done?
Thanks,
Hannu

Thanks
1 reply

{{ DiscussionBoard.errors[4398700].message }}

HartechSoftworks

13 years ago

Originally Posted by Hannu

I attached screenshots from a website which have same kind of problem, but I'm stupid enough not to understand what should be done. Could anyone advice as simply as possible what need to be done?
Thanks,
Hannu

its a bit hard to tell from your screenshot but it all boils down to two things

whether the site is using a fixed width or fluid width

with a fixed width, lets say 800px, the site will look different when viewed on different screen resolutions.

with a fluid width, let's say 80% of the screen, the site should look about the same (just wider, on larger resolutions)

Thanks
1 reply

{{ DiscussionBoard.errors[4399204].message }}

Hannu

13 years ago

Thx for answer Hartech. I attached the source, does it help?

Thanks
2 replies

{{ DiscussionBoard.errors[4399397].message }}

HartechSoftworks 13 years ago

Originally Posted by Hannu

Thx for answer Hartech. I attached the source, does it help?

The URL of the site would be much better, I can analyze it with my toolkit
- Thanks
{{ DiscussionBoard.errors[4400418].message }}

HartechSoftworks

13 years ago

Originally Posted by Hannu

Thx for answer Hartech. I attached the source, does it help?

Hi Hannu,

Thanks for the PM, I am unable to reply back to you as my post count is under 50.

Yup it looks like your site is fluid. The <table width="100%" ...> is the controlling factor here.

However your content is overflowing, see the red highlights in the image below:
Download: LaulutunnitLaulutunteja_-_Laulunopetus_Ilona_Rasa-_Ota_Laulunopetusta_ja_Laulaminen_sujuu_1312515798 568.png | xup.in

Thanks
1 reply

{{ DiscussionBoard.errors[4404868].message }}

Hannu

13 years ago

Hi Hartech,

Thanks for reply. Yes, it is overflowing, but I don't know why it is happening with a big screen. With a small screen it doesn't happen.
You see, I took these screenshots at the same time:
The overflowing one with my office computer having 23inch screen, and the other one with my 15,6 inch laptop(screen 16:9).
If I open the website with a "traditional" laptop(4:3) the website is just perfect(website is made by that one)

I'm sorry but did I lose here something:"<table width="100%" ...> is the controlling factor here. "

Should I change that or...?

Thanks,
Hannu

Thanks
1 reply

{{ DiscussionBoard.errors[4417420].message }}

HartechSoftworks

13 years ago

Originally Posted by Hannu

Hi Hartech,

Thanks for reply. Yes, it is overflowing, but I don't know why it is happening with a big screen. With a small screen it doesn't happen.
You see, I took these screenshots at the same time:
The overflowing one with my office computer having 23inch screen, and the other one with my 15,6 inch laptop(screen 16:9).
If I open the website with a "traditional" laptop(4:3) the website is just perfect(website is made by that one)

I'm sorry but did I lose here something:"<table width="100%" ...> is the controlling factor here. "

Should I change that or...?

Thanks,
Hannu

A quick fix to that problem, look for the line

Code:

<img src="menubottom.jpg" width="194" height="28" border="0" alt=""><BR><BR><BR><BR><BR></td>

        <td width="100%">
            <table width="100%" cellpadding="10" cellspacing="0" border="0">

and replace with

Code:

<img src="menubottom.jpg" width="194" height="28" border="0" alt=""><BR><BR><BR><BR><BR></td>

        <td width="100%">
            <table width="80%" cellpadding="10" cellspacing="0" border="0">

will fix the problem, do note that you will have to do this across all .html files.

Hope that helps.

[ 1 ] Thanks

{{ DiscussionBoard.errors[4417788].message }}

leppozdrav

13 years ago

I always handled this issue by creating multiple CSS files, one designed for each of the most popular screen resolutions. I would then use PHP to determine which screen resolution the visitor was using, and would implement the appropriate CSS file for that visitor.

Thanks
1 reply

Signature

www.seorockstars.net

{{ DiscussionBoard.errors[4411395].message }}

Hannu 13 years ago

leppozdrav, thanks but too techie for me...
- Thanks
{{ DiscussionBoard.errors[4417424].message }}

Hannu

13 years ago

Thanks, Hartech

Thanks

{{ DiscussionBoard.errors[4417853].message }}

Website looks different on bigger screen

Trending Topics

Fixing a massive traffic drop after rebranding

Meta AI now has Google Search results

Looking at the average screen time and socmed usage

What's the Best IM-Related Skill to Learn Today That Can Help in the Future?

Would You Go?