Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Design Viewport difference on two sites is a head-scratcher

  • This topic is empty.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #270106
    dutch
    Participant

    I’m a low-skilled coder working on this very simple site: http://www.textarts.com/

    I’m using the same “viewport” settings in its header as I used at this other simple site: http://www.markgarvey.com/

    BUT, I’m not getting the same kind of responsiveness on textarts as I get at the other site: Namely, on the textarts site, when I shrink the window down, neither the text nor the header image scale down. When I do that on markgarvey, things scale down.

    I can’t figure out what’s different. Any help appreciated!

    Thanks,
    Dutch

    #270108
    Beverleyh
    Participant

    #wrap and #main have fixed widths of 700px and 600px – they’re going to burst out of smaller viewports (hello horizontal scrollbar) and wreck any fluid resizing. Try changing width to max-width and see if that helps. I haven’t as I’m on mobile.

    #270110
    dutch
    Participant

    Thanks for the note, Beverley. I tried your suggestion, and that throws my header and main text area over to the far left, and I lose my right margin, so at full screen (I’m on a desktop), the text goes all the way across my screen. I need to somehow constrain the design to the middle of the page at a width I like, but make it at least minimally responsive to the down-sizing (as at http://www.markgarvey.com).

    #270111
    Beverleyh
    Participant

    Unfortunately I can’t see any of the behaviour you describe from mobile, but if you transfer the problem elements, and their related CSS, over to a minimal CodePen demo, it will be easier for me, and others, to see the problem and suggest fixes.

    Note that we only need the bear minimum to demo the problem – best to strip back all uneccesarry properties (e.g. fonts, and other stuff that has no effect on layout) to keep the code as short as possible.

    That said, are you aware of media queries? If not, look in to those so that you can use different CSS at different viewport widths. You’ll then be able to override the aforementioned fixed width values for #wrap and #main below the 700px/600px threshold.

    #270112
    dutch
    Participant

    Thanks again. I will put the code on code pen–and will try to keep it minimal, if I can figure out what’s necessary and what’s not!

    I’ll also look into media queries; I was not aware of that.

    Will repost when I get the code pen up.

    #270113
    dutch
    Participant

    Not sure I’m sharing the Code Pen correctly, but here tis:

    https://codepen.io/Dutchg/pen/GdpJqx

    Thanks!
    Dutch

    #270114
    Beverleyh
    Participant
    #270115
    dutch
    Participant

    It’s not working on my desktop. When I size the browser window down, right side of text is cut off and horiz scroll appears.

    http://www.textarts.com/images/viewport_test.png

    #270116
    Beverleyh
    Participant

    Strange. It works (layout shrinks down without scrollbars) with the noted alteration in CodePen on mobile. I haven’t come across a circumstance before where the desktop version of CodePen displays differently. Unfortunately I won’t be at a desktop for a few days to check/compare otherwise. Sorry.

    #270117
    dutch
    Participant

    That is strange. I appreciate all your help, Beverley. Perhaps someone else will chime in soon from a desktop. If not, and if you think of it when you’re back at a desktop, I’d appreciate your giving it a look.

    Thanks again,
    Dutch

    #270120
    dutch
    Participant

    I played around some more and arrived at a solution that’s working for me now. I added “max-width: 100%” to both the wrap and main css statements, but left my “width: 700px” and “width: 550px” in, too.

    I also had to set these img attributes:

    img {
    max-width: 100%;
    height: auto;
    }

    Back on track now, though probably not exactly the most elegant code around.

    http://www.textarts.com

    Thanks for the help.

    Dutch

Viewing 11 posts - 1 through 11 (of 11 total)
  • The forum ‘Design’ is closed to new topics and replies.