Need quick css/media query help

So working on this site http://www.rapidturtles.org for a friend - for his guild in an online game he plays. When viewing the site full screen on a computer/laptop he wants the site width around 1000px (instead of the 940px the theme is set too) without losing responsiveness for other screen sizes. I know this can be accomplished fairly easily with css and media queries, but I'm still very new with learning css and can't seem to figure out the solution on my own.

  • Milan
    • WordPress Wizard

    Hello @TJ,

    I hope you are having a good day and thanks for the asking. :slight_smile:

    Please try out this css snippet.

    /* ----------- Non-Retina Screens ----------- */
    @media screen
      and (min-device-width: 1200px)
      and (max-device-width: 1600px)
      and (-webkit-min-device-pixel-ratio: 1) {
        .container{
          width: 1000px !important;
        }
    }
    
    /* ----------- Retina Screens ----------- */
    @media screen
      and (min-device-width: 1200px)
      and (max-device-width: 1600px)
      and (-webkit-min-device-pixel-ratio: 2)
      and (min-resolution: 192dpi) {
        .container{
          width: 1000px !important;
        }
    }

    Above snippet will target laptops devices. I suggest you use this nice plugin for managing css code snippets,
    https://wordpress.org/plugins/simple-custom-css

    I suggest you go through with this article, this nice article covers different possible media queries for standard devices. :slight_smile:

    https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

    I hope this helps you.

    Please let me know if there is anything else I can help you with.

    Best Regards,
    Milan Savaliya.

  • Milan
    • WordPress Wizard

    Hello @TJ,

    I hope you are having a good day.

    I've found below css code snippet in head tag of page.

    .container{
          width: 1200px !important;
        }

    I am not sure from where it is coming, will you please first remove this ? Also Please use below code snippet instead of last one.

    @media screen
      and (min-width: 1200px)
      and (max-width: 1600px)
      {
        .container{
          width: 1000px !important;
        }
    }

    Let me know how it goes for you. :slight_smile:

    Best Regards,
    Milan Savaliya.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.