Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • October 28, 2014 at 11:03 pm #342443
    El_Chapo

    Dear support,

    When I resize the browser width, the images on my website become small. Something is going wrong I think, because I left the width empty. So I would think that this should adjust itself, right?

    Regards, Chapo

    October 30, 2014 at 12:59 am #343125
    Yigit

    Hi Chapo!

    Which images exactly? I checked your website and responsiveness seem to work fine. Images and columns are resizing as they supposed to. If you could please post a screenshot showing the issue we can make sure that we are not missing anything

    Regards,
    Yigit

    October 30, 2014 at 10:24 am #343305
    El_Chapo

    Yes I do have some example images from the homepage. Other pages have the same problem too.

    The picture get resized in width, but height stays the same. Is it because I’ve added a height in the css to get them aligned well? That shouldn’t matter right? If it does, how can I align them in an other way? Because when I remove this height in the css, it resizes well again. BTW I’m using the childtheme.

    https://www.dropbox.com/s/peaf5y143b2eqcx/before-resize.PNG?dl=0

    October 30, 2014 at 10:24 am #343306
    El_Chapo

    https://www.dropbox.com/s/b8dg3hinhblyfgl/after-resize.PNG?dl=0

    October 30, 2014 at 10:26 am #343308
    El_Chapo

    Below is the css I’m referring to.

    .iPhone5cHome .avia_image { height: 163px; }
.iPhone5Home .avia_image { height: 163px; }
.iPhone4sHome .avia_image { height: 163px;}
.galaxyS4Home .avia_image { height: 163px; }
.galaxyS3Home .avia_image { height: 163px; }
    October 31, 2014 at 4:42 pm #344125
    El_Chapo

    Support?

    November 2, 2014 at 4:05 pm #344869
    Elliott

    Hey!

    I don’t think setting a height value is good because it makes the images look stretched when you resize the browser. Are you wanting to make it so the image sizes stay the same even when resizing?

    Best regards,
    Elliott

    November 2, 2014 at 10:23 pm #345000
    El_Chapo

    I want the images to have that start height, because not all of them have the same height. So I want the images on the page to be the same size at all times. From original to resized browser.

    November 3, 2014 at 4:44 pm #345344
    Elliott

    Hey!

    In that case you will want to set a width value to them as well,

    .iPhone5cHome .avia_image { width: 194px !important; height: 163px !important; }
.iPhone5Home .avia_image { width: 194px !important; height: 163px !important; }
.iPhone4sHome .avia_image { width: 194px !important; height: 163px !important; }
.galaxyS4Home .avia_image { width: 194px !important; height: 163px !important; }
.galaxyS3Home .avia_image { width: 194px !important; height: 163px !important; }

    Cheers!
    Elliott

    November 3, 2014 at 8:07 pm #345487
    El_Chapo

    I’ve tried that before, but this didn’t resolve the problem unfortunately.

    November 4, 2014 at 6:21 pm #345984
    Elliott

    Hey!

    Go ahead and take a screenshot and highlight inside your screenshot exactly what your trying to do so we can get a better idea.

    Regards,
    Elliott

    November 4, 2014 at 10:42 pm #346184
    El_Chapo

    I’ve posted a screenshot already above. When I resize the image in width, the height still stays the same. In the css, I didn’t say it is an !important behavior for that height.

    It is just the start height for images on a specific page that have to be the same and in with when resized the height must be resized for all of them in the same amount too.

    November 6, 2014 at 1:11 am #346899
    Elliott

    Hi!

    I’m sorry El_Chapo but I’m not sure. You’ll probably want to just edit the images to whatever dimension you need.

    Best regards,
    Elliott

    November 6, 2014 at 10:35 am #347029
    El_Chapo

    I ended up doing so with mediaqueries…

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘Problems with responsiveness of media images’ is closed to new replies.