Responsive formatting of pages.

  • Hi,
    My page is mbwoodcraft.com and I have a very simple understanding of coding and websites. My theme is customizr.

    I am currently struggling with the Wood Samples and Gallery pages of my website. I set them up so that they look good on my laptop, however when I look at it on my phone or on a smaller screen the pictures change position and no longer look evenly spaced out. Is there a way to fix this. I don’t want them to become static and not change at all, I just wish that if the screen changed they would follow a different set out.

    Any help or advice would be super helpful. It’s a project I’m doing for my dad so I’m really quite out of my depth a lot of the time.

    Thanks in advance.

    Anita x

Viewing 5 replies - 1 through 5 (of 5 total)

  • Keep at it Anita. You need to look into CSS a bit more.

    Hopefully this might help you. Come back if not.

    Thread Starter anitamb

    (@anitamb)

    Looking at my page in the viewport resizer just showed me how awful most of my website looks in different formats.

    So if i want to adjust my website to this:
    /* ============================================== */
    /* iPhone4/Android portrait 320×480 */
    /* iPhone5 portrait 320×568 */
    /* ============================================== */
    @media screen and (max-width:320px) {
    /* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
    . . .
    }

    – i have to code it all from scratch for this screen?

    Not from scratch, just add the deltas (differences) from your main code. Remember that CSS executes code serially so if you use the same selector several times, the last one will be executed (in this case, you should move all your @media to the end of the style.css)

    Thread Starter anitamb

    (@anitamb)

    I’m really sorry but this makes no sense to me. I am not even a novice when it comes to computer speak. Sorry.

    Could you explain it in slightly simpler terms if possible.

    Sorry to confuse you. What I’m trying to say is that if your CSS has say 10 ‘selectors’, for example, a selector looks like this:

    p, li {
    display: block;
    font-size: 1.3em;
    line-height: 1.2;
}

    then you will probably have less than 10 selectors under the @media block. You only add what has changed, for example:

    @media all and (max-width:320px) {
p, li {
    font-size: 0.9em
}
}

    If you have the time, I suggest you try to teach yourself the basics of CSS. There’s lots of tutorials on YouTube.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Responsive formatting of pages.’ is closed to new replies.

Tags