Media queries don't work well on different size screens

media query breakpoints 2019
responsive media queries for all devices
media query css for all devices
media query for firefox
media query not working
bootstrap media queries
css tricks media queries
multiple media queries

I have used media queries to design some parts in my website. For example, I have setted certain settings for 1920 px width screen resolutions, but they look different on my 15" laptop and my 25" desktop screen. They look way different. How can I make them look pretty much the same?

@media (min-width: 1920px) {
  #bluetitle {
    padding-right: 357px;
  }
}

@media screen and (min-device-width: 1200px) and (max-device-width: 1600px) {
  #bluetitle {
    padding-right: 235px;
  }
}

@media screen and (min-device-width: 1601px) and (max-device-width: 1919px) {
  #bluetitle {
    padding-right: 310px;
  }
}
<h5 class="elementor-heading-title elementor-size-default">
  <p dir="rtl"><span id="bluetitle">Title<font color="#dff2f6">.</font></span><span style="font-family: Heebo, sans-serif; font-size: 1.938em; font-weight: 600;"></span></p>
</h5>

Did you try by adding this meta tag to the html document? And try to give % values for paddings / margings

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Logic in Media Queries, Just in case you have brain farts about this constantly like I do. If That's what media queries are: logical if statements. "If" these things are true. Media queries have been around since 2009. They are operators that let designers and developers add conditions to their styling. For example, you can tell a browser to apply a color to an element only at a certain screen resolution, orientation (landscape or portrait) or size.

I don't think you need the media queries in that case ! Just set : text-align: right on the title container and keep the padding right on the title if you want to.

#bluetitle{
    padding-right:...px;
}

p{
    text-align:right;
}

Using Media Queries For Responsive Design In 2018, You don't need to change anything about the markup to do so. I start with a single column grid for narrow widths. grid { display: grid;  Media Queries not working: What am I doing wrong? My media queries do not work in Firefox (latest version). I have referenced my responsive.css files properly (I believe) and am certain I'm missing something in the CSS portion.

I just tested this CSS with the Inspect element on your website and it seems to be alright.

Try setting your CSS like so:

#bluetitle {
    background-color: #dff2f6;
    padding-right: 1%; /* You can edit this as per your needs */
}

IMO, you do not need the @media queries as in the test, your website was looking fine without the @media queries.

CSS Media Queries: Quick Reference & Guide ← Alligator.io, CSS media queries are the most powerful way to create responsive layouts older browsers don't understand the only keyword so the entire media query is  Every device will download all media queries, even if they do not currently meet the media query requirements. – cimmanon Aug 13 '13 at 11:23 Interestingso it's a bit of a misnomer if it doesn't selectively load based on the parameters in the media attribute – mikedugan Aug 13 '13 at 11:35

Beginner's guide to media queries, In this lesson you have learned about media queries, and also This means that you probably don't need to do a lot of layout for small devices  Media queries can’t solve this problem as they only look at features of the entire screen, and so in this way, new layout gives us something media queries can’t. You can see the component constrained by the viewport (resize the window to see the flexibility) and by a wrapping element, in the below CodePen.

CSS Media Query don't working in css file, @media only screen has different definition with @media screen . The keyword '​only' can also be used to hide style sheets from older user  Before we can figure out what media query breakpoints to use, we need to look at what devices we're designing for. I've dug into some common device resolutions, and most can be grouped into categories. I've listed these categories, along with the resolutions they cater to: Mobile portait (320px to 414px) — For devices with 4" to 6.9" screens.

Media Queries: Width vs. Device Width, Many tablets and mobile devices don't always have 1 device pixel per CSS pixel. The iPhone 4, for example, has 2 device pixels per CSS pixel. When troubleshooting responsive designs and media queries, also keep in mind that the media query will be triggered by the viewport size of the device. Viewport sizes can vary drastically based on the physical screen size of the phone, the screen's resolution and the pixel density or device-pixel-ratio of the device.

Comments
  • My suggestion would be to use percentages when defining padding-right. That will allow more consistency across different screen sizes.
  • I agree with @HamzaAhmad use percentages
  • px is a relative unit. 1px in 24" screen is not same as 1px in 15" screen. Use percentages instead for consistency.
  • For some reason when I added percentage units nothing has happened.
  • But I still want it to look good on different resolutions, not just the 1920px width
  • I just added that and nothing has happened, I even added !important
  • @media (min-width: 1920px) { #bluetitle { padding-right: 40% !important;} } I needed the media queries because on different screen resolutions it looked different.
  • @RoziBuber Did you try setting it without the media queries? Defining padding-right percentage means it will keep the same distance from the right no matter what screen size