What to I need to do?

mjs

I have my new site almost ready to go live and then I checked it out on my iPad. Simply put it sucks. The new site is too big for the iPad screen so all is out of whack. I have scoured this forum, more than once, and found one site that said to use this code: /* FOR TABLETS AND SMALL MONITORS) */
@media only screen and (min-width: 641px) and (max-width: 800px) {
SOME_DEFINITIONS
}

I used it and it changed nothing for me. While most of the posts hit on some iPad issues I can't find exactly what I need. Any and all help will be appreciated. Thx

ChancyRat

I don't have an ipad and have not been following the issues with it, but check this thread to see if this is what's up for you:
http://dgrin.com/showthread.php?t=229229.

denisegoldberg

mjs wrote: »

I have my new site almost ready to go live and then I checked it out on my iPad. Simply put it sucks. The new site is too big for the iPad screen so all is out of whack.

It's pretty difficult to help without seeing your site.
I'm just guessing here - is the problem with your menu? If it is, there is a collapse for mobile setting on the Basic tab of menu content elements. You might want to try with collapse for mobile set to on.

Is it just the ipad where you are seeing issues or are there problems with other small devices? You might want to check it on this tool - http://quirktools.com/screenfly/.

--- Denise

denisegoldberg

ChancyRat wrote: »

I don't have an ipad and have not been following the issues with it, but check this thread to see if this is what's up for you:
http://dgrin.com/showthread.php?t=229229.

I suspect the OP is asking about viewing his site in a browser on an ipad as opposed to using the ipad app.

--- Denise

pilotdave

mjs wrote: »

I have my new site almost ready to go live and then I checked it out on my iPad. Simply put it sucks. The new site is too big for the iPad screen so all is out of whack. I have scoured this forum, more than once, and found one site that said to use this code: /* FOR TABLETS AND SMALL MONITORS) */
@media only screen and (min-width: 641px) and (max-width: 800px) {
SOME_DEFINITIONS
}

I used it and it changed nothing for me. While most of the posts hit on some iPad issues I can't find exactly what I need. Any and all help will be appreciated. Thx

You have to replace "SOME_DEFINITIONS" with specific CSS code you want to apply on smaller screens. This isn't a quick and easy fix. You could use it to resize or move things, hide elements, change fonts, etc. But you'd have to identify exactly what you want to change and figure out the code to do it.

Dave

Hikin' Mike

mjs wrote: »

I have my new site almost ready to go live and then I checked it out on my iPad. Simply put it sucks. The new site is too big for the iPad screen so all is out of whack. I have scoured this forum, more than once, and found one site that said to use this code: /* FOR TABLETS AND SMALL MONITORS) */
@media only screen and (min-width: 641px) and (max-width: 800px) {
SOME_DEFINITIONS
}

I used it and it changed nothing for me. While most of the posts hit on some iPad issues I can't find exactly what I need. Any and all help will be appreciated. Thx

That isn't code. Like Dave said, you need to specify, via code, what you need to re-size.

FWIW, I don't own a iPad, or for that matter a cell phone, so I can't check it.

AceCo55

Hikin' Mike wrote: »

That isn't code. Like Dave said, you need to specify, via code, what you need to re-size.

FWIW, I don't own a iPad, or for that matter a cell phone, so I can't check it.

Whoo hoo!! Way to go Mike! I have a cell phone ... I just don't use it!!!

Sorry ... please return to your normal thread.

mjs

denisegoldberg wrote: »

I suspect the OP is asking about viewing his site in a browser on an ipad as opposed to using the ipad app.

--- Denise

First, thanks to those who replied. Chancy the link you provided was for the app as where my issues are exactly what Denise stated, viewing my site in a browser on the iPad. Except for the menu my iPhone is displaying correct and thanks to Denise I can now fix that..

I have attached some pictures which shows how the info on the website doesn't fit the iPad screen.

