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
}
Related
Is it possible to set width this same like container in css? OK, I'll display you my problem. I want to make side responsive menu which will be hide in mobile and visible on Desktop. So, I want to main content (on mobile) have width like their container and I will use translate in order to hide menu. For example
.container{
display: flex;
transform: translateX(-150px);
}
.menu {
width: 150px;
}
.content {
width: 100%;
}
I know that in JS it's possible to check container with and change .content width dinamically but I want to know that is better way to realize that.
You can use media queries to change the with dynamically based on screen size.
Here is the documentation on MDN, but probably something like this:
#media (max-width: 500px) {
/* Here are styles for screens equal to or narrower than 500px */
}
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 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;
}
}
I've set up a media query that should center an image when the screen is smaller than 600px. When bigger then 600px, the image correctly displays to the right of the site title. Chrome inspector assures me that the queries are working, but I think there might be an overarching rule that's keeping my margin: auto from applying. The 'globes' image in question is at the top of:
http://livinginbetween.org/temp/
I'd love any suggestions. Thanks in advance for your time.
Add display: block; to your media query to center the image.
#media only screen and (max-width: 599px) and (min-width: 0px) {
.globes {
display: block;
width: 159px;
margin: 0 auto 0 auto;
}
}
I have a website with all content centered. The content has a width of 500px.
I'm only concerned about the content (the 500px) to be visible, how much of the gutter doesn't matter.
For desktop displays I have the following CSS rules:
margin: 0 auto;
width: 500px;
What should be applied so that the content area gets displayed in it's entirety on as many screen sizes as possible (i.e. as small as 320px)?
to support different screen sizes you should use percentage, not pixel. But in case you are more comfortable using fixed width (using pixel) you can use media queries to achieve that.
.container { //start with the smallest screen width
width: 300px;
margin: 0 auto;
}
#media screen and (min-width: 40em) { // 640px
.container {
width: 500px;
}
}
But I do recommend you to use percentage instead of pixel. Hope you find this useful.