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
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
Long time lurker, first time asker! I'm unable to find what I want after a few nights of searching.
I'm looking for very standard bootstrap behavior.
Greater than/equal to 760px width resolution, I want fixed width.
Below 760px width resolution, I want the two lists to stack and take 100% width.
The problem is that above 1200px there is a different fixed width. I tried to fix this by making setting the .container class a fixed width, but then the sub 760px is also fixed --- no longer fluid. I've also tried using media queries.
Here's the code I'm working on: http://travelprobiotics.com/
Any suggestions?
thank you,
Evan Jerkunica
If you are hosting bootstrap yourself, you can't go wrong using bootstraps customization tool found here.http://getbootstrap.com/customize/
Look under the 'Media Queries Breakpoint' section and changed the screen-sm to 760px. (it is already defaulted to 768px so if you're OK giving away the 8 pixels, skip this step and use the code snippet below by itself.)
After that, add this snippet below in your own stylesheet, set the container to whatever width you want to be 'fixed'
#media screen and (min-width:760px) {
.container {
width: 960px !important;
}
}
I am playing with the new bootstrap, i use a pull-right on my menu, but when im on mobile + tablet ress i dont want it to use the pull-right, is there a way to fix this?
You could use media queries for this: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries. Use media queries to reset or overwrite the default style.
In the case of .pull-right you use this to reset the floating right:
#media (max-width: 767px) { .pull-right{float:none !important;} }
Of course you could vary the max-width to fit your need. B.e. use 991px for phone and tablets.
I have a background which cycles through images, these images have no fixed sizes.
My problem is that I cannot find a simple responsive frame for re-sizing images which are dedicated background images. There are plenty of plugins for normal images on websites.
The background of my website always has to have the image displayed.
cropping is allowed, is allowed the image must re-position itself in the center of the web browser.
jQuery or #Media is allowed, I don't really mind.
My images and div look like this:
<div style="width:100%; height:100%; background:white; position:absolute; margin-left:0px; margin-top:0px;>
<img src="image1.png">
<img src="image2.png">
<img src="image3.png">
</div>
A lot of the plugins out there set width to 100% and the height to auto. This will not work as if the browser width is, let's say, 200px and browser height 800px. The image will not cover the entire screen and keep it's aspect ratio. There will be a "gap" under and above the image, so in this case, the height should be 100% and width changed to auto. And of course the other way around if the browser height is 200px and browser length is 800px;
Example of what I want: http://www.martinlogin.se/
You're asking for two different scenarios to be applied depending on screen aspect. This can be done with media queries, but you'll need to settle on some widths and heights.
Start with width-based sizing:
#backgroundDiv {width: 100%; height: auto;}
When the site is narrower than some point, switch to height-based sizing:
#backgroundDiv {width: auto; height: 100%;}
You'll need to decide where the transition takes place based on your expected audience's most likely screen size/aspect scenarios, the images you're using, etc.
To have even more flexibility, say for particular aspect ratios instead of widths, you'll need scripting.
I've got following media-queries rules:
#media only screen and (max-width: 854px), only screen and
(max-device-width: 854px) (for devices <= 854px)
#media only screen and (min-width: 855px), only screen and
(min-device-width: 855px) (for devices > 854px)
It's strange but Chrome (and may be other browsers) use this rules at the same time (when width is 800px for example) (check screen). What's wrong?
They are falling back to the same rule because you are using device-width, the condition for device-width targets your device's physical width so if that condition is satisfied then that's the only rule that will be applied (regardless if you resize your browser to any width). Remove both the device-width conditions from your media queries, this should solve your issue.
To learn more about the difference between device-width and width, refer to this link: http://www.w3.org/TR/css3-mediaqueries/#media1
Thank you, Suvi.
I was testing media-query rules by changing width of browser (not by changing screen resolution). Because my browser width was less then 854px following rule was applied - #media only screen and (max-width: 854px). Because my screen resolution was more then 854px following rule was applied - only screen and (min-device-width: 855px)