Tagged: , ,

Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • #1083209

    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 3 months ago by  jahnetik.
    • This topic was modified 3 months ago by  jahnetik.
    #1084218

    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.

    #1084819

    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

    #1084960

    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.

    #1085492

    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

    #1085625
    #1085929

    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

    #1086095

    Sorry, I switched the page to :

    It happens on the other pages with logos as well.

    #1086103

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

    #1086147

    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?

    #1086155

    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.

    #1086156

    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

    #1086160

    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

    #1086161

    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 2 months, 3 weeks ago by  cg.
    #1086182

    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

    #1086208

    Hi jahnetik,

    Glad you got it working for you! :)

    If you need further assistance please let us know.

    Best regards,
    Victoria

Viewing 16 posts - 1 through 16 (of 16 total)

You must be logged in to reply to this topic.