I’ve just gone through creating a website for Desktop but, when the Desktop site is viewed on an iPad Pro, a great deal of the code doesn’t seem to translate. It’s odd because the site is perfectly viewed on PC/a larger screen size.
On the PLAYLIST Page:
The footer doesn’t reach to the full width of the page, though it does on PC browsers.
There should be spaces between the album covers, does not work on iPad.
Header does not stretch full width of the screen.
Any thoughts on what could be causing this and how to resolve?
The problem is your design is set up specifically for larger screens.
Your “Blog Body - Playlist” element is 1000px wide with margins of 130px, which = 1260px altogether. The iPad screen is more narrow than that, which means your elements are going to spill out of the page.
It’s always a good idea to check your design by grabbing the edge of the designer window and making it more narrow so you can see how things are going to appear on smaller screens.
