This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

Image scaling

  • Creator
    Topic
  • #6446
    reekes
    Participant

    I must have missed something (sorry to bother you with what must be simple questions).

    How can I get images to scale down while browsing on smaller screens?

    They’re the right size while on a large screen, but when using a phone they’re way too big. I’m assuming there’s a trick to get the smaller screen to use a smaller version of the image or something.

    I removed the width & height attributes from the page, and they look fine on the big screen, but I think they’re still too big when viewed on smaller screens. The image in question here is 296×370.

    Similarly, my logo at the top of the page is 676×56, and when viewed on a small screen this is too large. While viewing it in landscape mode it’s OK, but I think still too big.

    While in portrait mode, it’s getting cropped on both the left and right edges. Again, I’m assuming there’s a trick to solve this.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Author
    Replies
  • #6459
    Jason Bobich
    Keymaster

    Hello,

    Something is off here I think. You honestly shouldn’t have to do anything; images should scale all on their own. Can I see a link to your site? I’m sure there’s some kind of simple answer.

    #6461
    reekes
    Participant

    I’m still working on many things, but have a staging site up.

    This page has a photo, which looks fine on a desktop but I think it doesn’t scale down enough while on my iPhone. Try it in landscape mode. The text along the left side of the column is too narrow. I’d rather see it as something like 50/50 of text to image in the column.

    reekes.net/stage/home

    Then look at the logo on an iPhone. While in landscape mode it’s good, but in portrait it’s getting cropped. Note that this logo design is meant to butt against the left edge. I’m still working on that area of the CSS. I’m about to start adjusting the CSS for mobile too. (I asked a related question about this in another thread.)

    #6468
    Jason Bobich
    Keymaster

    If that’s what you want to setup, you’d just give it a max-width of 50% something like this:

    <img src="image.jpg" class="alignright" style="max-width:50%" />

    Or maybe do it to all aligned right/left images if you want:

    .alignright,
    .alignleft {
        max-width: 50%;
    }

    The logo issue is because of this in your custom.css:

    #branding #header_content .container { margin: 0 -40px; }

    If this is part of your design, maybe when you get down to the mobile viewport, you can just change the margin to 0 for that element.

    #6475
    reekes
    Participant

    style="max-width:50%"

    Ah – that’s the magic I was looking for 😉

    Now that I see how this works, I think a rule of thirds works best. It’s 33% for images.

    As for the logo, you pointed out a flaw in what I was doing. Now that I’ve dug into it, I think the right answer is to change the custom.css to this below. This also corrects the issue in the mobile page, and triggers the proper scaling.

    #branding #header_content .container {max-width: none; padding: 6px 0px; }

    Thanks for the tips, and proving that your framework is awesome.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The forum ‘The Arcadian Responsive WordPress Theme’ is closed to new topics and replies.