Browsers cutting off right portion of wide images

  • billy-not-happy

    (@billy-not-happy)


    10 years, 11 months ago

    This is strange. I’m using a responsive theme that is suppose to automatically adjust the size of content to match browser resolution. It does IF browser is in portrait mode but refuses if in landscape mode. Just the opposite of what you’d expect since landscape mode typically almost twice the resolution on the long dimension.

    I’m using latest version of WordPress. Latest versions of IE 10 and Chrome.

    Now here’s the kicker, works fine on desktop, works fine on a tiny screen of my cellphone (Samsung Galaxy SIII but not on a ASUS Tablet.

    Can someone confirm they see the same thing or what if anything gets cut off on the right side? I’m referring to the top image on the linked page below. The desktop computer and tablet both set to 1920×1200 the cellphone just 1200, but it handles it with no issue.

    Only effects pages where there’s a wide graphic like on this page:

    http://www.be-awesome.org/exercises/abdomen/

    The image is just 990 pixels wide so SHOULD easily fit when viewed at resolutons of 1920×1200. Anybody know what’s going on?

Viewing 4 replies - 1 through 4 (of 4 total)
  • CarletonU

    (@carletonu)

    10 years, 11 months ago

    The container for the site content has a set width, and using a CSS property of overflow:hidden (more about that here), anything larger than the maximum width will not be displayed. Looks like the full width of the content area on your site is 794px, you should use images that are no larger than that.

    Pioneer Web Design

    (@swansonphotos)

    10 years, 11 months ago

    There is more to it than that…

    You have CSS in your page, that is directly in the page and not in a stylesheet and you have style-default.css each using some of the same CSS styles…

    This can and will confuse things…we need the !important element on at least one (or figure out a better way about this –

    If we make .pageWrapper a fixed width and .top-menu-bar the same width (1100px let your content all fit) it looks ok

    Now, we also have these two lumped together in the page (not in style-default.css), this fixes it

    .pageWrapper, .top-menu-bar {
width: 1100px !important;
}

    Thread Starter billy-not-happy

    (@billy-not-happy)

    10 years, 11 months ago

    Thanks guys. I have a similar statement:

    `

    .pageWrapper, .top_menu_bar { width: 64% !important; }

    Which I played around with having it set as high as 98%.

    I changed to 1100px, and tried other values.

    Results are mixed.

    Now the pages on desktops have far too wide a margin of unused space… I hate that look, but it does work better on the ASUS tablet, so I guess a trade-off.

    It just bugs be you go out and buy a monitor or tablet that supports 1920×1200 resolution and to makes thing work you set it to roughly half.

    Somebody explain why the ASUS tablet is so anal, I’d love to know.

    Pioneer Web Design

    (@swansonphotos)

    10 years, 11 months ago

    Somebody explain why the ASUS tablet is so anal, I’d love to know.

    It likely uses a mobile browser..responsive themes (CSS) take viewport size into consideration. Also, force a page refresh in each browser after site changed – you may also need to clear that browsers cache.

    You can make the site as wide as you want…

    This is theme/css dependent…

    Such theme/css will include:

    @media screen and (max-width: NNNpx) NNN equal viewport width.

    Note: It is more important to most dev’s to deliver content well to all screen sizes, not just newer, bigger ones…

    Also, on very wide screens, I use two windows side by side – works nice!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Browsers cutting off right portion of wide images’ is closed to new replies.