Image sizing for different viewports – Charity theme

[Helen]

Hi, I have a query about how best to manage image sizing so that it works well for different viewports. Obviousy this is a responsive theme so it shouldn’t be a problem, but I think I may be doing something wrong. If you could take a look at http://jessiesfund.org.uk/our-work/training/…. the images are fine on a large screen, but on a smartphone, the text runs down the side of the image in a very narrow column and looks awful. I would expect the image to be either full width at this viewport sizes, or centered, which would be fine- but I don’t know how to amend the media queries to make this work. Obviously I want the laptop viewport size code to stay as it is? Could you advise?
Thanks,
Helen

[Sonl Sinha]

Hi Helen,

Kindly go to Appearance>>Theme Option>>Basic Setting>>Custom CSS Box

Add this code there:

@media screen and (max-width:480px){
.alignleft, img.alignleft{float:none !important;}
}

Regards,
Brad

[Helen]

Great, thanks – that works, and I’ve added in the classes for the right aligned images. However, looking at the effect, I think I’d rather the images filled 100% of the screen, so I’ve added 100% to the width. Its fine for the left aligned images, but the right aligned ones are going right up to the edge of the screen with no padding. I can’t work which of the containing divs needs amending to add padding (or a margin-right?) to the screen – can you advise?
Many thanks for your help with this,
Helen

[Helen]

Hi, please disregard my query about 100% widths, I’ve fixed it.
However – I have a query relating to your css supplied above (@media screen and (max-width:480px){.alignleft, img.alignleft{float:none !important;}}

Is there any way of getting the image to be centered? I’ve tried everything I can think of and can’t make it work,

Thanks!

[Sonl Sinha]

Hi Helen,

Now the images are 100% width so which images you want to center align?

Regards,
Brad

[Helen]

I want to have some smaller ones, which I’ll control via different classes,
Thanks, Helen

[Author]

Posts