This question already has answers here:
How to remove responsive features in Twitter Bootstrap 3?
(8 answers)
Closed 8 years ago.
I have made a website with bootstrap 3, so by default it's responsive. However, I don't want it to be responsive (it's long story).
Basically I just want it so that on tablets and phones you have to zoom in and out to read it. It's just a basic brochure website which is why responsiveness isn't necessary.
I've tried taking out the meta view-port tags and googled how to do it endless times but I can't make it to act/look like a normal website, if that makes sense. What do I need to do to make Bootstrap 3 unresponsive?
.Container{width: 960px;} // add your designed width
#media (min-width: 768px){
.Container{width: 960px;}// add your designed width
}
#media (min-width: 992px){
.Container{width: 960px;}// add your designed width
}
#media (min-width: 1200px){
.Container{width: 960px;}// add your designed width
}
Write it your external CSS file. Remember First add bootstrap.css then add your external.css.
Related
This question already has answers here:
Media Queries: How to target desktop, tablet, and mobile?
(22 answers)
Closed 1 year ago.
I made my web design in Figma setting it to 1440px x 1024px.
(here is the link if that helps to see what I mean https://www.figma.com/file/IlSDcBbvr4nFp83p0jtndR/Bohhi-Portfolio?node-id=2%3A2)
Now that I want to code and style it I'm confused about it.
How can I position my objects in relation to the design and screen resolution of my PC and every other user?
Can I make it so that the code fits the design?
Thank you!
Try checking out #media query for creating responsive layouts:
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
Explanation Edit:
#media only screen and (max-width: 768px) {
width: 100%;
}
For example, you can use it to ajust your preferred lyaout on devices with different screen widths (Example: Phone).
When a condition is true (Example: device screen is maximally 768px width) the following css property will be used (Example: width: 100%;). In this way you can create different content layouts and properties for PC users and Phone users.
This question already has answers here:
Responsive css styles on mobile devices ONLY
(4 answers)
Closed 5 years ago.
I just finished creating my website but now I have found a failure. My problem is that my website looks totally nice on the PC. But if I go and look at it from my mobile phone, the spaces between certain images etc. are a great deal too much...
So my question is, how can I create some CSS codes who are only affecting the mobile devices and maybe tablets?
Is there a way?
CSS has feature called media queries.
From the MDN link:
Media queries, added in CSS3, let the presentation of content be tailored to a specific range of output devices without having to change the content itself
For example:
div {
background: black;
}
#media (max-width: 1000px) {
div {
background: yellow;
}
}
The background color of this div will be yellow on screen under 1000px width like in the example provided.
You can use media-queries for different screen resolutions.
Example:
#image img {
width:375px;
}
#media screen and (min-width: 1366px) {
#image img {width:375px;}
}
Read and understand about Media Queries
You will be able to adjust the css of certain media sizes of your website.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
So my website is good on desktop, no problems. But when I look at it on my phone per say, the gallery page is very messed up. Now i haven't been able to figure out how to make it compatible! Help please, here is the website:
http://www.marbleddesigns.com/
Use mediaquery to make website display good on other devices, we call it responsive web design
#media (max-width: 767px) {
// Style for devices have width <= 767px;
}
#media (max-width: 1023px) and (min-width: 768px) {
// Style for devices have width >= 768px and <= 1023px;
}
#media (min-width: 1024px) {
// Style for devices have width >= 1024px;
}
You can add style for elements on your page.
I added simple responsive grid system here, you can copy my mediaquery css and add classes to your website to make it work well on other devices.
There is two main approach to make your website available and being responsive on multiple devices.
I/ when defining sizes of divs and more make sure to use percentage (%). This will make sure that the website adapts to the size of the screen and thus adapting to different resolutions. When thinking of creating a website always look on different browsers and devices to see if it looks good every where.
II/ The other option of course is using media queries. They are structure like this:
#media only screen and (max-width: 600px) {color:red;}
They basically apply a rule if a condition is met like the size of the screen usually in our example, the text would become red if the browser window is smaller than 600pw in width.
For some good tutorials i recommend those links:
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
http://www.w3schools.com/css/css_rwd_mediaqueries.asp
This question already has an answer here:
Apply different CSS stylesheet depending on browser window size - I can't find anything definitive
(1 answer)
Closed 8 years ago.
What is the best solution to make top navbar fixed only on large displays (desktops/tablets)?
Just use media queries for applying the rule only in monitors (only screen) above a minimum size:
#media only screen and (min-device-width: 768px){
.navbar{ // navbar class
position:fixed;
}
}
Now am using Bootstrap # for an Web Application.
My Application should be Same as in REQUIREMENT
Since am Applied Bootstrap, when i shrink the screen it shows as Responsive, But I really NOT NEEDED.
I need the Sticky Body Content. As Same in NEEDED DEMO
I am sorry if I not understand your question correctly. but you are going to make your website become not Responsive? Then one of the solution that I can suggest to you is to overwrite or reset some bootstrap.css function with your custom css, especially
#media (min-width:somepx){width:your_desired px} with your own liking.
for example this bootstrap css default will define the container responsive size to 750px in case the screen is 768px:
#media (min-width: 768px) {
.container {
width: 750px;
}
for more information, you can read the information from the bootstrap link