Twenty Twelve Theme – Code Child Style Sheet for Moible

  • 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.

Viewing 1 replies (of 1 total)

  • 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)

    https://www.w3schools.com/css3/

Viewing 1 replies (of 1 total)
  • The topic ‘Twenty Twelve Theme – Code Child Style Sheet for Moible’ is closed to new replies.