Site not displaying properly on phone and tablet

  • Author
    Posts
  • #38404

    Hi lovely people. I’m a total newbie having a nightmare trying to get to grips with all this!

    I’m running Parabola with a presentation page with a slider that shows 5 latest posts and all the rest of my posts in a grid below. The site is at http://www.passportandpixels.com

    My latest problem is the ipad and iphone the image from the first slider photo gets stretched and stays stuck behind the next one as it comes across so you can always see the stretched bottom of the first photo behind the others as they move across. The rest seem to move ok, but always the first one is stretched and stuck behind. I’ve tried changing the slider dimensions and the type of transition but it doesn’t make a difference.

    Also on the iphone the header image stretches and the text moves down so much that the tagline is partly hidden off the bottom.

    And finally, the whole thing is running really slow. I contacted my host provider who said the main page is really big, 8.5 MB, but I don’t know why or how to make it smaller. All my images have been resized (but maybe not enough?)

    Can anyone help with this? I am going so mad that I am about to give up and switch to a free wix.com site… unless someone can explain to me why I shouldn’t?!!
    Please help… though I can’t promise I will understand your responses as I’ve never done anything like this before… not sure why everyone said WordPress was the best and easiest way to do this…

    Thanks!

    #38475

    An update – I have managed to fix the slider issue (a helpful person on your twitter told me to turn off one of the Jetpack plugin selections).

    BUT…
    The site is still not displaying properly. On iphone the header image is stretched so it is much taller than it should be and the photo is weirdly stretched.

    On computer the posts don’t all line up in neat rows, 3 posts to a row – some rows have just one or two posts in, I cannot work out why.

    Please can someone help me? I really want to make my site live and start sharing it with people but I don’t want to do that until it looks right!

    Thanks

    #38497
    Zed
    Cryout Creations mastermind

    Your website appears acceptable in size (although load time could be improved):
    https://gtmetrix.com/reports/www.passportandpixels.com/d6aMme5Q

    The server hosting it appears to spend 3.45s processing before it starts serving the content (you can see this in the Waterfall tab).

    The header image is resized to fit on a narrow portrait-mode screen size. If you want it to maintain aspect ratio (meaning it will become a lot shorter) you’ll find the ‘Keep header image aspect ratio’ option under the theme’s Header settings.

    The columns re-arrange on mobile devices (also due to size constraints and fitting reasons). They first rearrange to two columns and then to single column (on the smallest of the mobile device). The two columns layout will work best if all columns have the same amount of text (which is not the case for your site). If they don’t have the same amount of text, some columns will be longer than others, making the arrangement fail (the next row column will try to fit under the shorter column above when this is the one to the right).
    We’ll see if we can improve this behaviour in the theme (there are limits to what CSS allows). Until then, try to keep your columns (texts) the same length.


    If you like our creations, help us share by rating them on WordPress.org.
    Please check the available documentation and search the forums before starting a topic.
    #38507

    Hi Zed, thanks so much for your helpful reply.

    With the header image problem – I have tried keeping the header image aspect ratio as you suggest, but then I lose the text off the bottom as the text does not also resize. As it currently stands, the text fits perfectly well inside the header image, but the image itself is very wide (stretched) and there is a big gap at the top above the text. The image could definitely be half as tall and the text would still fit, then it would be much closer to the original aspect ratio. But if I click ‘keep the aspect ratio’ then the image becomes much thinner – it would be fine this thin and I think the text would still fit, but for some reason when I do this the text just drops off the bottom.

    With the columns. The issue is has not been on mobile devices, it was on the computer. Each post is in its own little box and all the boxes are the same size, so they do fit neatly in rows. But some rows only had 1 or 2 posts in, then there was a big gap, and it started again on the next line. Eg:

    Post Post Post
    Post
    Post Post Post

    etc…

    When I added a new post, the new one pushed everything down and it went back into neat rows again, but it may do it again next time I add another new post.

    Posts should all have the same amount of text, as I have set the excerpt option – it give an except of 50 words. Of course, this may not be exactly the same volume of text if I have used longer or shorter words. Is there an option to have an amount of characters instead? Then the volume of text would always be the same.

    Thanks
    Bella

    #38595
    Zed
    Cryout Creations mastermind

    We’ll fix the columns misalignment issue on mobile devices in the next update.


    If you like our creations, help us share by rating them on WordPress.org.
    Please check the available documentation and search the forums before starting a topic.
    #39900

    Hi
    Following on from the previous chat, my site is still not displaying posts correctly on the homepage. I’ve made a screen grab but I don’t think I can attach it here.
    Basically instead of having all the post lined up in rows of three like this:

    X X X
    X X X
    X X X
    X X X

    Etc…

    I’m getting this… or varieties of this:

    X X X
    X X X
    X
    X X X
    X
    X X X

    I don’t understand why there are random gaps, nor how to fix it. It looks weird and wrong. Can you help?

    Thanks
    Bella

    #39909
    Zed
    Cryout Creations mastermind

    Your websites indicates that you are using Parabola version 1.7.4. We’ve already fixed the columns issue in a later update.


    If you like our creations, help us share by rating them on WordPress.org.
    Please check the available documentation and search the forums before starting a topic.
    #39995

    Ah, thanks very much Zed for the reply. I’ve updated and as you say, the problem has been solved, which is great.

    Now I have a new issue though.

    On my iphone, the images on the presentation/home page seem to be stretched. They are in 16×9 ratio, and look fine on the slider and on the computer screen, but on the iphone in the ‘latest posts section’ below the slider they seem to be stretched to the width of the iphone but for some reason are not proportionally taller as well, so they appear thin and stretched horizontally.

    But when you go into the posts themselves, the images display quite small, they don’t reach all the way to the sides and have a big border round them, so the photo itself is quite small, especially the landscape-shaped ones.

    I’d send you a screen grab but I don’t think I can here…

    Can either of these issues be fixed?

    Thanks

    #40003

    I am having the same issue with my website, the columns don’t properly lineup on mobile devices. http://www.mtsuhistpres.org/

    #40040
    Zed
    Cryout Creations mastermind

    @ashley.brown, your side does not appear to be exhibiting the same issue as the previous topic.
    How are your columns not lining up?


    If you like our creations, help us share by rating them on WordPress.org.
    Please check the available documentation and search the forums before starting a topic.
    #40077

    Ok, but what about my issue of the site images still not displaying properly as mentioned just above?

    On my iphone, the images on the presentation/home page seem to be stretched. They are in 16×9 ratio, and look fine on the slider and on the computer screen, but on the iphone in the ‘latest posts section’ below the slider they seem to be stretched to the width of the iphone but for some reason are not proportionally taller as well, so they appear thin and stretched horizontally.

    But when you go into the posts themselves, the images display quite small, they don’t reach all the way to the sides and have a big border round them, so the photo itself is quite small, especially the landscape-shaped ones.

    I’d send you a screen grab but I don’t think I can here…

    Can either of these issues be fixed?

    #44305

    I also have the original problem posted, where the slider is broken on iphones (new image slides in and the whole thing moves, etc). Would you please share what the Twitter-provided fix for this was?

    Website: humstaging.byu.edu/mormoninsights

    #44369
    Zed
    Cryout Creations mastermind

    @webdev-tory, make sure the images are the same size between them (and preferably the same size as the slider is configured) to avoid animation distortions.

    You can also replace the built-in slider with a different one that may handle differently-sized images in another way.


    If you like our creations, help us share by rating them on WordPress.org.
    Please check the available documentation and search the forums before starting a topic.
Viewing 13 posts - 1 through 13 (of 13 total)

The topic ‘Site not displaying properly on phone and tablet’ is closed to new replies.