Jump to content

Overflowed content acting as real content on Mobile Platform


Durraiz

Recommended Posts

Hello everyone i made this site for a client and im using a new standard to create the site so there are some issues with itThe one i wanted to address was that i created the banner content for the home page (and smaller banners for other pages) to be 2000px in length in order to have a clearer feel on larger screensthis works for every computer and mac screen however when you switch to the phone or any tablet, the tablet browser registers it as content and scales the page in a very odd fashionI have attached both screenshots so you can see the problem but the address is: mrmartusa.comMy goal is to make it appear centered on mobile platforms just as it is on PCthe way i get it to stay this way is through the following CSS code: (page banner then home banner respectively) It's not the width because the home page has a width of 970 while the other one has 2000 yet they are both having that problem.bannerimage{position:absolute;left:0px;width:2000px;z-index:-1;}.home_banner{width:970px;margin:0px 5px 5px 5px;padding:0px 5px 5px 5px;float:left;height:400px;z-index:-1;}Thank you everyone very much for your help in advance!PC:

PC_SS_1.jpg

 

PHONE:

PHONE_SS_1.png

Link to comment
Share on other sites

Don't use float: left if you want it centered.

To center blocks, set margin: 0 auto

 

Perhaps the banner image should actually be a centered background image so that you can avoid using position: absolute.

Edited by Ingolme
Link to comment
Share on other sites

Could you create a simplified version of the problem? How many divs is this? It looks like...

<body><div id="nav"><div id="menu"></div></div><div id="banner"></div><div id="content"></div></body></html>
Link to comment
Share on other sites

I've been thinking of a way to describe it in a simplified way but am having little luck

the only thing i can do is resize the images for the banner but then i lose the look i am going for

I want it to center on mobile platforms like it does on PC but instead it shifts to the left

 

It goes <container> <content> <home_banner> <EDGE-11911357> the home banner

Link to comment
Share on other sites

All I see is that you want the navigation buttons to be centered and you want the content area below the banner image to be centered.

<!DOCTYPE html><html><head><meta charset="utf-8"><title>t</title><style>#nav{border:1px solid #999;background-color:#555;}#menu{border:1px solid #999;background-color:#444;width:600px;margin:0 auto;height:30px;}#banner{border:1px solid #999;height:300px;background-color:#aaf;}#content{border:1px solid #999;height:600px;width:800px;margin:0 auto;background-color:#ccf;}</style></head><body><div id="nav"><div id="menu"></div></div><div id="banner"></div><div id="content"></div></body></html>
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...