I recently found this answer on SO, and was wondering if there is a syntax to accomplish this with breakpoint-sass plugin? Thanks.
EDIT (since there was confusion):
Have a breakpoint dependent on height and width, similar to this media query from the posted question.
#media screen and (max-width: 995px) , screen and (max-height: 700px) {
...
}
Breakpoint allows for media breakpoint and or breakpoints, so constructing this MQ is fairly straight forward:
http://sassmeister.com/gist/3b7127ded8e032d90f4d
Related
High all.
I have a site that works ok on MOST devices.
However, I'm having a problem with resizing when the screen is for an iPhone 13 mini.
I have the screen size set at 650X1315.
All is fine until the phone is in horizontal. At this point my css fails to do anything.
I have:
#media screen and (max-width: 650px) and (orientation:landscape)
I've tried changing lots of properties, but neither the div form will increase to contain the textarea, or will the textarea reduce to stay within the form div.
I've tried MANY css rules but nothing works for me in
#media screen and (max-width: 650px) and (orientation:landscape)
Everything else works with width fit-content
Can anyone suggest anything please?
I've included an image to show this.
try to add text-area: max-width:80%
also try to use other simulation's tools for iPhone
may it has bug
I have problem with my nav bar on a theme I am developing. http://astanmedia.com/blog All is ok at full screen, but reduce the screen size so the the menu collapses and when you click / touch the toggle button, the dropdown refuses to break over the slider, no matter what z-index is set, or positioning used. on scroll I have the nav change to fixed at the top, and it displays fine once the slider has passed it. The dropdowns also function fine over the slider at full screen. Have tried to paste code here for 15 minutes, I must be doing it wrong, so I have linked to a paste bin of the code here http://pastebin.com/6war9TGu. Thanks in advance
I think I see your problem. It's not the z-index, it's the navbar-collapse style.
You have:
.navbar-collapse { max-height: 50px; }
You need something like:
.navbar-collapse { max-height: 275px; }
According to the Google Chrome developer tools, you can find the .navbar-collapse style on line 106 of your style.css. In your Pastebin it looks like it's on line 94.
As a note, once you fix the .navbar-collapse max-height, you'll also need to add a background color to your .navbar .navbar-nav class so that the drop down menu doesn't have a transparent background.
I'm seeing a few other little things on your style that may need adjustment, but I'm going to assume that you'll ask specifically about these issues as you go. To fix the question you asked about, the navbar-collapse should help.
The container class is used to restrict content to 70% of screen width. Works wonderfully for our app on medium and larger containers.
Unfortunately, we then want 100% spacing on small. Anyone have ideas?
In my code I just do something like this
#media screen and (max-width: the size you need)
.container
width: 98%
I just call this after importing the materializecss sass and override the default behavior
Here is the code they use and which you have to override: link
What is the purpose of using #media screen?
I'm new to using #media queries and I don't understand as to why you would need screen.
#media print I can understand as it allows you to alter the code when it comes to printing a page but surely screen would just give the same output as using standard css? e.g.:
#media screen { #id {display:none; } }
vs
#id {display:none; }
Surely you would just get the same output so what would be the benefit of screen?
Is there another benefit to it that I don't understand?
This will not match when the current media is not screen, e.g. when printing or projecting.
You are assuming that screen is the default, and all the others are exceptions, overriding with more specific rules, but the actual default is #media all.
Hi Im building a responsive site with media queries and Im having problems with the smart phone. When previewed there seems to be a 30px border left and right. I have tried to 0px & 0% all margin and padding but it wont go away. Please see screen shot here
http://optimise-website-marketing.com/wp-content/themes/bones/images/photo.PNG
heres the site:
http://optimise-website-marketing.com/
Im using the following media queries:
/* iPhone [portrait + landscape] */
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
Any help much appreciated :-)
Im waiting so much time pulling my hair out here, please can anyone shed some light on whats happening?
Matt
Line 1083 is the problem:
.page {
padding: 0 20px;
} /* general article on a page style */