Image sizing for different viewports – Charity theme

Home Forums All Other Themes Image sizing for different viewports – Charity theme

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #48094
    Helen
    Participant
    • Topics: 19
    • Replies: 42
    • Total: 61
    Member since: May 11, 2016

    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

    #48237
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 25559
    • Total: 25559
    Member since: August 16, 2013

    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

    #48328
    Helen
    Participant
    • Topics: 19
    • Replies: 42
    • Total: 61
    Member since: May 11, 2016

    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

    #48377
    Helen
    Participant
    • Topics: 19
    • Replies: 42
    • Total: 61
    Member since: May 11, 2016

    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!

    #48397
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 25559
    • Total: 25559
    Member since: August 16, 2013

    Hi Helen,

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

    Regards,
    Brad

    #48412
    Helen
    Participant
    • Topics: 19
    • Replies: 42
    • Total: 61
    Member since: May 11, 2016

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

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