• Home
  • Categories
  • Recent
  • Popular
  • Top
  • Tags
  • Users
  • Groups
  • Documentation
    • Home
    • Read API
    • Write API
    • Plugin Development
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse
v3.5.2 Latest
Buy Hosting

Stock theme issue when mobile

Scheduled Pinned Locked Moved General Discussion
15 Posts 3 Posters 4.0k Views
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • SteveS Offline
    SteveS Offline
    Steve
    wrote on last edited by
    #1

    Maybe its me. Sitting in the car on my cell with supernerdz.com open and the category images repeat 3 times across the width of my screen.

    No idea how to take a screencap so I'll take a pic of it later for reference.

    A 1 Reply Last reply
    0
  • A Offline
    A Offline
    a_5mith
    replied to Steve on last edited by
    #2

    @Steve that's because you've used an image that's only big enough to fill the desktop version of the category images, the mobile ones are closer to 450px in length. Whereas desktop is 150px or so.

    You can fix by using a 450x450 image, then setting the drop down to either contain or cover, I don't remember which, this will adjust the image to fit on desktop, and fit nicely on mobile too. You'll lose a bit of the top and bottom on mobile, but that's just down to the image you use.

    1 Reply Last reply
    1
  • julianJ Offline
    julianJ Offline
    julian GNU/Linux
    wrote on last edited by
    #3

    @a_5mith wouldn't "cover" mean that the image is scaled from edge to edge, pixellation be damned?

    A 1 Reply Last reply
    0
  • A Offline
    A Offline
    a_5mith
    replied to julian on last edited by
    #4

    @julian I think it just scales the image down so it fits, so it turns the 450x450 into a 125x125 or whatever the image size required. I'll have a look in a moment, having a few issues with HTML sanitization. 😆

    1 Reply Last reply
    0
  • julianJ Offline
    julianJ Offline
    julian GNU/Linux
    wrote on last edited by
    #5

    Yeah, it works great for larger images, which will get scaled down to whatever the container is, whereas smaller images will be scaled up... seems like the perfect solution for most use cases to me.

    A 1 Reply Last reply
    0
  • A Offline
    A Offline
    a_5mith
    replied to julian on last edited by
    #6

    @julian Yeah I'll agree with that, moral of the story, start with a bigger image and scale down. I'm not sure when 'contain' would be useful though, as there's not really a use case where it's perfect across all Desktop, Tablet & Mobile. You'll always have either a repeat-x or repeat-y. Unless you're got an image that is designed to be repeated, obviously. 😆

    1 Reply Last reply
    0
  • SteveS Offline
    SteveS Offline
    Steve
    wrote on last edited by
    #7

    Pretty sure I used large images but let me take a peek tonight. I may have resized them to reduce size. If it's auto reducing size I'll go back in and put larger ones. I just don't remember offhand.

    Time to make a giant boss level family salad for dinner. Got the artichokes, fresh tomatoes, and a pile of other items waiting to be sliced and diced 🙂

    1 Reply Last reply
    0
  • julianJ Offline
    julianJ Offline
    julian GNU/Linux
    wrote on last edited by
    #8

    @Steve Hope you have some steak to go with that salad... 😛

    1 Reply Last reply
    0
  • SteveS Offline
    SteveS Offline
    Steve
    wrote on last edited by
    #9

    hahah @julian not that meal but I did the next night.

    Just checked the files, and somewhere along the line I must have resized the files. I can't find the smaller ones but I have all the larger originals. So I'll scale them down to 450x450 and reupload them. I did one test quick with a bigger 1600x1200 or something like that file and I see it worked perfectly.

    A 1 Reply Last reply
    0
  • A Offline
    A Offline
    a_5mith
    replied to Steve on last edited by
    #10

    @Steve good stuff, anything larger than 450px in width will work, but would be a waste of bandwidth. Let me/us know if you run into any other issues with this. I may create a guide for the category images at some point, as there's quite a lot you can do with it.

    1 Reply Last reply
    0
  • SteveS Offline
    SteveS Offline
    Steve
    wrote on last edited by
    #11

    So now I uploaded a bunch of 450x450 images and what it's doing is displaying just the top-left corner on the desktop, showing just the top X percent of the image on the cell, and then on iPad it's displaying similar to the desktop.

    A 1 Reply Last reply
    0
  • SteveS Offline
    SteveS Offline
    Steve
    wrote on last edited by
    #12

    Jumping over to Pewter theme for a second view/opinion.

    Desktop looks great. (Just wish that damn login window top-right worked instead of always saying Anonymous, ya know @psychobunny ) 🙂

    Mobile does not load properly at all. The 2 images I see looks fine and convey the message. But it is unable to scroll past the first category.

    iPad is doing the top slice so most look good, a few wonky.

    1 Reply Last reply
    0
  • A Offline
    A Offline
    a_5mith
    replied to Steve on last edited by
    #13

    @Steve said:

    So now I uploaded a bunch of 450x450 images and what it's doing is displaying just the top-left corner on the desktop, showing just the top X percent of the image on the cell, and then on iPad it's displaying similar to the desktop.

    You changed the container from auto to cover?

    SteveS 1 Reply Last reply
    0
  • SteveS Offline
    SteveS Offline
    Steve
    replied to a_5mith on last edited by
    #14

    @a_5mith said:

    @Steve said:

    So now I uploaded a bunch of 450x450 images and what it's doing is displaying just the top-left corner on the desktop, showing just the top X percent of the image on the cell, and then on iPad it's displaying similar to the desktop.

    You changed the container from auto to cover?

    Nope, still on auto just checked.

    A 1 Reply Last reply
    0
  • A Offline
    A Offline
    a_5mith
    replied to Steve on last edited by
    #15

    @Steve Ok, change to cover. 👍

    1 Reply Last reply
    0

Copyright © 2023 NodeBB | Contributors
  • Login

  • Don't have an account? Register

  • Login or register to search.
Powered by NodeBB Contributors
  • First post
    Last post
0
  • Home
  • Categories
  • Recent
  • Popular
  • Top
  • Tags
  • Users
  • Groups
  • Documentation
    • Home
    • Read API
    • Write API
    • Plugin Development