More iPad issues

[dsirard11]

When viewing our site on an iPad, two issues come up:

1. Home page: The shopping cart and search icons overlap navigational text (see attached image #2)

2. The text in the Home Page boxes aligns differently on the iPad screen. For example, the text “Soap Bars” is set to align to the top left – and on a computer screen it does. On an iPad it sits much lower. Is there a way to insure that the text is positioned the same on computers and iPads? (see attached image #1a)

Thank you,
Dawna

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Hi,

1) Theme Options => Mobile Header Visibility => Tablet Landscape

2) This is because of one of your modification, it’s in your theme options CSS:

@media only screen and (max-device-width: 1024px) and (min-device-width: 768px) and (orientation: landscape)
.image-banner-content p {
    margin: 0!important;
}

If you remove that, the text will go back to the top as per the desktop version.

– David.

[dsirard11]

This fixed the issue in landscape view but portrait view is still off. see attached.

Attachments:

You must be logged in to view attached files.

[dsirard11]

We’d still like to fix the portrait view for our site. Is there something we can do to get the text correct?

Thank you,
Dawna

[David Martin – Support]

Hi,

To center the text for the iPad in landscape, please add this:

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { 
.image-banner-content p {
    margin-top: 0!important;
}
}

Thanks,
David

[dsirard11]

Hi David,

The landscape view is fine – it’s the portrait view we are having issues with.

Thank you,
Dawna

[David Martin – Support]

Hi Dawna,

I must be getting my wires crossed, for me portrait view looks fine. Which leads me to think I am looking at a different section?

Could add another screenshot to annotate where you are referring to?

Cheers,
David.

[dsirard11]

Hi David,

See the attached images from portrait view. For me, landscape looks fine.

Thank you,
Dawna

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Hi,

Very strange I cannot replicate it on my Chrome emulator, but I can here: http://mobiletest.me/apple_ipad_4th_generation/2678893/advanced.

Please use this instead:

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 
.image-banner-content p {
    margin-top: 0!important;
}
.image-banner-content.content-center {
    margin-bottom: 0!important;
}
}

Thanks,
David.

[dsirard11]

Hi David,

I tried the code but did not see a change. Cleared cache and checked again – still no change. 🙁

Thank you,
Dawna

[David Martin – Support]

Hi Dawna,

I had to add another snippet to the CSS. Please check now, I had to clear your plugin cache also before the changes appeared.

Thanks,
David.

[dsirard11]

Hi David,

It looks great now. Thank you! I’m so relieved to get this solved. 🙂

By the way, is clearing the plugin cache different from a regular flush cache?

Thank you,
Dawna

[David Martin – Support]

Hi,

I think we are referring to the same button, in the top of your WP admin bar “Flush Cache”. I mentioned plugin cache, so you didn’t think I was meaning your browser cache.

Happy to help you out!

– David.

[dsirard11]

Oh – makes sense. Thanks again – you guys are the best support I’ve ever experienced in WordPress themes. 🙂

[David Martin – Support]

Great, no problem and thanks for your support and kind words.

– David