addressalign-toparrow-leftarrow-rightbackbellblockcalendarcameraccwcheckchevron-downchevron-leftchevron-rightchevron-small-downchevron-small-leftchevron-small-rightchevron-small-upchevron-upcircle-with-checkcircle-with-crosscircle-with-pluscrossdots-three-verticaleditemptyheartexporteye-with-lineeyefacebookfolderfullheartglobegmailgooglegroupshelp-with-circleimageimagesinstagramlinklocation-pinm-swarmSearchmailmessagesminusmoremuplabelShape 3 + Rectangle 1ShapeoutlookpersonJoin Group on CardStartprice-ribbonShapeShapeShapeShapeImported LayersImported LayersImported Layersshieldstartickettrashtriangle-downtriangle-uptwitteruserwarningyahoo

CSS for Responsiveness

  • Sep 8, 2016 · 1:15 PM
  • This location is shown only to members

Last month we examined some beautiful websites, and everybody agreed that if any design didn't look good for a variety of window sizes, it needed work. 

How can a website detect the viewport's dimensions, and then deliver a more optimal experience for the user?

In this session we'll explore how themes are made responsive, and uncover the mechanism in Cascading Style Sheets that makes it possible to rearrange page elements in response to different devices.

You may wonder if this is information that you'll have any practical use for if you have no plans to build your own theme, but there is something to be said for understanding what's happening below the surface.

Let us start with a simple design, and then modify its style sheet so that the layout changes when the window size changes.

Join or login to comment.

  • Aldene G.

    The Responsiveness meetup was excellent. Thanks, Gary, for arranging it, and thanks to Greg, too, for contributing code. I intend to experiment to see if some of the same code can be applied to a non-WordPress site to push some of my older ones toward responsiveness. Missed Carole and 'brewer' Bob, but it was nice to have Andrea and Anjalik join the group.

    Unfortunately, I will be out of the area on Oct. 12. (I will be having fun in a nice area, though!)

    September 9

  • Rubeena Q.

    Thanks Gary for a very informative CSS for Responsiveness.

    September 9

  • A former member
    A former member

    Please forgive me, I really would love to come to this, and meet you all, but today I can't get out from under my work load. I'm always optimistic, perhaps beyond my capacity, but I hope to continue with this group.

    September 8

    • Gary G.

      Sorry, we missed you. Next month's topic is open right now. Any suggestions?

      September 8

  • Carol M.

    About whether it's useful to know media queries even if you have no plans to build your own theme, here's an example: For a Joomla website I'm developing, I didn't like the "template" header's responsiveness. On smaller screeens, the website title disappeared behind a menu button instead of getting smaller. Instead I wrote a "mini" set of media queries that applied to just the header's "module." For WordPress I would have added the CSS to a child theme. For Joomla I added the CSS to the custom CSS file that overrides the template's CSS.

    September 3

    • Carol M.

      The new media queries made the "H1" text within the module to be smaller, in four steps, according to the screen size.

      September 3

  • Carol M.

    Excellent WordPress topic, but unfortunately I'll have to miss this one because I'll be out of town.

    September 3

  • A former member
    A former member

    Hi! I am glad I see this! I wanted to come last month and only now discovered that the mail went into a different folder - I thought I never heard back!

    I am still trying to set up my page and am simply stuck with some steps. I think it is all easy for someone who knows the product, I just click around and don't find what I am looking for. Would anyone have time to meet up with me and do it together? I think we should be fine with sitting together for an hour. I would feel so much more ready for Thursday's meeting and would finally have my initial set-up! Please contact me!

    September 2

7 went

This Meetup is community funded


Member dues are used to:
  • Cover Meetup costs

90 day free trial

No credit card required

After the trial you must pay dues to be a member of this Meetup.

Cancel dues at any time.

Dues are billed each year.

Our Sponsors

People in this
Meetup are also in:

Sign up

Meetup members, Log in

By clicking "Sign up" or "Sign up using Facebook", you confirm that you accept our Terms of Service & Privacy Policy