I just integrated Nextjs SSR into my React project. Before this, my css media queries for mobile-responsiveness were working perfectly. Now, when I use Chrome's tools to view my app on a mobile screen size or even on my own device, I get the view as if it's on desktop.
It seems like the server is rendering the entire page and assuming desktop size and not re-rendering when it hits the client. If that's the case, how do I tell it the user is mobile and to use those CSS queries?
Here are my media queries that don't seem to be working. I'm not using CSS in JS, maybe I should be? I'm using regular css files for each component.
.Footer {
width: var(--webMaxContentWidth);
height: 200px;
background: #368efb;
display: flex;
flex-direction: column;
justify-content: center;
}
#media (max-width: 768px) {
.Footer {
width: 100%;
height: 400px;
margin: 0 20px;
}
}
Any help is appreciated!
Before, React was automatically inserting the following in the <head> of your SPA:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Once you moved to SSR, the responsibility moved to the developer to add this bit themselves. Without it, you'd have some very unexpected behavior when it came to #media query breakpoints. As you discovered after resolving your issue, this has been solved already.
Related
I feel like a complete idiot...
This is the simplest of things but it doesn't work in any browser with the exception of Firefox.
I'm declaring it in the head / style section of the html
Any help will be greatly appreciated - CES
body {
background-color: yellow;
font-size: 1vw;
}
#media screen and (max-width: 800px) {
body{
background-color: red;
}
}
The issue is in the head and a missing meta tag... in order for you to use the Developer Tools Device Spacific breakpoints in Chrome, Edge and Safari you MUST include:
meta name="viewport" content="width=device-width, initial-scale=1.0"
While it works without including it when you View the page in the browser, in order to use the Developer Tools it has to be in the head.
I am building a VSCode Webview that exposes a more complex tool for usage in VSCode....
So... See below for example
This code works fine for starting up the Builder tool. BUT, I have a bug somewhere in that tool in the VSCode environment (maybe file access issue)...
So, I opened the Webview Developer Tools - and can do the usual look at the elements, etc... BUT when I get to the iframe (with html provided from the iframe src Builder), I cant look into that iframe, cant debug anything in it.. Normally in Google dev tools, I can walk into nested iframes just fine. I get no error or other indication. The display in the WebView clearly has significant UI, but no way to debug it that I have found....
Any help is appreciated.
private getWebViewContent(webview: vscode.Webview): string {
const initialHTML = `<!DOCTYPE html>
<html lang="en">
<head>
<title>LBF EMail Builder</title>
<style>
html { width: 100%; height: 100%; min-height: 100%; display: flex; }
body { flex: 1; display: flex; }
iframe { flex: 1; border: none; background: white; }
</style>
</head>
<body>
<iframe id="lbfemailbuilder" src="http://localhost:3000"></iframe>
</body>
`;
return initialHTML;
}
You have to ask the dev team to reopen this issue:
https://github.com/microsoft/vscode/issues/105370#issuecomment-717157594
Hello everyone i am using media query in my asp.net MVC CSHTML page but it is not working ,It is not showing the element my code is fallowing
##media (min-width: 320px) and (max-width: 480px) {
.MenSection{
height: 600px;
width: 460px;
}
#menuicon{
display:table;
}
.trMobile{
display:table;
}
#AboutDetails{
margin-top:8px;
margin-left:5px;
padding-left:5px;
padding-top:1px;
display:list-item;
}
#SocialLogin{
width:auto;
}
.AboutDetailsHed{
font-size:18px;
margin-left:5px;
}
}
Here AboutDetailsHed,SocialLogin,AboutDetails is working properly and above three is not working please help me
Have you tried adding a responsive meta tag to your html document?
<meta name="viewport" content="width=device-width, initial-scale=1">
It'll be difficult for us to determine how to help you since the syntax is correct. So, here's a simple way to debug your issue.
Since the media query is being added into your context, you need to see why some are not being applied to your elements.
Let's assume you are using Google Chrome browser to debug (emulate a mobile device)
Navigate to your element in the "Elements" pane in dev tools (F12). Go to your element and view the styles for that element. You should see all applied styles. It could be that the style you are setting on the media query is being overwritten by another style.
If that is the case, you need to make sure your media query is added later in your context. Perhaps append !important to your style property's value.
I'm trying to hide an image when the screen/viewport has a width over 900px. For some reason, this is not working in a very basic example.
I have an extremely simple component for my footer -- it's functional, no state or methods, and it's only nested under the Main component.
I'm including the styles for the footer in the component so it's completely localized. For some reason, in this most basic example, #media doesn't seem to be working.
When I open Chrome devtools, I do see the media query being attached to my element at the appropriate breakpoint, but the style is not being applied even though my screen width is well over 900px. The styles declared in my media query are crossed out. So my element is choosing to maintain the original styles and blocking the media query for some reason. If I add a style in the media query that is not already present in the original class, it is applied.
I have included the following in head in index.html
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
I'm also using React Router (if that makes any difference).
Is React preventing media queries from working? Am I making an extremely dumb mistake somewhere?
Here is my component -- the div with className 'logo' is what I'm trying to toggle:
import React from 'react';
import { Link } from 'react-router-dom';
import './footer.component.css';
function Footer(props) {
return (
<div className="footer">
<span className="column">
<div className="social-column-container">
<img className="logo" src="./images/logo.jpg" alt="kimbyarting logo" title="kimbyarting logo" />
<div className="social-icon-container">
<div className="social-icon"></div>
<div className="social-icon"></div>
<div className="social-icon"></div>
<div className="social-icon"></div>
<div className="social-icon"></div>
</div>
</div>
</span>
</div>
);
}
export default Footer;
Here's the relevant CSS:
/* Small desktop */
#media only screen and (min-width: 900px) {
.footer
.column
.social-column-container
.logo {
display: none;
}
}
/* Mobile */
.footer
.column
.social-column-container
.logo {
width: 100px;
height: auto;
display: inline-block;
margin-left: 50px;
}
Any help is greatly appreciated!
Update
If the regular class definition and media definition have the same class hierarchy, the media styles are always overridden. However, if the regular definition has any fewer class hierarchies defined, this works.
I've confirmed, by removing all parent 'display' styles, that no other class immediately seems to be causing the style to override.
What is overriding the styles? Why is this happening when I follow best practices and have a good hierarchy defined for CSS classes?
It's not the problem with react its with the css code. If you apply two rules that collide to the same elements, it will choose the last one that was declared. So put the #media queries to the end of the css page. i.e
.footer
.column
.social-column-container
.logo {
width: 100px;
height: auto;
display: inline-block;
margin-left: 50px;
}
#media only screen and (min-width: 900px) {
.footer
.column
.social-column-container
.logo {
display: none;
}
}
I had some issues starting from a ReactJS perspective, but it turned out to be a Chrome issue.
For Chrome specific issues not applying your CSS media queries (and not the issue as answered above), add this in your <head> section.
<meta name="viewport" content="width=device-width,initial-scale=1">
I had the same issue but after putting media queries below all the CSS code it is working smoothly. It's because when you apply styles to same elements CSS will choose the code which was declared in the last.
Well, I'm not sure I got the difference between mobile first and non mobile first responsive layout?
This is what I know, and probably something is not right:
Use Media queries with CSS (also for non mobile first layout)
Create a layout by starting from mobile and not from desktop version
I've saw there's a difference between bootstrap setting and foundation setting, is it important for that difference?
<!-- Bootstrap -->
<!-- I've read it's not mobile first -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Foundation -->
<!-- I've read it's mobile first -->
<meta name="viewport" content="width=device-width">
At the end that's all I know, is there something more to know about it?
Where i can find a good guide?
Just as it says....
"mobile first" and "non-mobile first" layout.
Mobile first means from the start, it is made to look how you want it to look in mobile. Then in most cases you then use min-width media query to adjust according to larger screen sizes.
Non-Mobile first means you design it for desktop or large screens first. Then in most cases using max-width media query to go back and make it look better in smaller/mobile screens.
I hear there are problems with browser's understanding min-device-width and max-device-width. Just use min-width and max-width.
If your designing a responsive theme, it is best to start mobile first.
Watch This Video: http://www.youtube.com/watch?v=-BVmrSG93XE
Article here provides important details.
What is mobile first?
Mobile first, from a coding perspective, means that your base style is typically a single-column, fully-fluid layout. You use #media (min-width: whatever) to add a grid-based layout on top of that.
The alternative – desktop first – involves starting with a wide, grid-based layout, and using #media (max-width: whatever) to scale down to a single-column layout.
Why mobile first?
iPhone and Android browsers are quite capable, but older smart phones, feature phones and other small-screen devices like gaming consoles may not support media queries.
Imagine trying to read tiny text in a big screen layout on an old, underpowered feature phone.
Mobile first web design extends progressive enhancement to site layout, allowing you to serve simple, readable content to all devices, and layer on structure and presentation for more capable devices.
An example of Mobile First from the latest Dreamweaver 6 Fluid Layout is as below -
/* Mobile Layout: 480px and below. NOTE: No Media Query line here*/
.gridContainer {
margin-left: auto;
margin-right: auto;
width: 87.36%;
padding-left: 1.82%;
padding-right: 1.82%;
}
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout.*/
/* NOTE: Now from here media query lines are added for Tablets and Desktop */
#media only screen and (min-width: 481px) {
.gridContainer {
width: 90.675%;
padding-left: 1.1625%;
padding-right: 1.1625%;
}
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
}
/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */
#media only screen and (min-width: 769px) {
.gridContainer {
width: 88.2%;
max-width: 1232px;
padding-left: 0.9%;
padding-right: 0.9%;
margin: auto;
}
#LayoutDiv1 {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
}
Hope it helps.
EDIT: Another article here which explains above example with a little more details. Excerpt as below -
Progressive Queries
Since some older mobile devices may not support media queries at all,
bottling up the small version of your CSS rules inside a query may
keep it from recognizing what CSS it can render within it. Instead of
this, it may be a good idea to have the smaller version be the
"default", while adding in the additional CSS rules for larger screens
via media queries (since desktop browsers are more likely to recognize
the media queries).
Supporting IE and older browsers
css3mediaqueries.js
respond.js
With a mobile first viewpoint, we start by loading the absolute bare essentials on the smaller platforms. This leads to a snappier experience that avoids unnecessary lag. The additional resources are loaded strictly on an as-neeeded basis to platforms that can handle them well.
Look at:
http://www.slideshare.net/splashomnimedia/desktopfirst-vs-mobilefirst-web-design