<td class>
<div class="browser indicator">
<div class="mobile indicator">
In this code, the class indicator has a display:inline-block. How do I increase the specificity weight of the class browser and mobile so I can give them a separate value for display?
You can do that by specifying both classes "chained", meaning browser when it has indicator as well use this style.
.browser.indicator {
}
.mobile.indicator {
}
The important part for you is to not have the space between the classes because doing this will style children with the class indicator
.browser .indicator {
}
.mobile .indicator {
}
U can use this one:
.indicator {
display:inline-block;
width: 100%;
}
#media only screen and (max-width: 600px) {
.indicator {
display: block;
}
}
if screen size will be less 600px all styles which u have at #media will provide for page.
Related
I have a Joomla Module that I'm trying to keep responsive for different screen sizes but displaying and hiding columns. This works well on full page displays.
#media (max-width: 800px) {
.team_name { display:none; }
.team_abbr { display:inline-block;}
.overall { display: inline-block;}
.divisional { display:inline-block;}
.wide { display:none;}
#btn_row { display:inline-block;}
#div_split { display:none;}
}
#media screen and (min-width: 800px) {
.team_name { display: inline-block; }
.team_abbr { display:none;}
.overall { display: inline-block;}
.divisional { display:inline-block;}
.wide { display:inline-block;}
#btn_row { display:none;}
#div_split ( display:inline-block;)
}
But now my challenge is that I want to have this same page/module used inside another page as a module position (which is only about 200 pixels wide).
Is there a CSS command similar to #media that will get the module width instead of the entire page width that the module is on?
Thanks in advance...
One way to do this is to add a class to your module, then size the elements inside the module relative to their parent (ie the module)
(1) Start by going to the module you want to work on > advanced tab > module class suffix
(2) Add a class and remember to include a space at the start, eg ' my-module-class'
(3) Finally, size your module elements relative to the module, eg
#media (max-width: 800px) {
.team_abbr {
...
width:50%;
}
}
Good luck, I hope this helps!
I'm trying to hide a specific div using a media query which is working fine. However, I need it to show when that div is within another specific div. Is this possible. This is the CSS:
#media (min-width: 665px) {
.mrbcircle-ipad:not(.link-inside.mrbcircle-ipad) {
position:absolute;
display:none;
}
}
so .mrbcircle-ipad should be hidden over 665px unless it's within .link-inside.
Currently this is showing .mrbcircle everywhere so I know it's wrong. How can I fix this?
Thanks
Anthony
#media (min-width: 665px) {
.mrbcircle-ipad {
position:absolute;
display:none;
}
.link-inside .mrbcircle-ipad{
position relative;
display: block;
}
}
Use two rules inside the media query: The first to hide it when the viewport is wider than 665px, the second to make it visible if it's inside a certain parent:
#media (min-width: 666px) {
.mrbcircle-ipad {
position:absolute;
display:none;
}
.link-inside .mrbcircle-ipad{
display: block;
}
}
Many site designs call for a dark background with a lighter foreground page that contains the site's content. When using Bootstrap, it seems logical that one would merely apply the light color to the .container div and be done with it. However, Bootstrap's container does not provide any padding between its edges and the columns within, so this solution provides a light background but with the column content flush with the edges - not a good look.
This is a common problem and there are several solutions on stackoverflow and elsewhere for Bootstrap 2, but I couldn't find anything useful for Bootstrap 3.
One of the Bootstrap 2 solutions involved using .container-fluid which switches the internal grid from pixel to percentage based. Then one may apply padding to a a background div within .container-fluid and the internal columns will seamlessly adjust to fit. This seemed like a good approach, but the specific CSS used to tweak some of the other styles didn't work with Bootstrap 3.
After digging through the Bootstrap source, I noticed that the only difference between the .container and .container-fluid rules, in grid.less are three media queries. I wrapped my page's content in .container-fluid then overrode its definition with one that included the media queries so that the page content would respond the same as the header and footer, which use the standard .container.
Here's the HTML:
<html>
<head>
<title>Bootstrap 3 Container Padding Example</title>
</head>
<body>
<div class="page-container">
<div class="container-fluid">
<div class="page-bg">
<!-- PAGE CONTENT -->
</div>
</div>
</div>
</body>
</html>
And then the .less:
.page-container > .container-fluid:first-child {
.container-fixed();
#media (min-width: #screen-sm-min) {
width: #container-sm;
}
#media (min-width: #screen-md-min) {
width: #container-md;
}
#media (min-width: #screen-lg-min) {
width: #container-lg;
}
}
Then added padding to the .page-container div:
.page-container {
.page-bg {
padding: 15px;
background-color: #EFEFEF;
}
}
body {
background-color: #333
}
This seems to work. I haven't completed the styling for the interfaces that will reside within this container yet so there could be issues down the road but everything seems to render fine so far.
Here is a working example of this solution on codepen.io.
Note that the solution above uses less.css after including Bootstrap's variables and mixins .less files. Here's the compiled CSS:
.page-container > .container-fluid:first-child {
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
}
#media (min-width: 768px) {
.page-container > .container-fluid:first-child {
width: 750px;
}
}
#media (min-width: 992px) {
.page-container > .container-fluid:first-child {
width: 970px;
}
}
#media (min-width: 1200px) {
.page-container > .container-fluid:first-child {
width: 1170px;
}
}
.page-container .page-bg {
padding: 15px;
background-color: #EFEFEF;
}
body {
background-color: #333333;
}
I have this form, which i print in order to do my work.
Now, the issue is, in the portrait mode, it gets minimized, i mean it looks small, like half of the page of an A4 Letter, while in landscape mode it looks just fine.
Here is my media print css:
#media print {
textarea{
border:none;
}
textarea#difekti {
padding-bottom:40px;
border:none;
}
#menu-home { display:none }
#status-print { display:none }
#submit-f {display:none};
#MainContent {
display: block;
}
#tab1 table, td, th {
border: 1px solid red;
}
#tab1 thead {
float: left;
}
#tab1 thead th {
display: block;
background: yellow;
}
#tab1 tbody {
float: right;
}
#programi {
display:none;
}
#kursor {
display:none;
}
#adresa { }
* {position:static !important;}
}
Any suggestion?
Besides, i have issues with IE too.
Can i create an additional media print for IE?
Thanks
You should change this to a separate CSS file and link it to your HTML document using media="print" at the bottom most of any CSS link.
<link rel="stylesheet" type="text/css" media="print" href="path/to/your/css" />
This will also help you avoid the issue with IE.
The #page CSS at-rule is used to modify some CSS properties when printing a document. You can't change all CSS properties with #page. You can only change the margins, orphans, widows, and page breaks of the document. Attempts to change any other CSS properties will be ignored.
#page { size:5.5in 10in; margin: 1cm }
#media print and (orientation: portrait) { styles here }
#media print and (orientation: landscape) { styles here }
just using min-width I would like to hide challange-target element below 408px and show the challange-target up to 408px.
I tried this code but it does not work:
#media only screen and (min-width: 408px) {
.challange-target {
display: block;
}
}
Any ideas?
Here is the jsfiddle link
You mean you want to hide .challenge-target when screen width < 408, and show it at 408px when screen width is >= 408px?
smallest first; hide that elem
.challange-target {
display: none;
}
#media only screen and (min-width: 408px) {
.challange-target {
display: block;
width:408px;
}
}