[Solved] CSS class for Radio/Checkbox choices on mobile devices

0

Sorry if this has been asked/answered, and apologies for posting this question accidentally in the comments of a “solved” question so I’m not sure it will be addressed…

I’m working on a survey that looks great on desktop. Several questions display a long list of choices nicely side by side in 2 columns.

On mobile this doesn’t look great and I know enough CSS to either force them into 1 single column, or to at least remove the black border around them.

I just need the CSS class descriptor. How might I find that? Is there documentation for all of the IDs and classes used in the HTML/CSS?

Thanks! Apologies for double posting.

Jeri Burtchell90 asked

    Best answer

    0

    Hi Jeri! No worries about posting your question as a comment – we are still getting up to speed with Community as well

    Simply knowing the names of the classes for these answer options is not likely to be enough information to efficiently accomplish your goal of displaying answer options in one single column on mobile, due to how those multiple columns are set up.

    What will be helpful in accomplishing this goal is a set of tools built in to modern browsers, called the “browser developer tools”. These allow you to inspect the actual structure (or “DOM”) of a web page, view all of the class names and/or IDs assigned, as well as the actual styles that are being applied to each element on the page. Changing the display or behavior of an element is vastly easier when you can directly see the structure of the page and how the current display has been achieved.

    This page from the Mozilla Developer Network may be a helpful introduction to the browser developer tools for you:

    https://developer.mozilla.org/en-US/Learn/Discover_browser_developer_tools

    In the case of multiple columns of answer options, here’s a screenshot showing these elements highlighted with the browser developer tools:

    At the bottom of the screen is the structure of the page, and to the right is a list of currently applied styles. When hovering your mouse over a specific style, a checkbox will appear that you can uncheck to see what it would be like to remove that style. As a hint for you for this specific goal, try unchecking the “float: left”, and “width: 50%” styles that you see for .sg-type-radio. You should see the two columns disappear, and be left with one nicely formatted column

    If you have trouble coming up with a selector/rule combination to mimic unchecking those checkboxes, I highly recommend Shay Howe’s Learn to Code HTML & CSS series.

    I hope this information helps!

    Nathan - Survey Astronaut answered
      0

      Thank you so much for all of the helpful information!

      Jeri Burtchell90 answered
        ×

        Login

        Question stats

        • Active
        • Views694 times
        • Answers2 answers
        • Followers0 followers