WordPress.org

Ready to get started?Download WordPress

Forums

Twenty Twelve Theme - Code Child Style Sheet for Moible (2 posts)

  1. vinsprinter
    Member
    Posted 1 year ago #

    Hi,

    I am looking for some information on media queries in relation to styling for mobile and other devices when I am developing a website. Here is the scenario.

    I am using the twenty twelve theme to develop a new website.

    I have made a child theme (style sheet) that overwrites the main style sheet.

    The main style sheet is responsive, and it does responsive things when I reduce the browser.

    My Dilemma: I want to know how do I go about making the child stylesheet responsive like the main style.css.

    So when I drag the browser smaller the original twenty twelve theme responds but the additions that I have added using a single.php page and the child style sheet do not respond.

    So all the div's I have added do not break down and respond to the smaller size screen.

    If anybody out there can give me some help I would appreciate it. Even if you know of any good links where I can youtube it or read on google. I have found some tut's but I need it to be specific to the custom.css or child theme css. If that makes sense.

  2. Pioneer Valley Web Design
    Member
    Posted 1 year ago #

    What you will do is not use px in margin/padding, not use px for height/widths..look at and study the original CSS....

    An example:

    .style {
    max-width: 65%;
    margin: 1.5em 2%;
    padding: 0.75em 2.5%;
    line-height: 1.75em;
    font-size: 1.25em;
    }

    em (height) and % (width) are responsive CSS...px, not so much.

    So if you are trying to change the default:

    margin: 1.5em 2%;

    to have less margin at vertically:

    margin 0.75em 2%;

    or to change to have more margin horizontally:

    margin 1.5em 3%;

    bad: margin: 20px 30px;

    These respond well to the screen size in use!

    Now a math test (as at this point it's just math!):

    3% of 480px = ____
    3% of 320px = _____
    3% of 1024px = _____
    3% of 1920px = _____

    also see @media sections in parent stylesheet.

    Next class: Responsive CSS gradients! (and others tuts)

    http://www.w3schools.com/css3/

Topic Closed

This topic has been closed to new replies.

About this Topic