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.
Related
This is a full-screen view of the amazon website
This is responsive view
I want to do like this how can I do that using CSS
I would suggest you to read this post
https://stackoverflow.com/help/how-to-ask
Specifically we could get more information about what you have already tried doing.
You can use css media queries to manipulate the layout of the website.
reference link
#media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
I suggest u for using bootstrap. It's easier way to learn responsive website
https://getbootstrap.com/docs/4.0/getting-started/introduction/
After that, u can build miniproject to learn it.
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.
I'm taking advantage of the xs sm md lg columns in order to define how large the columns should be at different screen sizes. It is working fine but I would like to have more fine tuned control and define my own custom sizes.
For instance I'd like to have a col size that exists between xs and sm.
I added a col-ss class like so:
#media (min-width: 600px)
.col-ss-4 {
width: 33.33333333333333%;
}
#media (min-width: 600px)
.col-ss-1, .col-ss-2, .col-ss-3, .col-ss-4, .col-ss-5, .col-ss-6, .col-ss-7, .col-ss-8, .col-ss-9, .col-ss-10, .col-ss-11, .col-ss-12 {
float: left;
}
And added the class like so:
<div class="col-sm-5 col-ss-4">Content Here</div>
But it seems to have no effect.
Bootstrap is a really big framework. If you're looking to change the foundational structure then you're no longer using bootstrap, which is fine. However, you'll want to modify the foundation of bootstrap by using the preprocessors like LESS and SASS. This at least allows you to keep the code modularized. Something like this could very easily be added by modifying the following.
github variables.less
github grid.less
If you're looking for an answer more specific than this, you'd be better off following a tutorial that will take you step by step.
add-xl-grid-size-option
For a time estimate, expect about 30-45 minutes your first time doing this.
You might want to try the code below. you don't minimum multiple media queries for the same min-width size. if you can use less, you had be able to copy classes.
You can customize bootstrap files using bootstrap customize
#media only screen and (min-device-width: 600px){
.col-ss-1, .col-ss-2, .col-ss-3, .col-ss-4, .col-ss-5, .col-ss-6, .col-ss-7, .col-ss-8, .col-ss-9, .col-ss-10, .col-ss-11, .col-ss-12 {
float: left;
}
.col-ss-4 {
width: 33.33333333333333%;
}
}
Go through this page to "customize" everything bootstrap. Then you can export your results.
Bootstrap customize files here
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).