Website Auto Adjust For Screen Resolution

[scadooshbag]

What is the easiest way to have web pages automatically adjust per the users screen resolution?

[wlrdq]

The rhuk_milkyway template uses a mix/max width and auto left and right margins to get the template to resize dynamically with the browser (or screen resolution).

Let me know if you need help doing this.

[glopez]

i need help with the auto adjust in the ja_purity template, see when i get to my site in a different resolution or change the explorer size my images go everywhere if you can help ill apreciate it

[wlrdq]

Can you post a link to the site?

[glopez]

www.sistema-5.com
its in spanish tnx

[wlrdq]

I would modify this file:
http://www.sistema-5.com/templates/ja_p ... /style.css

It will be found here in your Joomla directory:
.../templates/ja_purity/styles/background/lighter/style.css

And add the following to the #ja-container style:

Code: Select all

min-width:1160px;

So it will look something like this:

Code: Select all

#ja-container {
	background: url(images/c-bg1.gif) repeat-y 18% 0;
	min-width:1160px;
}

Let me know if that works. You can play around with the width to get it to look right on all pages.

[glopez]

hi man it worked tnx alot it was really helpful

[wlrdq]

No problem. Glad I could help.

[Sloger]

Can you post a link to the site?

Hello wlrdq,

Could you please have a look at mine too:
www.topsite10.com

I have a similar problem. The template is build for 1200px resolution, therefore it does not center on 980px monitor. How can I make it to be centered on both monitors.

Thank you...

[wlrdq]

The width of your flash object is 978px. Unless you want to make it smaller or resize it, I don't think you can get your page to be 900px wide.

Let me know if you want to investigate other options.

[Sloger]

The width of your flash object is 978px. Unless you want to make it smaller or resize it, I don't think you can get your page to be 900px wide.

Let me know if you want to investigate other options.

Thank you for your reply!

I want my page to be as is. But I don't need the wide spaces of background on both sides of the flash. If I could get read of the space on the left side, the page could center on 980px monitor?

I have managed to do so by placing the following code to the template.css :
#outer {width:980px; margin:auto; margin-left:-8%;}
It does the job for 980px monitor, but on the 1200px monitor, the site sticks to the left side of the screen (looks ugly!) so I commented this code...
I could do the same by modifying the other part of the same CSS:
.header-wrapper{width:1200px; /*background:url(../images/header_wrapper.jpg) 0 0 no-repeat;*/ height:100%; margin-left:-8%;}
But it does the same, and when I modify the width to 980px the whole page starts to look messy!?

So I don't really know what could be a solution?
Thank you very much for your consideration...

[wlrdq]

Take a look at some of your padding values:

Code: Select all

.header-flash {
height:279px;
padding:0 0 0 109px;
}

I think rather than having padding on the left, you want to change your template to have your main content div center in the browser. That way, no matter what width the user has, it will either be completely against the left side or center. The template on our CMS Market site does this if you want an example of a site that does it. I think a lot of templates these days try to do this.



If you aren't using Firebug for Firefox, it makes inspecting and modifying styles on the fly very easy. Let me know if you want help using it.

[Sloger]

Take a look at some of your padding values:

Code: Select all

.header-flash {
height:279px;
padding:0 0 0 109px;
}

I think rather than having padding on the left, you want to change your template to have your main content div center in the browser. That way, no matter what width the user has, it will either be completely against the left side or center. The template on our CMS Market site does this if you want an example of a site that does it. I think a lot of templates these days try to do this...

That's what I want to do! I want the all the content to be "div" centered in the browser.
Could you please be more specific of what I have to add to the code after I clean all the left padding.
I like how your CMS Market site looks on both 980px and 1200px monitors. I want the same!
Your site looks great. Even the header follows the width of the monitor. But I don't have a header like that. My site is simplier. I only need all the content to be centered. Thats all.
I would really appreciate if you could give me some tips of how I have to modify my HTML and what has to be added (or modified) in CSS.

Thanks a lot!

[Sloger]

I have started to change it, but there are some elements that I can not locate in the code!

