- This topic is empty.
-
AuthorPosts
-
April 21, 2018 at 4:48 am #270106dutchParticipant
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,
DutchApril 21, 2018 at 5:39 am #270108BeverleyhParticipant#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
tomax-width
and see if that helps. I haven’t as I’m on mobile.April 21, 2018 at 5:55 am #270110dutchParticipantThanks 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).
April 21, 2018 at 6:23 am #270111BeverleyhParticipantUnfortunately 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.April 21, 2018 at 7:15 am #270112dutchParticipantThanks 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.
April 21, 2018 at 7:38 am #270113dutchParticipantNot sure I’m sharing the Code Pen correctly, but here tis:
https://codepen.io/Dutchg/pen/GdpJqx
Thanks!
DutchApril 21, 2018 at 9:20 am #270114BeverleyhParticipantThis seems to have the desired affect in the CodePen demo https://css-tricks.com/forums/topic/viewport-difference-on-two-sites-is-a-head-scratcher/#post-270108
April 21, 2018 at 10:07 am #270115dutchParticipantIt’s not working on my desktop. When I size the browser window down, right side of text is cut off and horiz scroll appears.
April 21, 2018 at 10:23 am #270116BeverleyhParticipantStrange. 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.
April 21, 2018 at 10:32 am #270117dutchParticipantThat 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,
DutchApril 21, 2018 at 12:58 pm #270120dutchParticipantI 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.
Thanks for the help.
Dutch
-
AuthorPosts
- The forum ‘Design’ is closed to new topics and replies.