I'm trying to target a bunch of selectors with a media query, and ADD to their existing padding value, rather than having to specify a specific number of px, % etc for each. Is this possible?
e.g.:
<div id="1"> blah</div>
<div id="2"> blah</div>
<div id="3"> blah</div>
#1 { padding: 100px;}
#2 {padding: 75px; }
.....
etc
#media screen and (max-width: 480px) {
#1
#2
#3 {
padding: +100px; } }
Thanks!
In pure CSS this isn't possible.
When you use any CSS preprocessor, eg. LESS or SASS, you can use theere variables, do math operations (add 100px to existing one padding etc.).
You cannot do this using CSS.
Take a look at either jQuery or more structured styling options such as SASS. Very powerful and much better than CSS.
Related
I use bootstrap v4 for VueJS and I need to increase b-modal.
I tried different ways mentioned here : https://github.com/bootstrap-vue/bootstrap-vue/issues/632 but nothing didn't help.
In general my code looks like :
<b-modal :ref="fieldName" :id="fieldName" :title="msg" size="lg" modal-class="b-modal">
<div class="script_table_container" v-if="scripts.length > 0">
<b-table :items="scripts" per-page="10" :current-page="currentPage">
<template slot="propertySnippet" slot-scope="data">
<samp>
{{data.value}}
</samp>
</template>
</b-table>
<b-pagination :total-rows="scripts.length" per-page="10" v-model="currentPage" hide-goto-end-buttons align="right"/>
</div>
<div slot="modal-footer">
<b-btn class="mr-sm-2 su-btn-link" #click="close">Close</b-btn>
</div>
</b-modal>
I need to increase width up to 80-90 % of the screen cause some values inside the table are long.
Hope for your help guys. I believe you're gurus.
P.S. The answer has been found .
To apply changes for a certain b-modals you can follow the next step :
I created globally:
#media (min-width: 992px) {
.modal .modal-huge {
max-width: 90% !important;
width: 90% !important;;
}
}
and after that I placed 'huge' into size prop of b-modal. "Huge" is used because the class ends with "huge" word.
It isn't always practical to make new elements in your CSS file. If you want to adapt something, you always need to search where again have I defined the width, style, did I define it already, ...
I find it easier to include it directly in my code. For b-model, I found the following solution:
<div>
<b-modal size="xl" title="Very large model"></b-modal>
<b-modal size="lg" title="Large model"></b-modal>
<b-modal size="sm" title="Small model"></b-modal>
</div>
It works for my version Bootstrap v4.3.
After debugging the CSS i found that you could add the following CSS rules in order to overwrite the existing ones and make the width more larger :
#media (min-width: 992px)
.modal-lg {
max-width: auto !important;
}
#media (min-width: 576px)
.modal-dialog {
max-width: auto !important;
}
I have this code on my webpage and I made it with Bootstrap.
<div class="row">
<div class="col-md-11">
Here I have content
</div>
<div class="col-md-1">
Here I have content
</div>
</div>
and I need for this column, that first column to be smaller, 10.5 size and second column to be bigger, 1.5 size. Can I do with width in CSS? Can you help me with this?
Thanks
Bootstrap has no direct provision for partial columns.
You can rewrite the stylesheet to operate on a different number of columns (i.e. 24).
The customize page will let you specify a different number of columns and generate the stylesheet for you.
Alternatively, you can check out Bootstrap from Git and modify the variables file to the same effect.
Just create your own break points:
#media (min-width: 992px) {
col-md-10-5 {
width: 9.523809523809524%; // 100 / 10.5
}
col-md-1-5 {
width: 66.666666666%; // 100 / 1.5
}
}
Alternative You can increase grid size to 24 columns instead of 12 using Bootstrap generator.
Bootstrap provide you with general purpose components. I believe bootstrap rows and columns are generally designed to contain different website parts or different functionality (e.g. right column with most recent news feed and the main body with current article)
I guess you are trying to build your own component/markup that should not be splitted by bootstraps rows and cols. I suggest to write your own css for it.
<div> <!--some container (e.g. bootstrap container or column)-->
<div class="my-component">
<div class="main-part"></div>
<div class="additional-part"></div>
</div>
</div>
.my-component {
/*something*/
}
.my-component > .main-part {
width: 600px;
/*some margin or padding*/
}
.my-component > .additional-part {
width: 200px;
/*some margin or padding*/
}
And include media queries if necessary.
I advise not to override framework grid system.
Since col-md-1 is of width 8.33333333%;
<div class="col-md-1" style="width: width: 12.499999995%;
flex: 0 0 12.499%;max-width: 12.499%;"> # 8.33333333 * 1.5
Here I have content
</div>
And for the col-md-11, you'd have to adjust it to be 10.5:
<div class="col-md-10" style=" width: 87.499999965%;flex: 0 0 87.499999965%;max-width: 87.499999965%;"> # 8.33333333 * 10.5
Here I have content
</div>
Say I have the following HTML structure:
<div id="outer">
<div id="target">
</div>
</div>
The outer div may or may not have the id "outer".
I want to apply styles to #target only when its not contained within a div having the id "outer":
<div id="something-else">
<div id="target">
</div>
</div>
With LESS, I tried the following:
:not(#outer) {
#target {
// styles
}
}
This doesn't work apparently (I guess because the :not operator is not excluding its nested elements).
Is there any way to achieve this with CSS / LESS? Of course I know that I can refactor the html / logic so that I apply the styles without using :not, but I'm wondering if theres a way to achieve what I'm asking as is.
Try this
:not(#outer) > #target {
// Styles
background-color: red;
}
}
Here's a little fiddle you can try.
Media query width is not applying to col-md class. Below is my code. I am using latest version of Bootstrap.
<div class = "col-md-8 article-container-fix">
<div class = "articles" >
<article class="clearfix">
<header>
line 1
line 2
line 3
</header>
</article>
</div>
</div>
CSS code
#media(max-width: 1199px){
.article-container-fix {
width: 400px;
margin-left: 1em;
background: black;
color: white;
}
}
Except width, all three other properties apply to this class ".article-container-fix" but not that "width: 400px". I don't know where I am missing anything.
I would suggest you to try it with a bit less max-width than 1199, something like 720px to see if it works or not. Other way to output this would be the following
HTML:
<div class="col-md-8">
<div class="article-container-fix">
Content here!
</div>
</div>
And use the same CSS you used before. It's complicated with bootstrap to actually get some things in place the way you want it, and for this, it could be interfering with pretty much anything. Hopefully this will work for you.
ITS Due to you have write your article-container-fix class with col-md-8 class. col-md-8 is a Bootstrap framework class. By default there is a default width given in bootstrap.css.
There is two way to overcome from this problem:
Either you have to write !important in your media query like width: 400px !important;
Or
You have to re-positioning your css in your <head> tag, include most last your responsive.css in your <head> tag.
I have a page I am setting up so that it looks the image below on the widest resolution, however on smaller resolutions the page setup will change what images are being displayed on screen, so I wanted to use a media query and data attribute. Only problem is:
I am not sure if I am using the data attribute correctly, and
I have no idea how I would target the <p> tags with a selector so I can use :after to display the image of the badges after the text.
This cant use any jquery/jscript as a requirement so it's kind of a pain.
Demo, it should be configured properly with bootstrap. (The image is linked correctly, but not being displayed due to the attr.)
Sample HTML:
<div id="main" class=" container">
<div class="row">
<div class ="col-lg-6 " id="badgeBox">
<div class ="col-lg-12" data-test="<a href='http://www.va.gov/' target='_blank'><div class='badgeContainer'><img id='va_badge' class =' badges img-responsive' src='http://i.imgur.com/BAbUq6v.jpg'alt='Veteran Affairs Badge'></a></div>"> </div>
<span><p> U.S. Department of Veteran's Affairs</p></span>
</div>
</div>
</div>
Sample CSS:
.badgeContainer {
width: 30%;
}
#media screen and (min-width: 1200px) {
//some selector that targets the p tag// :after {
content:"("attr(data-test) ")";
}
}
I think setting content from a data attribute would work like this.. However, the data-test needs to be inside the p and you'll have the larger problem of encoding the HTML content inside data-test..
#media screen and (min-width: 1200px) {
p:after {
content: attr(data-test);
}
}
A more Bootstrap friendly approach would be to use the included utility classes (http://getbootstrap.com/css/#responsive-utilities) to only show the image link at larger resolutions use visible-lg.
Here's a demo with both approaches: http://bootply.com/94916