You mentioned Firebug for Firefox. Does it help with that?

Thank you

[wlrdq]

Firebug for Firefox is the best tool you will ever use. Other browsers have similar Inspect capabilities, but I like Firebug's the best.

Once you have it installed, you can just right click on your page and do Inspect Element and it will show you the HTML for the element along with the associated styles. You can also change things on the fly to do style testing without reloading your page over and over. It's amazing!

Once you get it installed, let me know and I will have a look at your page and suggest changes to get everything centering.

[wlrdq]

I just took a look at your site and it seems like it's centering correctly now. If you still need anything, let me know.

I still highly suggest getting Firebug! You will wonder how you ever lived without it

[Sloger]

I just took a look at your site and it seems like it's centering correctly now. If you still need anything, let me know.

I still highly suggest getting Firebug! You will wonder how you ever lived without it

Yes I have centered everything last night... using Firebug! Thank you so much for the advise, specially for the left padding!!
And Firebug is exellent for locating elements in the code!
I tried to get an answer for my problem on 2 Forums and 1 customer support, where I got the template. You are the only person who knew!

Respect!

[wlrdq]

Glad to help. If you ever need anything again, either hit up our forums or PM me a link to your post on the Joomla! forums and I will try to help.

Happy Joomla-ing!

[Sloger]

Thanks,
May the Joomla be with you...))

[ipo_elena]

Hello wlrdq,

Could you please have a look at mine too:
http://www.obs-vlfr.fr/cyber/GEOTRACES/

The problem I have is that the column on the right moves over the central column (so the central content cannot be fully read) for some monitors, small one's. Do you know how I can modify my css in order that the site adjust to all screens, this is the column on the right is fixed and looks the same in all monitors?
Thank you very much!

[wlrdq]

I would use the min-width property:
http://www.w3schools.com/css/pr_dim_min-width.asp

It will cause the browser to have a horizontal scrollbar if the user's screen isn't wide enough, but I don't think you have a good alternative if your content has to fit.

[ipo_elena]

thank you!

[ipo_elena]

Hello again wlrdq,

Would you mind to have a look on my site again? Now I have the scrollbar but the right columns still goes over the central column when the window (in any monitor) is minimized/reduced. Any idea of what can I do?
Thank you very much!!!!!

[wlrdq]

I'm not sure where you used min-width, but I would use it on the left, middle, and right column divs. Find out what the minimum width in pixels would be where the content is still displayed correctly for each column and set the min-width property for that column to that value.

[themc]

This is so close but not enough info. I am having the same problem. each time I enlarge the screen the site goes all over the place. I am using the rhuk_milkyway template.

"The rhuk_milkyway template uses a mix/max width and auto left and right margins to get the template to resize dynamically with the browser (or screen resolution)." but gave no answer to how to make site do just that or where this is located.

look at my site: www.theworldslargestrapcontest.com
Thanks a million

[wlrdq]

What issue are you trying to address?

Do you want to fix things from overlapping outside of the columns (it looks like only warnings are doing this, so you could just turn off display_error)?
or
Do you want to make your content expand wider than 800px?

It looks like your template is based off of rhuk_solarflare_ii. Is that correct?

[themc]

Man that was fast.... Very fast. Well I have 2 problems 1 is the error massages that you see and the resolution sizing is for only one size. The error masage thing is turn off unless you are talking about a different one I don't know off.

So I need help with both.

[wlrdq]

Try changing Error Reporting to Simple in Global Configuration on the Server tab. I've noticed that None will still show warnings sometimes. If that doesn't work, you may have to set display_errors to off in your php.ini file.

As for the width, it looks like it is hard coded on a few elements in your css. Try removing these settings or increasing the values and see if that works.

Screen shot 2010-06-12 at 7.06.13 PM.jpg

Let me know how it goes.

[themc]

CSS???? Where are the files located? Like in the template/ what???

[themc]

I had the error code set to simple at first. After 3 days of reading post, I found on the said set to none. This did not work as you can see. But getting into the php.ini file on the server is out of the question. Any other answer to the code notice?