I'm creating a project using react expo on top of react-native and react-native-web and I need to implement media queries for the responsive design.
How do I use media queries or how do you usually approach responsiveness in react-native-web? since that react native code is going to convert to web and I'd need features such as :hover and media queries.
#media (max-width: 576px) {
.container {
margin-left: 5px;
margin-right: 5px;
}
}
I've tried looking up packages for this, even though they may do the job, they will make it more complex and super hard to read/maintain. I thought there must be a better way.
This is so unopinionated in these technologies.
I'm trying to implement the css from a css file I used before if that makes sense.
Thank you :)
Related
Does anyone know is there a way to disable all the #media rules altogether in one shot? I simply want to stop all the #media rules coming from the external libraries that I’m using in my project that applies responsive css to different media types/devices.
Tried to tweak the viewport meta tag but didn't work as I expected.
I am asking this question here to get some information and ideas from the professionals. My question is I just start to learn Bootstrap 3.1 for my front end developments. So I have followed some basic tutorials regarding to the subject. With that tutorials, I found that the look and feels of every page layout have same structure and design. So I am afraid, Can we design advance and very different layout using Bootstrap 3.1?
Here I have attached a navigation bar. Someone can tell me, is it possible to design like this navigation bar using bootstrap 3.1?
I am not asking to someone to code this, just I ask this to make a strong sense about bootstrap 3.1.
hope someone pointed me out to the right direction.
Thank you.
Yes, it is easy to override any bootstrap styles you want.
It is designed to be usable out of the box, but also to provide good base styles in a logical way to be over ridden. The designers did not want to force you to use their styles.
If you use SASS or LESS, it will be easy. If you use the finished compiled CSS, it will be VERY tedious to edit.
I've built several apps entirely from Bootstrap 3, and most do not look like 'bootstrap' but use a ton of their base styles.
Simple answer, Yes you can. I don't think its that complicated to do. You can checkout the Grid system here in Bootstrap that meets your dimensions, it it doesn't meet then you always have your own custom grid made.
Hence you will have to do Media queries condition in your style-sheet on how will the site works on other devices.
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
#media (min-width: #screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
#media (min-width: #screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
#media (min-width: #screen-lg-min) { ... }
I am just asking, since didn't find anything relevant here.
Is using media queries together with display: none a legit thing for creating a mobile version of the web-site? I mean, is this an acceptable practice or is there another way to do so?
I just used it on a project, looks alright, but maybe there are some snags here?
Thank you in advance.
You could only work with media queries instead of having one default css. In that case you wouldn't need to set something that you don't use in other resolutions.
e.g.
put here everything which you don't wanna show in the lower resolutions:
#media only all and (min-width: 1024)
I use some CSS media queries on my Ektron site. They function correctly on the iPhone, but when I try simulating smaller screens on my production site, the breakpoints don't kick in.
Here's the strange part (to me, at least). When I view the site on my development server, the breakpoints work like a champ. The big difference is that on my dev server I've disabled CSS aggregation and minification. So it would appear that something about the css.register method in the framework API is (partially) breaking my responsive CSS. As I said, it seems to work correctly on mobile devices, but I would really like to know why it's not working on the desktop.
I've seen posts referring to minification routines used by certain platforms which break media queries (for example, they remove the word "and"). But that doesn't appear to be happening.
Has anyone else experienced this?
Here's a CSS snippet:
#media only screen and (min-width:320px) and (max-width:767px) {
/* phones, handhelds smaller than iPad */
#subnavbg {
visibility:hidden;
}
.login-left
{
border: none;
width: 100%;
}
.login-right
{
width:100%
}
}
CSS aggregation combines multiple CSS files together. If there is a syntax error in one file, it can affect all the other files that are aggregated with it. Browsers can ignore some syntax errors like a missing close } at the end of a file. However when that file is combined with other files it becomes a problem.
Try opening each css file in Visual Studio and check for errors.
I'm coding up HTML for an email that would be viewed both in Outlook and in mobile devices. I'd like to use tables for Outlook (I need a multi-column set up), and single column divs for mobile devices (or anything < 400px).
I'm trying to do this with #media queries, and I know Outlook's CSS support is extremely shoddy, but I'm wondering if anybody knows a hack that can make Outlook "ignore" the #media query for < 400px, and apply styles for the >400px part. I tried this:
#media (max-width: 480px)
{
.mobile-email { background-color:green; }
}
#media (min-width:500px)
{
.mobile-email { background-color:red;}
}
The trouble seems to be that Outlook ignores both. Is there any way I can make this sort of a thing work in Outlook?
Thanks in advance!
In all honesty I'd steer well clear. HTML emails are a horrile horrible business. Adding media queries into the mix is asking for trouble.
Blackberrys don't support media queries for a start...
http://www.emailonacid.com/blog/details/C13/media_queries_in_html_emails
Outlook barely even does standard CSS since it switched it's rendering engine to MS Word's.
Check out this site about email standards support for more information. I still use inline styles and tables in HTML emails as it's still the most consistent way of getting results (which in 2013 is pretty terrible)
The best practices would be to do inline css for background color. Your writing a class that does not work a cross the border. Some devices like script this way some like script this way. For example when you a responsive email that calls for a hidden: border; most devices and browser will do as the media queries call. However Android gingerbread does not do a hidden border. An iphone will do hidden the border. Outlook 2013 will do hidden the border but yahoo won't do it. For what your doing background colors for Outlook 2007 and 2010 need to have that inline You would want it to read Text here
Am hoping that will help you.