My website has a Slick-Slider which is not full screen at this moment. I want to do it full screen. So when I inspect the website I can see this code;
#media (min-width: 768px) .col-md-9 {flex: 0 0 75%;max-width: 75%;}
This code comes from Global.css which I dont have it in my theme folders.
When I change max-width to 100% on inspect slider becomes full screen when I paste this code to my css file nothing happens. How can I mport this code to my CSS?
Thanks.
Just include it normally in your CSS. Local CSS takes precedence over global CSS settings. IF you are able to, make sure that your CSS document is included after the global one.
Related
I use WP 4.9.2 and Leto theme from aThemes. The site that I built on it looks great on bigger screens, but is really screwed up in mobile. I checked the stylesheet - the problem is related to the #media queries. I just don't seem to be setting in the right way ( the css). So, I need to know how to style or what css to use to set the thing up. The theme I use is Leto, and I use WooCommerce plugin. So the responsiveness of the site is perfect on all pages but this one, which in my opinion, utilizes WooCommerce. Anyone anywhere any help is welcome.
Here is the you can look up the whole stylesheet -->stylesheet. You can download the theme in the first link, which was to Leto.
You can use media query:
#media only screen and (min-width:280px) and (max-width:480px){}
#media only screen and (min-width:481px) and (max-width:619px){}
#media only screen and (min-width:620px) and (max-width:767px){}
like :
#media only screen and (min-width:280px) and (max-width:480px){
body{
do_stuff_here
}
.wrapper{
do_stuff_here...
}
}
OR Please read :
https://codex.wordpress.org/Styling_for_Mobile
Does anyone know what CSS class controls the width of the content area of the _Layout.cshtml and how to modify it (make it wider)?
I know it says
class="container body-content"
but I can't see how to modify it. I read it's better to modify the Site.css to override the bootstrap.css instead of modifying it directly.
Thanks.
I discovered that the default bootstrap.css is using the #media rule so it is doing different things at different resolutions which is why I was having a hard time tracking what was going on. So in my Site.css I override the behavior with my own settings like:
#media (min-width: 1920px) {
.container {
max-width: 1840px;
height: 800px;
}
and now it is the width I want.
bootstrap.css contains:
#media (min-width:992px)
I would like to change the 992px to 650px. How do I do it by overriding it from another file and prevent the 992px line in the original bootstrap.cs file from taking effect?
In other words, I want all width of >650px to adopt my style, and I would like to do it without modifying the original bootstrap.cs file.
I don't see a way that you can do that.
I would suggest generating your own bootstrap CSS file. You can easily modify the media query breakpoints by going here:
http://getbootstrap.com/customize/#media-queries-breakpoints
Change the values to your prefered dimensions.
Scroll down to the bottom of the page and click "compile and download".
Ideally if you include your CSS file after the default bootstrap.css file, the styles that are rendered will be from your file. You will have to note that all the styles in the bootstrap.css that you do not want to reflect will have to be overwritten in your custom CSS file.
This is a only option there is if you do not want to modify the bootstrap.css file.
Hope this helps.
Create your own CSS file and put the styles there. #media (min-width: 650px) { .......}
If the styles don't take effect, use !important for the styles.
I want to change bootstrap container default width, which is 1170px.
Is it OK to override settings like this?
#media (min-width: 1200px) {
.container {
width: desired_width;
}
}
Is that all I have to actually do?
It is not good to directly edit a compiled (and perhaps minified) CSS file. It's considered a bad practice and should be avoided.
If you want to change the default width you have to recompile your Bootstrap. This depends on how you are currently using Bootstrap; if you are using a CSS preprocessor such as SASS or LESS you can just edit the variables (see variables.less). Otherwise you can go to http://getbootstrap.com/customize/ in order to get a custom build.
If you are not using any preprocessor, you can fiddle with the grid system and the media queries breakpoints.
Answering your question you probably just want to change #container-large-desktop and #screen-lg using a custom build (assuming you are not using a preprocessor).
I've been given the task of customising certain elements of a site which is using Twitter Bootstrap 3.0.2.
The site will be using default Bootstrap styles and responsive layouts except for a particular custom CSS theme file whose modified styles will only be applied when certain users access the site via certain means.
In any event, I need to disable just the .xs responsive layout and nothing else. This means that the screen must retain a small screen layout on resolutions below 767px.
I've looked at many answers on this site and the closest one is this one that describes editing the existing bootstrap.css file.
I don't want to edit the core bootstrap files but simply want to override the .xs layout in a custom CSS file that is called after the bootstrap file.
I'm not sure how or what I should be editing as the media queries look like the following and it's a bit confusing to me.
#media (max-width: 767px) {
.hidden-xs,
tr.hidden-xs,
th.hidden-xs,
td.hidden-xs {
display: none !important;
}
}
#media (max-width: 767px) {
.hidden-sm.hidden-xs,
tr.hidden-sm.hidden-xs,
th.hidden-sm.hidden-xs,
td.hidden-sm.hidden-xs {
display: none !important;
}
}
Any and all answers are greatly appreciated.
Thanks in advance.