Responsive + Load Time Fixes

[HiroiSekai]

Hey there, really enjoying the Cardinal theme! Almost everything works wonderfully, but I wish to ask about a few problems I’ve been having. Ultimately, I would like my site to work equally well throughout any platform, and I have a few issues that pop up when I design for my 1440p PC display, then move over to my 1800p retina Mac display, or even down to my iPad and mobile displays. I’ll branch the issues off into the 2 sections it fits under:

Responsive
Thanks to Masonry and percentage CSS widths, most stuff scales well. The only problem I’m running across here are the fancy headers. I design them for my PC display, then no matter what other platform I view it on, it stretches out to its full width and height. On anything but my original display, the majority of the header is obstructed and hidden because it’s zoomed in far too much. If I designed from the smallest mobile display, I assume it would scale up, but as a raster image it would look absolutely terrible. How would I fix this issue?

Load Times
The slides allow MP4 files to play as backgrounds. As such, I used a few around the site, but my desktop PC’s the only platform I own that’s powerful enough to run it all at full speed. On my Macbook Pro, it has to roll through about once before it starts playing properly, and naturally on iPad and mobile the MP4 videos never load. I assume this is because of supported codecs for the platforms themselves, but I’ve been unsuccessful with Apple’s suggested MP4 iPad encoding tips as well.

Regardless, in JavaScript one can define a document.ready function to run elements only once they have loaded fully. I am wondering if this theme supports something similar, where the different platforms can utilize a piece of code to force the browser to remain in a loading state until it is fully prepared to show all content at full speed. On top of that, if there is a way to fix the MP4 issue on iPad and mobile, that would be great, but if not, is there a way to display a mobile version of the theme that replaces the MP4 slides with other ones?

Thank you very much for looking into this matter.

[Swift Ideas – Ed]

Hi there,

Can you show me a page where you are using the Fancy Header, I can try to adjust the css for you.

The videos are only loaded once they return the “can play” notification. Unfortunately it’s not possible to show these videos on iPad/Mobile as they can’t be autoplayed, and would require opening in the native browser as they can’t play in the background – not great for user experience.

– Ed

[HiroiSekai]

Hello, thank you for the assistance. Here is a post that is using the Fancy Header, but I need it to be responsive in the sense that it always takes up 100% width, but sizes itself down to constrain to the edges of whatever platform it is displayed on.

As for the videos, that’s understandable. Referring to my last post, is there some sort of option where iPad and Mobile users are taken to an alternate version where I can display just images or something? If not, I’ll just have to take out the MP4 files entirely, but I would ultimately prefer to have them in.

Thanks again!

[Kyle – SUPPORT]

Hi

After looking at the page, I think you could use a different method. You are only showing an image at the top of the page, there is no title. So I would suggest using a ‘row’ and setting the image as the background, with the movement set to ‘scroll’.

For the video backgrounds, if you upload an image to the image background options the image will be used on mobile and tablet devices

– Kyle

[HiroiSekai]

Thanks for the information, uploading an image worked well.

As for the header, I understand what you’re getting at, but I’m not quite sure which CSS rules to utilize for that one. In order to display it on the top and always show it 100% width, what exact rules should I apply?

Many thanks again.

[Kyle – SUPPORT]

If you use a row with a background image it will display full width, and if you add it to the top it will display at the top. You will just need to ‘remove top spacing’ in the page meta settings

– Kyle

[HiroiSekai]

Yes, I understand the concept, but would this be done through CSS or PHP? I’m just not sure how to implement the row and apply it to the top while removing top spacing.

Sorry for the trouble.

[Rui Guerreiro – SUPPORT]

Hi,

It’s just an option inside the page/post you are editing. Look at the bottom in the meta options.

https://www.dropbox.com/s/trk97pjgnirqjfc/remove_top_spacing.png?dl=0

-Rui

[HiroiSekai]

Hi again, checking the option unfortunately does nothing. On all of my other devices, the header is stretched far past the edges.

[Kyle – SUPPORT]

Which page are you referring to? So I can take a look

– Kyle

[HiroiSekai]

http://wp.me/p4uAeV-30A

That’s the one I applied the fix to. Many thanks!

[Kyle – SUPPORT]

Ok so the issue is resolved?

– Kyle

[HiroiSekai]

No sorry, I just meant that’s the only page I tried it for. Only on my primary monitor where I designed the header for is showing up properly. Everywhere else like my Macbook Pro, iPad and Galaxy phone is keeping it at the full size and cropping the edges off. I would like it to scale down to fit whatever borders the current device is using.

Thank you.

[Kyle – SUPPORT]

Ok please check the post now, I made some changes:

1) You need to use the page builder
2) Add a row asset at the top of the page, which an image asset inside the row
3) In the row settings, set ‘full width’ instead of ‘content width’
4) In your image asset, chose your image for the title, then set full width to yes
5) In the post meta settings at the bottom, check the box to ‘Remove Top Spacing’ and also uncheck the box to show page title.

I know it seems hard work, but it’s the only way to achieve the layout you are trying to achieve

– Kyle

[HiroiSekai]

That actually makes the post look more organized too, thank you very much for the details.

That solves the problem well, the additional steps are no problem for me.

Many thanks again!