I am having trouble developing a website using Bootstrap. I am currently trying to have a margin on the side, when the screen or viewport is too big. But when I finally got it, it broke the responsiveness of the page.
The whole body is inside this div to create the margins:
div style="width:1300px; margin:auto;"
Add this media query to your CSS and make sure it's referenced after any other CSS:
#media screen and (min-width: 1300px) {
body {
max-width: 1300px;
margin-left: auto;
margin-right: auto;
}
}
Related
I'm using MkDocs to generate docs using Markdown, and the theme Read the Docs.
However, I'm having trouble getting small images from scaling up on mobile phones.
I think this is linked to the Read the Docs CSS, but I'm having trouble understanding what should I do to override the behavior of setting width:100% on small screens.
The CSS applied to a certain image on a big screen (using chrome inspection) is:
.rst-content img {
max-width: 100%;
height: auto !important;
}
img {
max-width: 100%;
height: auto;
}
But if I reduce the screen, I get this extra CSS:
#media screen and (max-width: 768px)
img {
width: 100%;
height: auto;
}
I'm able to manually set the image size, for example:
<img src="/something.png" style="width: 25px">
But I would prefer if I could create some CSS to ensure that this is applied to all images, so I don't have to add this HTML tag on the middle of the Markdown file each time I want to add a small image.
Simply modify the media query (or create a new rule with higher specificity) to set the width of the images to auto for narrow viewports:
#media screen and (max-width: 768px) {
img {
width: auto;
}
}
I'm using bootstrap carousel on my site. When opened in a phone the images are huge. Take a look at www.nwberryfoundation.org to see what I mean. Is there a way to reduce the carousel in that view?
I've tried
#media screen and (max-width: 400px) {
.carousel {
width: 75%;
}
}
Doesn't seem to make a difference.
Just use below code no need for media query and dont apply width instead try max-width
.carousel{
max-width: 300px; // u can changed it based on ur need or play with %
margin: 0 auto; // required to center div horizontally
}
How do I setup the with to say 1200px when my website runs on a regular PC or Mac?
Apparently Bootstrap has 12 columns in it's grid of 60px each plus gutters.
Is there a way to enlarge the column's basic width?
You can override the class .container in your css
.container {
width: 1200px;
}
You can try this :
Body {width:100%;}
#media (min-width: 950px) {
.container {
width: 1200px;
}
}
All this means is if your page width is small than 950px it will change the container to 1200px;
Do you want it responsive?
Answer came from here
How do i assign a fixed width property to the container class in bootstrap. I have tried to assign a width value to the major container but when i resize the browser, the content of the container become unresponsive.
<body>
<div class="container"> //This is the major container
</div>
</body>
You can either use <div class="container-fixed"> or your own media query in which you can specify the custom width for various resolution.
Here is an sample
#media (min-width: 768px) {
.my-custom-container{
width:600px;
}
}
#media (min-width: 992px) {
.my-custom-container{
width:720px;
}
}
#media (min-width: 1200px) {
.my-custom-container{
width:900px;
}
}
The default Bootstrap .container class has 15px padding on both left and right sides.
You can adjust this by adding additional padding to your container:
.container { //or use a custom class like .custom-container
padding-left: 100px;
padding-right: 100px;
}
Or you could also adjust the width of your container like so:
.container {
width: 75%;
}
Both of these solutions will maintain responsiveness, but the first one will potentially cause issues with smaller screens. You could also use %'s there as well (like padding-left:10%).
Whatever you end up using depends on your specific situation and the desired outcome. You should play around with different screen resolutions and pages on your site to make sure whatever you go with works well.
I'm currently trying to optimize a Wordpress site for mobile devices, but I'm struggling with getting the footer of the site to cooperate. The site is here:
http://whitehallrow.com/
When loaded on mobile, the width of the body shrinks in accordance with the screen size and wraps all the contained text within it. However, the footer keeps its width, which I understand is because the width is hard-coded to look good on a computer screen. I've made a media query in the CSS that targets devices with screens 500 pixels wide or smaller, in order to get the footer to resize to the width of the body. Here is a snippet of my CSS that I've been tweaking:
#media screen and (max-width: 500px) {
#customfooter{
width:100%;
}
}
For whatever reason, this is not working - it still shows the footer as being much wider than the body. I've tried max-width:100%, width:auto; max-width:auto, and none of them work.
How do I achieve this without hard-coding anything?
Change your CSS from
#teakfooter {
width: 100%;
}
#verybottom {
width: 100%;
}
add a class so this gets higher priority
.page #teakfooter {
width: 100%;
}
.page #verybottom {
width: 100%;
}
I tried it out using Firebug and it seems to be working well like this.
Edit: After going over a few more things in the comments, I noticed a couple of things causing the footer to not fill out.
.site {
padding: 0 1.71429rem;
}
This is causing #customer footer to have padding on both sides.
#teakfooter {
margin-left: -40px;
}
This is causing #teakfooter to have whitespace on the right side.
also in firebug you can check METRICS (in right column you have Computed Styles, Styles, Metrics, etc.). In METRICS you will see that around your body there is a padding: 24px;
Solution:
body {
padding: 0;
}