content resize to fit different screen dimensions

  • Resolved lala100

    (@lauren-and-joe)


    11 years, 6 months ago

    I’ve been making a twenty eleven child theme on my laptop, which has an 11″ screen. Everything looks as it should on my computer. However, my sister said that the content looked kind of small on her larger desktop computer screen.

    At the moment, it looks like the post width for my 11″ screen is 4.25″, and the post width for her 18″ screen is 4.75″.

    How do I change my style.css file to make the content change size more dramatically based on screen size?

    https://www.GrimmAles.com

    Thanks

Viewing 10 replies - 1 through 10 (of 10 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    You could zoom your website in after certain widths:

    @media all and (min-width: 11in) {
 body {
  zoom: 1.2;
 }
}

    Thread Starter lala100

    (@lauren-and-joe)

    Hmmm… I don’t think that worked, but I’m not sure why. Maybe I’m missing something else in my style.css file. I’ve erased a bunch of stuff as I’ve been making my child theme. Let me know if you have any ideas.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    You’re missing the colon…

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    You also have the media query within a media query…

    Thread Starter lala100

    (@lauren-and-joe)

    Thanks Andrew! I’ll try it out later tonight and let you know how it goes.

    Thread Starter lala100

    (@lauren-and-joe)

    It looks like I still need some help…
    I don’t see where I’m missing a colon, but I did just add a bracket to close the other media query. Does it look right to you?
    Thanks so much!

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Always put new CSS right at the bottom of the stylesheet.

    but I did just add a bracket to close the other media query.

    Sorry, not correct. You need to just move that CSS I recommended above, move that outside of the media query. It should sit at the bottom of your stylesheet.
    That means fixing this style as well:

    img#wpstats {width:0px;height:0px;overflow:hidd

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Regarding the colon, compare my CSS:

    @media all and (min-width: 11in) {
 body {
  zoom: 1.5;
 }
}

    With yours:

    @media all and (min-width: 5in) {
 body {
  zoom 1.5;
 }
}

    https://www.w3schools.com/css/css_syntax.asp

    Thread Starter lala100

    (@lauren-and-joe)

    It worked! I appreciate your help so much. Thank you!!!!!

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Nice one ??

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘content resize to fit different screen dimensions’ is closed to new replies.