Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
At 5th grade level...what makes a site responsive?
Often chasing links from Twitter, G+ or email, I wind up in Chrome on a 4.25” (diagonal) Android phone. Lately, I’ve been amazed at the font sizes and the “rearrangement” of sidebars, etc. that makes viewing these sites enjoyable on that size screen.
For a rookie, who has been looking at this stuff for years, but still doesn’t “get it,” what line or lines of HTML and/or CSS are causing these sites to look one way on a laptop and another on a cellphone? And, is that “feature” built into Textpattern now? Thanks.
“Well, I, uh, don’t think it’s quite fair to condemn a whole program because of a single slip-up, sir.” General ‘Buck’ Turgidson
Offline
Re: At 5th grade level...what makes a site responsive?
It’s mainly to do with media queries in CSS. Basically you can provide rules based on a viewport size. You may have come across the phrase ‘mobile first’, which means start your design for mobile the add rules at various media breakpoints to add extra styling as the viewport expands.
And yes, Textpattern as of v4.5 onwards has a responsive default theme.
Offline
Re: At 5th grade level...what makes a site responsive?
Responsive site is done by using media queries in the style sheets.
Basically, browser looks into your css and applies all styles that are suitable for it. For example – media type screen will be used for those viewers with visual displays. If there is a separate media type with restriction by width and viewer has width that is suitable, then this media rules will be applied too. Also all rules defined outside if media type will be applied too.
My English is bad – keep that in mind while reading this post :(
Offline