Jump to content
Sign in to follow this  
Durraiz

Overflowed content acting as real content on Mobile Platform

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

Share this post


Link to post
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

Share this post


Link to post
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>

Share this post


Link to post
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

Share this post


Link to post
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>

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...