Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • December 3, 2016 at 6:24 pm #720060
    adamp81

    My big preview images aren’t resizing on mobile. I’m using the following custom CSS.

    .big-preview.single-big img {
    height: 314px;
    min-height: 314px;
    max-height: 314px;
    width: 600px;
    min-width: 600px;
    max-width: 600px;
    }

    .big-preview.single-big{ text-align: center; }

    .big-preview.single-big a{ display: inline-block; }

    #top.single-post .big-preview.single-big a,
    #top.single-post .small-preview {
    pointer-events: none;
    cursor: default;
    }

    December 3, 2016 at 6:41 pm #720061
    Basilis

    Hi adamp81!

    THanks a lot for contacting us.
    Can you please explain us what do you mean by resizing?
    What exactly do you need them to do, how to interact?
    What is not looking OK, so we can be able to help you.

    Thanks a lot

    Best regards,
    Basilis

    December 3, 2016 at 8:55 pm #720086
    adamp81

    You can see in the image below how the big preview image for a blog post shows up fine.

    2016-12-03_1153

    Then when you go down to mobile it doesn’t resize. It just gets cut off.

    2016-12-03_1154

    I appreciate your help.

    December 4, 2016 at 7:52 am #720177
    Rikard

    Hi,

    You have declared the images to always display 600px wide in your CSS so that is what they will do :-)

    You could try using media queries on for smaller screens:

    @media only screen and (max-width: 767px) {
.big-preview.single-big img {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
}
}

    Please post a link to the site in question if you should need any further help.

    Best regards,
    Rikard

    December 4, 2016 at 8:04 am #720182
    adamp81

    I only want the image to be a max of 600 px.

    • This reply was modified 8 years, 3 months ago by adamp81.
    December 5, 2016 at 5:53 am #720303
    Rikard

    Hi,

    Ok, but for screens under 600 pixels wide the images will not display properly. How do you want the images to look then?

    Best regards,
    Rikard

    December 5, 2016 at 6:11 pm #720578
    adamp81

    The image looks good when it’s full size. But you can see when you shrink the screen to go down to mobile that it only adjusts horizontally, not vertically…. Therefore the image gets distorted. I’d like it to resize with the same ratios so the image doesn’t get distorted.

    December 6, 2016 at 10:14 am #720910
    Rikard

    Hi,

    Ok, then you will have to go with the solution I gave you previously, you can adjust the media query to only affect screens under 600 pixels. If you explicitly tell your images to display at a specific pixels width and height then that is what they will do.

    Best regards,
    Rikard

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