Website Auto Adjust For Screen Resolution

[jer_s]

Hi

I am modifying a theme called Lexxx Club bought online , i am organising an event in clubs and it should be optimized for everybody to see browsers and screen sizes ( http://www.smashed.co.il )

I have a difficulties with the appearance of my web site i have a a full hd screen on my main computer and it turn outs perfect while going on my 13inch laptop it has a scroll down and it's all messed. But when i zoom out it turns out how it should be , but i wont ask my visitors to zoom out I read previously articles about changing the template.css but got confused with width and messed it all up so recovered from my back up
I can put here bellow my template.css but it is very long so i won't spam if not requested but attached a zip file with template.css it if it may help


Please let me know what to do it , any help will be very appreciated

Thank you again!

Jeremy Spitz
http://www.smashed.co.il

[tsablic]

hey wlrdq , can yo check out my website www.tomislav.sablic.from.hr im having some issues with page resolution because i have 23" display and it seems perfect to me, but on smaller screens it turns out very badly...

[wlrdq]

When I go to the following URL, I get could not be found:
http://www.tomislav.sablic.from.hr/

I can't find any DNS info for that domain, either:
http://www.dnsstuff.com/tools/ipall/?to ... ic.from.hr

Did you mistype something?

[tsablic]

yeah, im sorry :S
its www.tomislav-sablic.from.hr

[wlrdq]

I see a few things I would change about the way this is working.

Do you want to describe how you would like to have it work by telling me what you don't like now or would you like me to just suggest what I would do?

[tsablic]

i would like you to suggest whats wrong, if you want ill send a template to you, but please show me what have you changed. And , thank you very much !

Greetings from Croatia

[wlrdq]

I believe the main issues you are having are only with the header and footer. I'm attaching some screenshots I took in Firefox to show what is going on. I will play with your styles using Firebug (if you don't have it...I highly suggest getting it) and let you know what I suggest.

www.tomislav-sablic.from.hr-head1.png

www.tomislav-sablic.from.hr-foot1.png

[wlrdq]

And here it is with the browser even thinner and scrolling over to the right.

www.tomislav-sablic.from.hr-head2.png

www.tomislav-sablic.from.hr-foot2.png

[tsablic]

ok, thanks , im waiting for your code suggestion

[wlrdq]

Logo
I would crop the LOGO.png image file down to just the logo (http://www.tomislav-sablic.from.hr/temp ... s/LOGO.png). Right now there is a lot of white padding around it and there is a negative left percent style that is causing the logo to move off the left of the screen when the browser isn't wide enough:

Code: Select all

div.header-jpeg {
    background-image: url("../images/header.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    height: 200px;
    left: -50%;
    position: absolute;
    top: 0;
    width: 1920px;

code image
I would crop this as well (http://www.tomislav-sablic.from.hr/temp ... sample.png). You should be able to use align right or similar styles to get it to stay on the right side of the browser.

Code: Select all

#logotip {
    margin-left: 700px;
    position: relative;
}

Overall header
I would set a minimum width on the header to make sure the browser can't crush the content to the point where the logo and code images overlap. This will also help make sure your content doesn't get squished when the browser width is shrunk.

Footer Image
Don't use margin-left for this. You should be able to get the image to center using align or something. Let me know if you can't figure out what to use:

Code: Select all

#support-logo {
    margin-left: 500px;
    margin-top: 0;
    position: relative;
    width: 100%;
}

Footer text
I think you are missing a clear: both after the footer-center div that has a float: right:

Code: Select all

.footer-center {
    float: right;
    position: relative;
    right: 50%;
}

Hope this helps. If you run into issues, let me know.

[Crispuchita]

Dear wlrdq,

Would you be so kind to help me?? I made a background 1600x1200px
and I've searching everywhere for the solution of my problem, I would like to have a background that fits in every screen but I don't have a clue how to do that...

Here is the link to my site: http://driemeubelambachten.com/joomla/

If you can help me i will be much obliged

Thanks and kisses,

Cristina

[wlrdq]

Cristina,

I don't see issues when I shrink your website's width. Is the issue when it gets larger? Unfortunately, my laptop doesn't get very large, so I will need to come up with another way to test it if that is the issue.

Let me know.

[Crispuchita]

Hi wlrdq,

well the clue is that i'm making my website in a laptop with a 17' screen but when i look in a comuter laptop with 15' screen i miss from the left as from the right a piece of my background. So i think that i need to make the all site resizable ....
Do you have any suggestions what should i do about it??

Thanks,

Cristina

[wlrdq]

It looks like you have this image in your header that is 2000px wide:
http://driemeubelambachten.com/joomla/t ... tainer.jpg

And this in the background that is 1600px wide:
http://driemeubelambachten.com/joomla/t ... d-drie.png

How would you like the site to respond when the user shrinks the browser width? You have a few options:

Right now on my browser, it squeezes that background of to the left (keeping it centered) but keeps the content from being smaller than 960px (which is set in a few different style classes). This is actually the way I would expect it to respond. It maximizes the actual content presented to the user at all widths.

Would you want the user to be presented with a scrollbar at the bottom of the browser when they go below 1600px in width? This is possible as well, but doesn't take advantage of the space available to the user very well. Anyone on a small monitor will need to scroll to the right to see actual content and not the background image.

Let me know what you are thinking.

[kaleske]

Hello i made web page with joomla and because i`m new i didn`t know about resoliutions. So i made page for big resoliution. Can you help me to make it smaller that other with smaller devices resoliution could take look at it witout any mess, my webpage is www.petromobilis.lt. Sorry if i`m speaking bad english.

[richardbooker]

first i had a static image that didn't adjust to screen width, but now it workss great on joomla thx. 100%; Width

[wlrdq]

@kaleske - Would you mind starting a new post and PM or emailing me a link to it and I can help you there? This one is going in too many directions and it makes it harder to follow. If we can break each issue up into a different thread, it makes it easier.

Thanks,
Will

[Crispuchita]

@wlrdq i send you an email to because otherwise we won't be able to see any more what and who is here

[dazunJ]

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.

please help me on this
same problem
this is the site
http://channelfuntv.com

can't identified the problem

[Daneko]

Hi can i get help to midify my site so the resulution works on on digrent sieze
www. sjalsljus.se

[wlrdq]

I just went to your site and it seems to work if I minimize the width of my browser. What is it doing that you do not like?

[andranos]

Can you take a look at mine?
http://dsslab.infotech.monash.edu:8080/ssman7/ala/
When you zoom in, some of the images and text will overlap to each other and when you zoom out, the background images become smaller as well

Thanks

[wlrdq]

@andranos - I would use a min-width style to make sure the content doesn't get squished when the browser is to small (zoom in):

Screen Shot 2012-07-02 at 9.50.21 AM.png

When the browser is too large (zoom out), do you just mean that the background image doesn't stretch? Would you actually want it to stretch with the width? That would mean when you zoom in that it would be very thin.

Hope this helps,
Will

[tappy52dog]

Hi, instead of a min-width:1160px; is there a "max" width css command available? I tried max-width:1160px; however it didn't do anything.