your textI am practicing Grid with this design. when I created @media for the design, the css doesn’t change from width full screen to phone screen. I did insert "<link rel="stylesheet" href="./css.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"/>" here is my html code: <div class="appdiv"> <p class="apptx">Download <br>Our App</p> <p><br>Order your favorite food from your phone!!<br> To… Read More Css media doesn't work when i re-size the screen

I am trying to use a media query like this: .search-results { width: 1000px; padding-top: 100px; margin: 0 auto; @media (max-width: 900px) { width: 100vw; padding-top: 40px; } } to make it look good in mobile, it works in chrome devtools, but the width stays the same in mobile. Here are the screenshots: mobile desktop… Read More Media query works in devtools, but not on mobile device

I am making a responsive layout. I’ve developed it mobile first, and the main container has a margin-inline: 1rem;. When the viewport grows to desktop size, I want to limit the width of the container to 500px and I want it to remained centered. Here’s a visual representation for mobile and desktop, respectively: .mobile {… Read More In CSS, is there a way to set margin-inline to auto on desktop but 1rem on mobile, without using a media query?

`@media screen and (max-width: 768px) { .my-element { font-size: 16px; } } @media screen and (min-width: 768px) and (max-width: 1024px) { .my-element { font-size: 18px; } } @media screen and (min-width: 1024px) { .my-element { font-size: 20px; } }` I was expecting the font size of .my-element to adjust based on the screen size, but… Read More I'm trying to create a responsive design that adjusts to different screen sizes using CSS media queries. Can someone help me figure out what's wrong

If I want to change the shape of a website page with a width and height of 600px and change its shape. Which one should I use? Max width/height Or Min width/height. 🤔 I hope you can help me in this matter that I asked about media query in css >Solution : A maximum width… Read More Changing the page size of the site by media query in CSS

I have just uploaded my website and have been having some problems with @media css tags. On my website on my desktop the scaling works and when i go into inspect and make the resize the page to make it smaller it resizes. The problem is when i go on the website on my phone.… Read More My Media tags don't work on my website when using my phone

I need to detect the user’s iPhone model and if it’s lower than iPhone X (e.g. iPhone 8) – not to run some powerful logic (camera access and face masks via webGl), because weak devices can’t run it without crashing (( So is there any way to identify the iPhone model using js? I was… Read More Is there a way to detect iPhone model using js?

I’m trying to slice objects whenever the screen is 600px and down, I’m using this code in react to know if the screen is 600px or down const [matches, setMatches] = useState( window.matchMedia("(max-width: 600px)").matches ) useEffect(() => { window .matchMedia("(max-width: 600px)") .addEventListener(‘change’, e => setMatches( e.matches )); }, []); I’m trying to show pictures return… Read More How to use .slice with media query

I’m trying to get some rudimentary media querying to work, but for some reason the div using the class "container" isn’t working on the media query using max width:1200px and min width: 992, it just dissapears from page when I enter that size. I have a very simple example set up and I don’t understand… Read More Why is my media query not working as intended?

Even though I have added display:none or display:hidden, the container doesn’t hide. Code: <div className="button-container"> <div className="cart-button" style={{ marginRight: "20px" }}> <p style={{ textAlign: "center" }}>Login</p> </div> <div className="cart-button"> <p style={{ textAlign: "center" }}>Cart</p> </div> </div> @media screen and (max-width: 480px) { .button-container { display: hidden; } } Codesandbox link: https://codesandbox.io/s/hardcore-platform-yzcz6m?file=/src/styles.css >Solution : Setting display… Read More display hidden doesn't work with media query