Home page heading issue on tablets

[eimearhough]

Hi there,

I’m having a bit of trouble with the heading on my home page.

I have tested it on Screenfly, and on certain tablets, the first heading on the homepage is not centred. The list of tablets I have discovered this on are:

Amazon Fire HD 8.9” Portrait Mode
Kindle Fire HD 7” Landscape Mode
Asus Nexus 7 Landscape Mode
Apple iPad Portrait Mode
Samsung Galaxy Tab Portrait Mode

Here is a link showing my issue on an iPad in portrait mode: http://quirktools.com/screenfly/#u=http%3A//www.smartfactory.ie&w=768&h=1024&a=22&s=1

I tried a few things but can’t get it working. All custom CSS has been removed.

Any help with this would be very much appreciated! 🙂

Eimear

[Rui Guerreiro – SUPPORT]

Hi,

I think it’s related to the way you build the content of the homepage

https://www.dropbox.com/s/9h5ugxiandofdkn/Screenshot%202016-12-07%2016.22.05.png?dl=0

You should have those 2 assets inside a column that is only visible on desktop and duplicate that column and in the 2nd one make it only visible in Mobile/tablet and erase the blank spacer and leave only the text block with 1/1 Width.

Give it a try.

-Rui

[eimearhough]

Thanks for your help. I just had to make the blank spacer visible globally. 🙂

Eimear

[Rui Guerreiro – SUPPORT]

Great. Glad it’s sorted.

-Rui

[eimearhough]

Hi again,

I’m still testing my site on different browsers etc.

I’ve just discovered this issue on a retina screen. (Attached screenshot)

Could you possibly give me the optimal settings for the logo, both standard and retina?

Size in px, dpi, Logo Max Height & Logo Top/Bottom Padding option in theme options. Currently, I had to set these two options in the settings as my logo was too big and this brought it back down but now I think it’s causing an issue with retina.

Any help would be greatly appreciated!

Eimear

Attachments:

You must be logged in to view attached files.

[Rui Guerreiro – SUPPORT]

It seems that your retina logo is the same has the normal logo. The retina logo should have twice the resolution of a normal logo.

There are several videos and tutorials of how to achieve this.
Check this one.
https://www.youtube.com/watch?v=PcxkkW9m6WM

-Rui

[eimearhough]

A couple of weeks ago (I was having an issue with how my logo looked on a TV) you said my standard logo should be 300dpi, so that’s what I did. It did help.

Given that my Retina logo is the same as the standard, that means it is also 300 dpi, which makes me think this is not the issue.

As my logo is so large, (It’s like 2400px wide or something) I had to set “Logo Max Height” to 100.. which worked to make it the right size on standard.

I’m thinking on Retina because the width is quite large but height is also 100 (from “Logo Max Height”)…this is why it is appearing so stretched.

So I think the best way to fix this would be to not have to use the “Logo Max Height” setting, but to do this would mean having to upload new logos of the correct (and most suited for this theme) dimensions. This is why I asked you for the ideal dimesnions.

If you don’t know that’s fine, I’m sure trial and error will help me figure them out.

Or am I completely wrong in my whole understanding of this? Sorry if I am…:)

[Rui Guerreiro – SUPPORT]

I’m also not 100% sure about this. Will forward it to David.

-Rui

[eimearhough]

That would be great, thanks!

[David Martin – Support]

Do not use a logo width of 2400px, that is not appropriate. Please use photoshop to amend that.

On my Retina screen on Chrome + Mac I see this:

What device is your screenshot taken on?

[eimearhough]

Yes I’m aware that’s not appropriate which is why I’m asking for the ideal dimensions before I go changing it.

The screenshot was taken on a 2015 MacBook Pro 15″.

I have tried several cross-browser and cross-device testing solutions including testing on actual devices and I just seem to be getting different results everywhere I look. 🙁

Even separate from the logo, my heading is pushed into the menu on an iPad according to some of my testing, and some large devices are loading responsive versions of the site.

If you can provide me with the ideal dimensions in pixels for the standard logo, I will create and add this. I will also update the retina logo with one which has twice the dpi, as in the above video your support colleague shared with me. At least then I can remove the “Logo Max Height” setting.

Also, separate from this, if you could be so kind as to recommend the best way for me to test my site across different screens and platforms, I would be very grateful! 🙂 I just seem to be getting different results everywhere.

e.g, according to screenfly, my site looks perfect on an iPad: http://quirktools.com/screenfly/#u=http%3A//smartfactory.ie&w=1024&h=768&a=22&s=1

but according to ResponsiveTest.net, the heading is pushed up into the menu! : http://responsivetest.net/#u=www.smartfactory.ie|1024|768|1

Thank you so much for your help. This has all gone way over my head, I’m not sure if I could sort it myself!

Eimear

[David Martin – Support]

The ideal max standard size would beL 390px in width, the height would be relative to that width.

For retina, it would be simply double, so 780px in width.

I cannot replicate your initial screenshot, please clear your browser cache and re-test this.

The best/easiest way to test your site on various screen sizes is by using the Chrome Web Inspector. Right Click => Inspect. You can then click the device icon and switch between sizes:

[eimearhough]

I can’t replicate it either. I’ve tried on other devices. That’s why I’m so confused. 🙂

Thanks for that. I’ll give it a go with the new dimensions and test only in Chrome Dev Tools. 🙂

[Rui Guerreiro – SUPPORT]

Ok. Thanks David for the explanation.

-Rui