Stock theme issue when mobile



  • 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.


  • Global Moderator

    @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.


  • Admin

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


  • Global Moderator

    @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. 😆


  • Admin

    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.


  • Global Moderator

    @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. 😆



  • 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 :)


  • Admin

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



  • 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.


  • Global Moderator

    @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.



  • 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.



  • 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.


  • Global Moderator

    @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?



  • @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.


  • Global Moderator

    @Steve Ok, change to cover. 👍


Log in to reply
 


Looks like your connection to NodeBB was lost, please wait while we try to reconnect.