I am using Bootstrap for having a better mobile design.
I am using this grid model:
.col-md-2 (navigation bar) .col-md-8 (content)- col-md-2 (right column)
with following width sizes:
16.66666667 % + 66.66666667 % + 16.66666667 %
But I would like to change .col-md-2 into 2 different sizes like
10.66666667 + 22.66666667, so I would have 2 different classes or is it possible to change the first used .col-md-2 class and then the second one in my later integreted css-file, because this classes are in different css id's.
I tried to create 2 own col-md classes, but this don't worked.
My solution in the second loaded css file (don't worked correct)
#menu.col-md-2 {width:22.66666667%;}
#rechts.col-md-2 {width:10.66666667%;}
The total witdh would be now to long, but I should be like before, because I add 6% to the first class and subtract 6% to the second class.
I want to change the sizes, The first column is to short for a 10inch tablet.
I advice you to create two different classes and apply them as you want.
E.g :
.col-md-2.specialCol1 {
// Special size
}
.col-md-2.specialCol2 {
// Special size 2
}
Do you know what I mean ?
EDIT
I suggest you to use this order :
.col-md-3 (navigation bar) .col-md-7 (content)- col-md-2 (right column)
To focus on the content.
Then, use the media queries to adapt, e.g. :
#media screen and (max-width: 640px) {
.yourCol {
// Your size
}
}
The above example will apply under 640px width. Detect what you need and apply changes.
I always suggest to not change the standard Bootstrap class widths. Create your own... By the way, why at all you need something like this? 10.6666 is really near the col-md-1, why don't use it? Pherapse you can obtain a good result without the need to create custom withs classes, but simply working with margins and paddings.
Related
I know we can adjust orientation of print page on widow by below CSS code
#media print {
#page {
size : landscape
}
}
But after I implement this code with import from 'print.css',
Chrome hides the selection option of layout and fixes to only landscape.
Because of this phenomenon, other pages which don't need to adjust their layout are forced to print out with the landscape option.
Is there any way to set only the targeted page printed out horizontally?
Like can we remove CSS option right after printing out the targeted page is printed out or target a specific area with id or class name?
I have been suffering from this problem for almost 1 week :(
I am new to html,css, bootstrap.
Is there anyway we can assign different number of columns to a div based on resolution range for large device?
lg (for laptops and desktops - screens equal to or greater than 1200px wide)
But can I assign different number of columns for widths between 1200-1300px and 1300px-1400px ?
Please have a look at the below image. This is how the Ui should look like. On left hand side there would be a form with four columns- 1st and 3rd column contain labels and 2nd and 4th column contain input controls.So each of these column is assigned col-lg-3.
Now the issue is , when width is around 1250px, the left hand side form looks fine(but it needs 6 columns) but in that case grid is not able to see all the columns without horizontal scrollbar.
But if the resolution is around 1400px, then distance between labels and controls are too much and also there is a lot of empty space around the controls within left hand side form. So I was looking for a solution where I can assign the number of columns based on resolution
You can use Bootstrap v4 to achieve it.
For more information:
https://getbootstrap.com/docs/4.0/layout/grid/
You can create media queries to affect the current columns at different screen widths. Or you can create a new set of classes, like .col-xxl-2 and give them a different percentage width, like 20% and put them in a media query targeted to the size you want. So then a div could have <div class="col-xs-12 col-sm-8 col-md-6 col-lg-4 col-xxl-2"></div> and so on. I don't know if this is really necessary though, constraining it to only a 100px difference (1300-1400), because lots of computer screens go beyond that size.
Edit
If you add form-inline to your form and wrap your label + input inside a form-group, it should put them on the same line with proper spacing, no matter what the size.
I'm currently having a problem trying to set to the left every sublist of the navigation bar so that it aligns correctly bellow every sublist if there is more than 6 columns, the problem happens from the 7th list. I'm using bootstrap and every sublist have a size of 2 (so from the 7th as it passes the 12 column size it moves down, as expected)
What I'm getting a result is
And the expected result is
Piece of code used per list:
<div class="sub-navigation-section col-md-2">Ul and li inside</div>
The CSS that is attempting to do the expected result is a Float:left;
Bootstrap uses a 12 column grid system so you won't be able to divide that up equally into 7 columns. You could do this by creating your own class that has a width of approx 14.285% (100/7) and the same properties as the bootstrap col-* classes (float left etc)... but remember you'll need to cater for different viewports etc
If you wont use javascript, you can alternatively use CSS3´s column-gap and column-width like in this example:
https://www.bootply.com/118335
It floats the boxes like waterfall layout. Hope this helps you.
Does anyone know if this can be accomplished with bootstrap mixins.
columns( number of parent)
Something like what Neat has.
In Neat the Columns mixins works like these
#mixin span-columns($span, $display: block) { ... }
Where $span can be 3 or something like 3 of 12
Specifies the number of columns an element should span. If the
selector is nested the number of columns of its parent element should
be passed as an argument as well.
thanks
When i understand your question well you should read Less mixins and variables.
You will find the mixins to generate semantic grid columns in the less/mixins/grid.less file of Bootstrap's source code.
To generate a div that overspans 3 columns you should use for instance:
div.three{
.make-xs-column(3);
}
Notice the mobile first nature of these mixins. With the above code the xs mixin generate CSS code which will be applied for all screen width (no media queries).
When using:
div.three{
.make-xs-column(6);
.make-sm-column(3);
}
You div will overspan 6 columns for screen width below the 768 pixels (thexs grid) and 3 columns above the 768 pixels, the sm grid and up (explicit calling the larger grid mixins is not needed unless you want to overspan a difference number of columns). It's inportant to start the mixins for the smaller grids before the larger grids, see also: Bootstrap 3 mixin multiple make-*-column
I need to make a control that has three T's of varying size that are linked. By clicking on each T the article text will resize to either a small, medium, or large font appropriately.
Does anyone know how I can do this? Also, do you know of a site that uses this kind of text resize feature?
Thanks in advance.
UPDATE: Thanks for all of your responses. I went digging through Google a little further and found that this has potential: http://mirificampress.com/permalink/daynamically_resizing_text_with_css_and_javascript It's using JS to dynamically resize the font and this is exactly what I want to do. I'd much rather do this in CSS if possible still though - anyone?
You can do this with CSS - if all of your fonts are percentages, then you can set one font size for the document and all children will be a percentage of that.
The approach will not be able to be implemented using CSS only. You will need to use CSS in conjunction with JavaScript.
The best approach would be to set your page's default body size using either percentages or ems. You would create two extra classes for the larger and smaller font size for the page's container or <body> tag. These classes could use larger and smaller percentages / ems or you could use the keywords: xx-small, x-small, small, larger, x-large, xx-large. (NOTE: I left out smaller and larger since they seem not to work sometimes).
Then using JavaScript you could attach an onclick event to your three T's which would dynamically add the desired class to the page container (or <body> tag). If they clicked on the middle T then the applied large/small class would be removed returning the page to it's default font-size.
A few things to keep in mind:
A user can set a minimum font size for their browser so if you set your "small" size below that that setting, that user will never see your smallest font setting.
You will need to experiment with how your layout acts if a user has a larger default font-size setting.
Hope this helps and good luck!
You could attach different CSS files depending on which 't' the person has clicked (changing the paragraph text size). I'm sure there's a better way, but that'll get the job done!
Using jQuery you could do something like this:
$(function(){
$('#smallT').click(setTextToSmall);
$('#mediumT').click(setTextToMedium);
$('#largeT').click(setTextToLarge);
});
function setTextToSmall(evt)
{
$('.text-to-resize').addClass('small').removeClass('medium').removeClass('large');
}
// Have similar setTextTo.. functions for Medium and Large here
To clarify, this actually does use CSS to change the sizes. You would have three CSS classes named 'small', 'medium', and 'large':
.small { font-size: 0.5em; }
.medium { font-size: 1em; }
.large { font-size: 1.5em; }
The setTextToSmall() function is called when the user clicks on the small "T". It adds the class 'small' to all elements that already have a class of 'text-to-resize' and removes the 'medium' and large classes. So where you might have this before the click:
<div class="text-to-resize">Some sample text</div>
You would have this after the click:
<div class="text-to-resize small">Some sample text</div>
If you wanted to apply this to every element on the page then you would simply change setTextToSmall() to the following:
function setTextToSmall(evt)
{
$().addClass('small').removeClass('medium').removeClass('large');
}
The benefit of jQuery (or other frameworks for that matter) is that it abstracts out the DOM which is very tricky across different browsers. For example, to do this in straight Javascript you might instinctively want to use document.getElementsByClassName(). However, that method doesn't exist in any version of IE.
You can use
("fontSize",+=3px)
If you don't want to have limit.