I've been wondering if there is a way to stop bootstrap from shriking after a certain point. I like the way my website looks 700 px width. so is there a way to stop bootstrap from shirking my html after that point?
I think that, as mentioned in question Twitter bootstrap minimum width in responsive layout, you can set min-width CSS property to 700px for any element you don't want to be narrower than 700px.
Say you have a div called "wrapper" that wraps all of your page contents:
<div id="wrapper">
<!-- All contents in here -->
</div>
You can style it like this:
#wrapper {
min-width: 700px;
}
NOTE: If you are using responsive layout, you will also have to comment the styles you want to be disabled in bootstrap-responsive.css file.
So, when using responsive layout, if you want your site to be displayed 700px wide, you will also have to comment the styles under:
#media (min-width: 768px) and (max-width: 979px) {
#media (min-width: 1200px) {
#media (max-width: 480px) {
#media (max-width: 979px) {
#media (min-width: 980px) {
And leave the CSS rules (but removing the #media and the brackets) of styles under:
#media (max-width: 767px) {
Hope that helps!
Related
I am creating a webpage and when I resize the window it kind of starts to mess up. Text changes its position and so on. How is it possible to keep it beautiful even after resizing the window? Maybe there are some video courses? Thanks in advance!!
lots of video courses are available. You can search by "Responsive layouts" keyword. But you can get rid of easily. All you need is standard media queries. Put this media queries in the end of your .css file and start styling according to your screen size. (e.g for mobile size use (max-width : 767px) etc..)
#media only screen and (max-width : 1200px) {
}
#media only screen and (max-width : 979px) {
}
#media only screen and (max-width : 767px) {
}
#media only screen and (max-width : 480px) {
}
#media only screen and (max-width : 320px) {
}
You are looking for css media-queries it is a broad subject. So I can not point to exact destination to go. But the are tons of material on youtube pertaining those subject. You could also tried https://scrimba.com/ for interactive tutorial.
CSS media queries can help. They let you make rules in CSS about how you want different elements on your webpage to display when the screen size changes, or when it is displayed on a smaller or larger screen to begin with. Here is a good introduction: w3schools: CSS Media Queries.
Basically, you set "breakpoints" and the styles you want for those breakpoints:
#media screen and (min-width: 500px) {
body {
margin: 10px;
}
}
More examples: w3schools: CSS Media Queries - Examples
I was wondering if it is possible to prevent some screens of showing the contents of my site ?
#media only screen and (max-width: 600px) {
body {
/* Hide Content Or Whatever*/
}}
Yes, you can do that via
#media only screen and (max-width: 600px) {
body {
display: none
}}
Note: #media queries aren't supported by IE8 and below
#media screen and (min-width: 965px){
//style here
}
#media screen and (max-width: 965px){
//some other style
}
every thing works fine in less than or more than 965px but when the screen on 965px bugs appear
is there is any way to fix that
Switch the order and give yourself 1px of leeway between the 2.
#media screen and (max-width: 964px){
//some style
}
#media screen and (min-width: 965px){
//style here
}
This way, there is no overlap.
Note: It is not recommended to use bot min and max width in screen size queries. If you just use min-width, and list them from smallest to largest, the one below will override the one above it.
Just change the second one to
#media screen and (max-width: 964px){
that way the y will be kept seperated and won't interfere with each other.
I've designed a sign up box for my website using semantic ui. I used semantic ui card for image and it's center aligned. Then I put "Upload a photo" button underneath the image(not fluid because I need the button resize to the width of image when mobile).
I gave width for button manually and center it. Now it's looking good. The problem is the mobile version. It didn't scale to the image size when mobile because it's fixed width.
This is my code
<button className="fluid ui large red button upload-btn">Upload a Photo</button>
.driver-upload-btn{
width: 30.4%;
margin: 0 auto;
margin-top: 12px;
}
Do I need media query? I'm stuck here
you can try this,
#media screen and (min-width: 320px){
.driver-upload-btn{
width: 10.4%; //set width as whatever u want
}
}
// Media query list
#media screen and (min-width: 1024px){}
#media screen and (min-width: 768px){}
#media screen and (min-width: 640px){}
#media screen and (min-width: 480px){}
#media screen and (min-width: 320px){}
I have been searching around and have found no answer or solution for this problem:
I would like to enable bootstrap responsive only when users are using mobile devices. In other words when users are using computer browsers, responsive will be turned off, meaning no matter how the user resize the window, there is always a minimum width for my container and responsiveness will never kick in.
Is there any way to do this by default?
with bootstrap 3: just add a new class to yours containers, like cFixed, and only in the 'min-width: 768px' media-query set your container dimension et voila
#media (min-width: 768px) {
.cFixed{width:1174px}
}
We need to add an extra responsive stylesheet css/bootstrap-responsive.css
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-responsive.css">
And following are the supported devices
/* Large desktop */
#media (min-width: 1200px) { ... }
/* Portrait tablet to landscape and desktop */
#media (min-width: 768px) and (max-width: 979px) { ... }
/* Landscape phone to portrait tablet */
#media (max-width: 767px) { ... }
/* Landscape phones and down */
#media (max-width: 480px) { ... }
Responsive utility classes
You can separate your responsive and non-responsive styling by device width in CSS.
#media (max-width: 767px) {
/* Responsive styling */
div {
width: 50%;
}
...
}
#media (min-width: 768px) {
/* Non-responsive styling */
div {
width: 500px;
}
...
}
Note, this does not determine if the device is mobile or not. To do that, you could make use of open source JavaScript (i.e. http://detectmobilebrowsers.com/).