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;
}
}
Related
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
We have our website in wordpress, below is the link for your reference.
https://timesandtrendsacademy.com/
There is one foobar which is shown at the bottom of every page of our website in sticky and scrolling mode.
I have put some custom css for the same for full width look, below for your reference,
.foobar-container-left{display:none;}
.foobar-container-right{display:none;}
#foobar-message-0{width:100%;}
#media only screen and (max-width:500){
#branches{width:100%;}
}
It's working perfect on desktop, but when we resizing our screen or when we open on mobile devices that width is not taking a full-width.
It is showing in a 150px width size that is not looking good in mobile devices.
we have to add some css or media query to reflect proper on all the devices.
Please advice us.
Thanks,
Gopal
That's because there's a style with a !important that overwrites your styles.
#media only screen and (max-width: 800px) and (min-width: 320px) {
#foobar-message-0 {
margin-top: 10px;
width: 150px!important;
}
}
Remove the !important, edit the style, or use a more specific selector with !important.
Example:
#media only screen and (max-width: 800px) {
#foobar-message-0 {
width: 100%!important;
}
}
These styles should be after the styles to overwrite.
Add this css in style editor
#media only screen and (max-width: 767px){
.foobar-container-inner {
margin-left: 0important;
width:100%!important;
margin-top: -40px!important;
}
#foobar-message-0 {
width:100%!important;
}
}
My website is https://salesportalasia-testsite.azurewebsites.net
When view using mobile there is white space at header.
I have check the margin-top code in css but not success.
Can someone please help me solve this problem...
You have a inlined style padding-top: 211px on div with id="page". Remove it, and this white space will disappear.
Assign padding-top:0px !important; in mediaqueries
#media (max-width: 767px){
.wrapper {
padding-top:0px !important;
}
}
If you inspect the page in mobile view, you will see that some inline styling is being applied to <div id="page" style="padding-top: 160px"></div>.
It looks like it is being set in custom.min.js in the setNavigationOffset function.
I hope that helps.
I noticed you have padding-top:160px in top.
element.style {
padding-top: 160px;
}
In the page it looks like hardcoded inside theme page,
Its possible you have different padding-top in different mobile devices so please check that and resolve it according the device. That will helpful.
Use this css code for removing the padding top which results in the white space.
#page{
padding-top:0px !important;
}
Problem you are facing due to multiple positioning of navigation element.
#media (max-device-width: 800px) and (orientation: portrait)
#media (max-width: 767px)
style.css?ver=4.7.5:7526
.navigation {
position: relative!important;
}
This above class overwrite your fixed position class value.
.navigation-fixed-top .navigation {
top: 0;
position: fixed; /* This not work
bottom: inherit;
}
Here if you want to overcome. Just simply remove relative class
TO REMOVE
#media (max-device-width: 800px) and (orientation: portrait)
#media (max-width: 767px)
style.css?ver=4.7.5:7526
.navigation {
position: relative!important;
}
Otherwise if you want to use above class. Remove ! important keyword.
Change like this.
#media (max-device-width: 800px) and (orientation: portrait)
#media (max-width: 767px)
style.css?ver=4.7.5:7526
.navigation {
position: relative;
}
So navigation element automatically get the fixed class value based on priority..
Hops it helps.!
Be completely removed in the Media Query. How can I do so?
I have the following CSS:
#container {
width: 50%;
}
}
With media queries you can override the CSS when the device has a certain width.
So:
#container {
width: 50%;
}
#media screen and (max-width: 600px) {
#container {
width: auto;
}
}
But you can't delete a CSS rule, in fact every element has all the CSS values already setted by default and by the browser and you just override some of them, if you ispect an element and go under "computed" tab of the developer tools you can see all the CSS atributes.
Those are the CSS file used by the browser (called user agent stylesheet):
Firefox (Gecko): https://dxr.mozilla.org/mozilla-central/source/layout/style/res/html.css.
Chrome/Safari (WebKit): http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
Chrome (Blink): https://chromium.googlesource.com/chromium/blink/+/master/Source/core/css/html.css
Internet Explorer (Trident), older versions: http://www.iecss.com/
However you can reset to default a CSS value using value:initial; so width:initial; but if you know the CSS default value (whitch is visible there) you can specific it (In this case width:auto;).
Read this to know more about media queries: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
the initial value of the width property is auto, which means that if you set the width to auto, it would be like no other width rule exists.
#container {
width: 50%;
}
#media screen and (max-width: 600px) {
#container {
width: auto;
}
}
Also, since it is better to write Mobile-first css, I would remove completely the #container selector and add the following media query
#media screen and (min-width: 601px) {
#container {
width: 50%;
}
}
You can use the value initial. More info about it here: CSS Initial/Inherit
#container {
width: 50%;
}
#media screen and (max-width: 600px) {
#container {
width: initial;
}
}
My understanding of your question is that you want to completely remove the width via media queries of your container correct? If so, simply add '0' to that ID for your width. If you prefer, you can put '0px' or '0%' but that really isn't needed. If this does not work, try adding '!important' to your media query like below.
#container {
width: 50%;
}
#media screen and (max-width: 600px) {
#container {
width: 0;
}
}
or
#container {
width: 50%;
}
#media screen and (max-width: 600px) {
#container {
width: 0 !important;
}
}
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).