I would like to change the .container div width in bootstrap 4.
The original css is this:
#media (min-width: 1200px)
.container {
max-width: 1160px;
}
If i add this code below to my file, would it cause any problems, or everything will be okay?
#media (min-width: 1920px)
.container {
max-width: 1360px;
}
You can change most of the default settings/values in bootstrap but remember that if you change them you might lose the responsive layout which Bootstrap provides it to you, but the answer is Yes you can and it is all about your own project.
If you don't sure you can change only a container called it with ID and then do changes to that one only.
Always refer back to documentation that Bootstrap provided.
enter link description here
Related
I need to add Bootstrap container + 60px.
How I can do it, without changing Bootstrap itself ?
I've tried this media query, but it doesn't work.
#media (min-width: 1200px) {
.container{
max-width: 1260px;
}
}
How can I do that ?
Just change your css code to 1260px, in case you dont wan't to change this in your bootstrap css file, make a new file and set it like so:
#media (min-width: 1200px) {
.container {
width: 1260px;
}
}
Make sure your new file is loaded below the original file of bootstrap css. Dont use max-width in this case. Good luck!
Did you tried to add !important at the end of your CSS definition ?
Try this way:
#media (min-width: 1200px) {
.container {
max-width: 1260px !important;
}
}
My current website layout: Screenshot 1
I used a div with a wrap id to center the site:
#wrap {
width: 70%;
margin: 0 auto;
}
but now it obviously also makes it 70% width on mobile which looks bad: SC2
I did try using media queries, the one with max-device-width specified by itself and also the ones that are on the bootstrap website under the CSS section, everytime I used any of those I removed the original #wrap css code, but nothing at all worked, my website would just go to being 100% on all devices and even if I made it 70% on mobile (just as a test) it was still the same everywhere, like there was no css code for the wrap id at all.
Sorry if it's a dumb question, i'm just lost and really want to make my site 100% at a certain (tablet-mobile) breakpoint.
Try this:-
#media (min-width: 768px) {
.mymenu {
width: 20%;
}
}
I am using a full-width template from the Sela theme (https://wordpress.org/themes/sela/). I would like to increase the width of the full-width template on one specific page to the same length as the navigation bar.
http://www.somarunners.com/routes/
That is the page I would like to modify.
Using information on the web, I added the following to my css:
.page-template-full-width-page .content-wrapper.full-width.without-featured-image {
margin: 0;
}
But that did not have the intended effect.
If anyone has suggestions as to how to modify to width of the template, I would appreciate it.
you have media queries affecting your page template
#media screen and (min-width: 1180px)
.site {
margin: 0 auto;
max-width: 1180px;
padding: 0;
}
A simple change in max-width will allow the changes you want made
#media screen and (min-width: 1180px)
.site {
max-width: 100%;
}
I would suggest
A) creating a custom page template and setting .site to 100% from there if it is just the one page you need changing.
Also bear in mind that changing the max-width to 100% inside the media queries may not work on larger screens.
I'm making a mobile only website like "m.domainname.com".
I want to use Bootstrap in my site. But, for the main container div, if I use the "container" class, it will be 1170px. My site starts with 1024px.
How can I set the container div's width? Am I doing this the right way?
How about change the container width from 1170 to 1024px?. Have a look into bootstrap.css and change this
#media (min-width: 1200px) {
.container {
width: 1170px;
}
}
to
#media (min-width: 1200px) {
.container {
width: 1024px;
}
}
If your site is only for mobile then you don't need to use the #media (min-width:1200) for your css. You can just do something like this if you don't want to set an actual amount:
.container {width:95%; margin-right:auto; margin-left:auto;}
You can use Bootstrap's container-fluid class if you don't need to set an explicit width for the container. From their Grid documentation:
Rows must be placed within a .container (fixed-width) or
.container-fluid (full-width) for proper alignment and padding.
If you do need to set explicit widths for the container at different breakpoints, you can generate a customized CSS file for Bootstrap using your numbers. The link allows you to set a container width for:
tablet
small
desktop
medium
large desktop
large
It also allows you to change a lot of the other defaults.
I had a hard time to fix it. Maybe I am just very noob on css.
Basically, I want the icon to visible only in Mobile version of the site.
in above 767px I put this code to make i hidden.
.neighbourhood-img img {display:none;}
My question is, how can I make it visible in below 767px width..
Thanks!
hey check out this css
#media screen and (min-width: 768px) {
.neighbourhood-img img {display:none;}
}
#media screen and (max-width: 767px) {
.neighbourhood-img img {display:block;}
}
What you need is called media queries. Try with:
#media screen and (min-width: 768px) {
.neighbourhood-img img {display:none;}
}
It will be hidden when the width of the screen is at least 768px
You can read more about media queries here:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
You can use media queries available in CSS to define the styles which meet certain conditions, in you case the condition will be screen width.
Use Css Class:
.neighbourhood-img img
{
display:block;
}
I think I understand what you're asking.
If you only want it to visible on mobile version then you could do the following:
Make a new CSS rule:
#media only screen and (max-width: 767px) {
.m-show {
display: block !important;
max-height: none !important;
overflow: visible !important;
}
}
Then wrap your icon in a div tag as below, with the styling to hide it (but make its class the m-show class):
<div style="display: none; max-height: 0; overflow: hidden" class="m-show">
Your hidden content here...
</div>
This will hide it if it isn't in that max width of 767, otherwise it will show it. Hope this makes sense. I would also suggest making that inline styling in the div tag a separate CSS class (just because I don't like inline styling).