Good day Guys,
Thanks for always rendering me support always.
There is a website I redesigned for a client, the site is www.numeris-ag.com
The challenges I have are just 2. The AD Centre on the homepage, the client wants me to make it a pop-up gallery so that whenever you click the First Bank and Glo Logos, an Image Gallery Pops up for each and the GT Bank and GMSI Logo flips to open up an image when you hover your mouse on it.

Two, the screen appears perfectly on my Laptop 17" and my PC 21" but on Notebooks, the screen is too wide so you have to navigate horizontally which my client is not happy about.

So I introduced a Body Div of width:90% but all pages (Index and inner pages) are scrambled on the Notebook. Below is the result I get using IE and Firefox.

Pls help me.

If I got your question very well, you want a situation whereby if you open your website on ipad, iphone and other devices with small screen resolution, it wil display perfectly without having a horizontal scroll bar.

If this is what you want, you can either use javascript to achieve it or you use css3 @media query.
the later is better, because javascript may be disabled in some devices.

To achieve this, you have to markup @media query at the bottom of your stylesheet document.

You will do this for:
iPhone: 320px down.
Ipad: 480px (portrait).
Ipad: 740px (landscape).
Desktop and laptop with small screen: 740px-959px.
Then you do for 960px to 1200px for normal screens.
Then 1201px to 1800px for larger screens.

You can google about css @media query and read how to achieve this.

Good luck.

For pop up, maybe you use jquery's lightbox, or something similar.

For the alignment issues, I just checked in firefox and IE7 and IE8 and I see no horizontal scrolling et al. I have a 21 inch screen btw and my screen resolution is 1600x900. When I brought it down to 1024x768, I still couldn't see your issues. Did you perhaps fix them b/w the time of your post and now?

Good luck!

Thank you sir,

I will google it out now...

GraphicsPlus: If I got your question very well, you want a situation whereby if you open your website on ipad, iphone and other devices with small screen resolution, it wil display perfectly without having a horizontal scroll bar.

If this is what you want, you can either use javascript to achieve it or you use css3 @media query.
the later is better, because javascript may be disabled in some devices.

To achieve this, you have to markup @media query at the bottom of your stylesheet document.

You will do this for:
iPhone: 320px down.
Ipad: 480px (portrait).
Ipad: 740px (landscape).
Desktop and laptop with small screen: 740px-959px.
Then you do for 960px to 1200px for normal screens.
Then 1201px to 1800px for larger screens.

You can google about css @media query and read how to achieve this.

Good luck.

Hello,

I tried using Fancy Box, but the result isn't impressive as the click on the first or second logo open ups gallery of the first and second logo.

As for the screen resolution, its still the same on the small laptop and other devices.

Thank you...

yawa-ti-de:
For pop up, maybe you use jquery's lightbox, or something similar.

For the alignment issues, I just checked in firefox and IE7 and IE8 and I see no horizontal scrolling et al. I have a 21 inch screen btw and my screen resolution is 1600x900. When I brought it down to 1024x768, I still couldn't see your issues. Did you perhaps fix them b/w the time of your post and now?

Good luck!

3 words - Responsive Web Design.

I don't understand sir...

adeniyi83: 3 words - Responsive Web Design.

bosun.ng:
I don't understand sir...

In order to make the website to fit perfectly in every screen resolution, you have to use @media query to do that.
I just did something, which u can look at. Your website currently has 5 rows, so i just developed a 5 row website for with @media query.
You can just add ur contents inside each container.
Even if you re-size ur browser window to the smallest resolution, horizontal scroll bar will never appear.
If you use a phone with just 240px screen to views it, it will appear perfectly without scrolling left and right.
It appears perfectly on iphone and ipad.

Download the attached file, unzip and look at the css @media query codes. u can play around with it.

Take care.

Again, u will need to add this:<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
to your html head.

Ok sir... Let me try this, I will get back at you.

GraphicsPlus:

In order to make the website to fit perfectly in every screen resolution, you have to use @media query to do that.
I just did something, which u can look at. Your website currently has 5 rows, so i just developed a 5 row website for with @media query.
You can just add ur contents inside each container.
Even if you re-size ur browser window to the smallest resolution, horizontal scroll bar will never appear.
If you use a phone with just 240px screen to views it, it will appear perfectly without scrolling left and right.
It appears perfectly on iphone and ipad.

Download the attached file, unzip and look at the css @media query codes. u can play around with it.

Take care.

I am veiweing the website on a mini PC atm, i am not seeing any bug

Hey man, be careful, this is a common client/customer issue that should be handled with experience. What your client is asking is called "a mobile version of the website". OK!!! Now that's something extra. Don't do it without charging him/her for it. Not all clients want a mobile design for a website, cause not all websites need one. iPhone/iPad ovvero mobile websites are designed with different resolutions - that's obvious. Google for them. Create a sub-domain, something like http://www.mobile.numeris-ag.com and drop your mobile-web in there, but remember this is something extra.

bosun.ng:
Ok sir... Let me try this, I will get back at you.

Hello sir,

I tried what you said and the scripts you sent over.

You can view the website now and tell me if it works perfectly. www.numeris-ag.com

Thank you.

bosun.ng:


Hello sir,

I tried what you said and the scripts you sent over.

You can view the website now and tell me if it works perfectly. www.numeris-ag.com

Thank you.

It's not yet responsive.
Download the attached file and see what I did.
You can just edit the anchors and add alt texts to the images, and you are good to go.
If you need further assistance, let us know.

There one or two things you need to know about image optimization.
Not every image should be saved as .png.

Take care.