Apparently the images were too big. Basically the website appears too big for the iPad screen. And I can honestly say I'm at the end of my rope. If anybody can help it will be appreciated.

Hikin' Mike

Looks like you're still using the old Smugmug. I could have tried to use Screenfly tool to view your site on different devices, but until you unveil your site, I personally can't help. Maybe somebody can help.

denisegoldberg

mjs wrote: »

Apparently the images were too big. Basically the website appears too big for the iPad screen. And I can honestly say I'm at the end of my rope. If anybody can help it will be appreciated.

Load your screen shots into an unlisted gallery on your smug site and use the landscape icon above to reference them.

See How to Embed an Image in Your Post.

Hopefully once we see the images we can make some suggestions.

--- Denise

mjs

denisegoldberg wrote: »

I suspect the OP is asking about viewing his site in a browser on an ipad as opposed to using the ipad app.

--- Denise

denisegoldberg wrote: »

Load your screen shots into an unlisted gallery on your smug site and use the landscape icon above to reference them.

See How to Embed an Image in Your Post.

Hopefully once we see the images we can make some suggestions.

--- Denise

Thank you so much for taking your time to help.

Here is a link to the unlisted gallery. http://www.msabatini.com/SmugPreview/Screen-Shots/35910290_xSLk2T#!i=3014550551&k=PNDVn6s

denisegoldberg

It looks like your site is not re-sizing based on the size of the device.

This may not be the answer, but do you have your site set to a fixed (and wide) width? If you do, does it make a difference if you set the layout to stretchy?

If that doesn't make a difference you'll need some CSS to resize the different pages for that media. That doesn't make sense that you would need to do that though.

You might consider changing the empty space above and below your logo and menu - that much empty space does not play well on small devices.

--- Denise

mjs

denisegoldberg wrote: »

It looks like your site is not re-sizing based on the size of the device.

This may not be the answer, but do you have your site set to a fixed (and wide) width? If you do, does it make a difference if you set the layout to stretchy?

If that doesn't make a difference you'll need some CSS to resize the different pages for that media. That doesn't make sense that you would need to do that though.

You might consider changing the empty space above and below your logo and menu - that much empty space does not play well on small devices.

--- Denise

Bingo! Changing those settings worked and it looks good on the iPad. Thank you very much. One more issue. SInce I changed the layout my nav bar is no longer centered. If you could point me to the area I need to correct it that would be great. Also I have a paypal button and the view cart button has shifted. Guessing it would be the same process to correct that as the nav bar. Also is there a way to move the nav bar below my title. Here is a link to show the nav bar and button. http://www.msabatini.com/SmugPreview/Screen-Shots/35910290_xSLk2T#!i=3015692059&k=bWHHTcN Thanks again.

I figured out the moving of the nav bar so all good there and it's centered. I can figure out the paypal button so need to delve into it. I'm sure others can use your help. Once again thanks much.

denisegoldberg

mjs wrote: »

Bingo! Changing those settings worked and it looks good on the iPad. Thank you very much. One more issue. SInce I changed the layout my nav bar is no longer centered. If you could point me to the area I need to correct it that would be great. Also I have a paypal button and the view cart button has shifted. Guessing it would be the same process to correct that as the nav bar. Also is there a way to move the nav bar below my title. Here is a link to show the nav bar and button. http://www.msabatini.com/SmugPreview/Screen-Shots/35910290_xSLk2T#!i=3015692059&k=bWHHTcN Thanks again.

I figured out the moving of the nav bar so all good there and it's centered. I can figure out the paypal button so need to delve into it. I'm sure others can use your help. Once again thanks much.

For centering the navbar, I suspect the content element was somehow reset to take the full width of the screen. Hopefully if you adjust the width you will then be able to place it properly.

I'm assuming that the navbar and logo elements are both on Entire Site. If that's the case you should be able to customize Entire Site and drag the menu under the logo.

--- Denise