Question 345609 in CSS Question posted in
Some basic documentation can be found here.

Css – Media Queries: How to target mobile Desktop Site?

I have been working on my website i have used various media queries to work well in every screen size. I’m aware about the media queries for every screen. I have also read this page

Media Queries: How to target desktop, tablet, and mobile?

It was very useful. But My question are when i use my website on mobile it working fine but when i do in Desktop site in Mobile their content is breaking can anyone tell me Media query for that scenario.
Thank you

I have used this:-
@media screen and (min-width: 300px) and (max-width: 700px)— For Mobile

Other two i used for to get resolve my problem that i asked above :-

  • @media screen and (min-width: 701px) and (max-width:767px)
  • @media screen and (min-width: 768px) and (max-width:975px)

I haven’t use below 2 media query because after using this they affecting my desktop view.

  • @media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
  • @media (min-width:1281px) { /* hi-res laptops and desktops */ }

Can anyone tell me how can i resolve the issue.

Tags:

2

Answers


  1. 0

    This can happen if your media queries aren’t properly targeting the appropriate ranges of screen sizes. Here’s a revised set of media queries that might help address your issue.

    /* For Mobile */
@media screen and (max-width: 700px) {
  /* Your mobile styles here */
}

/* For Tablets */
@media screen and (min-width: 701px) and (max-width: 1024px) {
  /* Your tablet styles here */
}

/* For Desktops */
@media screen and (min-width: 1025px) {
  /* Your desktop styles here */
}

    With these media queries:

    1. Mobile styles will apply to screens up to 700px wide. Tablet styles

    2. will apply to screens between 701px and 1024px wide. Desktop styles

    3. will apply to screens wider than 1025px.

    Make sure your styles within each of these media queries are appropriate for the respective screen sizes. This should help prevent layout breaking when viewing the site on a desktop in mobile mode. Also, ensure that you’re not unintentionally overriding styles across different media queries. Using specific class names or IDs for elements can help prevent unintended styling conflicts.

    Login or Signup to reply.
  2. 0

    It is not a good way to provide specific media queries for every screen size,
    Here is basic media queries for commonly use for devices:

    Mobile

    only screen and (min-width: 360px)

    only screen and (min-width: 480px)

    Tablet

    only screen and (min-width: 768px)

    Desktop

    only screen and (min-width: 992px)

    Huge

    only screen and (min-width: 1280px)

    Some times i prefer 2 media queries for phone screens
    these media queries are enough for all screens if your code structure is good and you are not using extra margin and paddings these are the reasons which affect the media queries.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search