Tagged: , ,

Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • March 26, 2019 at 7:26 pm #1083209
    jahnetik

    Hello,

    I have my PNG images properly sized for each page so they show up somewhat crisp on desktop. Unfortunately on mobile, they look either compressed or just blurry from being resized when viewed on my Samsung S8. They are all smaller sized logos. What is my issue?

    Page example: https://www.asvsales.com/distributors/

    It looks like it might be improper image sizes for each column? The above page is set at 1300px so for 5 columns that’s 260px width an image. But then it adds it’s own padding. I’ve turned off the space between columns under the column settings in hopes it would use the actual dimensions.

    Let me know what other info you need.

    Thanks
    Jason A.

    • This topic was modified 5 years, 7 months ago by jahnetik.
    March 28, 2019 at 6:44 pm #1084218
    jahnetik

    Seems like the sizes I’m creating are slightly off from the actual container size. Inspected the container size in firefox for actual dimensions. Will resize and go from there.

    March 30, 2019 at 7:21 am #1084819
    Rikard

    Hi Jason,

    Thanks for the update and sorry for the late reply. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

    March 30, 2019 at 8:23 pm #1084960
    jahnetik

    Yeah sizing the images to the containers just made the desktop images look better. Mobile images are still off. Seems like they’re being scaled up in size, in all pages.

    April 1, 2019 at 1:28 pm #1085492
    Rikard

    Hi,

    Thanks for the update, though the images seems fine on my end in the mobile layout. Could you post a screenshot of what you are seeing on your end please?

    Best regards,
    Rikard

    April 1, 2019 at 6:22 pm #1085625
    jahnetik

    https://ibb.co/6gTrcmB
    https://ibb.co/Kq8fs1N

    April 2, 2019 at 8:36 am #1085929
    Rikard

    Hi,

    Thanks for that, though I can’t see those elements on the page you linked to. On which page can we see them?

    Best regards,
    Rikard

    April 2, 2019 at 3:12 pm #1086095
    jahnetik

    Sorry, I switched the page to :

    Products

    It happens on the other pages with logos as well.

    April 2, 2019 at 3:29 pm #1086103
    cg

    The logo-images are resized to 100% width of the column … and that’s wider than the size you upload the images. They can’t be sharp that way.
    If you don’t wan’t to upload them with bigger dimensions the only option is to not let them resize to the column width.

    You can try this in Custom CSS:

    .avia-slideshow li img {
  width: auto !important;
}

    (Deactivate merging, compressing and caching while you work on the site.)

    April 2, 2019 at 4:47 pm #1086147
    jahnetik

    The CSS and deactivating merging, compressing etc. seemed to have helped but not perfect. If I double the image dimensions but keep them in the same container size, will that help the issue?

    April 2, 2019 at 5:01 pm #1086155
    cg

    but not perfect

    Can you specify what you are missing? … Looks fine now on my end.

    The columns in mobile view get extended up to ~610px width. That’s the breakpoint (screen width 780px) where they are shown in single columns below each other.
    Your logo-images are 246px wide.
    So you would have to increase the size a little bit more than just doubling it.

    April 2, 2019 at 5:09 pm #1086156
    jahnetik

    They still look slightly pixelated on my end when viewed directly on my phone, albeit not as much as before.

    https://ibb.co/mGv5Sk7

    I will try and play around with the dimensions

    April 2, 2019 at 5:16 pm #1086160
    jahnetik

    I tested with a logo 610px wide and it looks great on mobile, not so much on desktop now. I guess I’ll just have to make the dimensions larger and figure out the appropriate size for the container

    April 2, 2019 at 5:19 pm #1086161
    cg

    That’s because a modern smartphone display has a lot more pixel resolution than a desktop screen.
    It’s not so visible with normal photos, but with clean logo graphics like in your case.

    To have a really good visual reproduction you need approximately double the pixel-size of those columns.

    => >1.200 px

    Edit: this answer refers to your comment before the last one and only if you want the logos to cover the full column width (~610px)

    • This reply was modified 5 years, 7 months ago by cg.
    April 2, 2019 at 6:03 pm #1086182
    jahnetik

    I just doubled the dimensions to 492×178, removed the CSS and it looks like it did the trick. I’ll repeat for the other pages. I’ll let you guys know if I have any other issues! Thanks for the advice

    April 2, 2019 at 7:05 pm #1086208
    Victoria

    Hi jahnetik,

    Glad you got it working for you! :)

    If you need further assistance please let us know.

    Best regards,
    Victoria

  • Author
    Posts
Viewing 16 posts - 1 through 16 (of 16 total)
  • You must be logged in to reply to this topic.