Problems displaying on ipad

[James Amedeo]

Hi Bill,

The sliding images are either not showing or are not responsive to the ipad. Is there anyway to fix this? It appears on the following pages.

http://venierosnewyork.com/history/
http://venierosnewyork.com/cafe-2

Thanks,

James

[Bill Robbins]

James,

Mobile devices can react in a not such a good way with items that are fixed in place. You can try this to see if it will clear it up a bit:

1. Go to your theme options page and choose the Advanced tab.
2. Scroll down to the Custom CSS box and add this:

   
   @media only screen and (max-device-width: 1024px) {
   	
   	#home-one,
   	#home-two,
   	#home-three,
   	#home-four,
   	#home-five,
   	#home-six,
   	#home-seven,
   	#home-eight,
   	#home-nine,
   	#home-ten {
   		max-height: 100%;
   		background-attachment: scroll;
   	}
   	
   }
   

3. Update your settings.

Take care,
Bill

[James Amedeo]

Still isn’t working. I tried changing scroll to fixed but that didn’t work. Should I change everything in the text widgets to scroll and try again?

[James Amedeo]

How can I set it like the moonrise demo so all the content is fixed, but only on the table?

[Bill Robbins]

James,

I tried switching the fixed backgrounds to scroll in your source code and came up with this:

https://support.organizedthemes.com/ny.html

which seems to work well on my iPad mini. See how it works on yours.

Bill

[James Amedeo]

Thanks Bill, I’ll check as soon as I can.

How were you able to change the source code without logging in.

Also, is there a way to change the height of the main navigation bar?

Thanks,

James

[Bill Robbins]

Good question. I just copied the source code and added it as a static HTML document on our server. That way I could play with the code and see it on my iPad and also show it to you too.

You can change the height of the navigation bar. Here’s how:

1. Go to your theme options page and choose the Advanced tab.
2. Scroll down to the Custom CSS box and add this:

   
   #header-content { 
   	height: 100px;
   }
   

3. Update your settings.

Take care,
Bill

[James Amedeo]

Do I have to change 100 to the number I want?

Also, after I check on the ipad, do I have to ask you for the CSS code or should it work now?

[Bill Robbins]

You can use any number you want.

All I did was change the background attachment to scroll from fixed. I think what may have happened earlier was some CSS specificity working against us. Instead of the code I gave you earlier, try this:

@media only screen and (max-device-width: 1024px) {
	
	body.page-id-48 #home-one,
	body.page-id-48 #home-two,
	body.page-id-48 #home-three,
	body.page-id-48 #home-four,
	body.page-id-48 #home-five,
	body.page-id-48 #home-six,
	body.page-id-48 #home-seven,
	body.page-id-48 #home-eight,
	body.page-id-48 #home-nine,
	body.page-id-48 #home-ten,
	
	body.page-id-469 #home-one,
	body.page-id-469 #home-two,
	body.page-id-469 #home-three,
	body.page-id-469 #home-four,
	body.page-id-469 #home-five,
	body.page-id-469 #home-six,
	body.page-id-469 #home-seven,
	body.page-id-469 #home-eight,
	body.page-id-469 #home-nine,
	body.page-id-469 #home-ten {
		max-height: 100%;
		background-attachment: scroll;
	}
	
}

Bill

[James Amedeo]

The link you provided worked for the history page but not the cafe page. Will the parallax still work for desktop?

[Bill Robbins]

I’m not seeing the code on the site in the Custom CSS. This won’t affect the parallax on screens larger than 1024 pixels wide.

[Author]

Posts