I'm having a trouble fixing the table on this link . It has two rows, but when I turn it to mobile/tablet views, the second row overlaps over the first row.
It looks like this on the attachment:
Please help. I'm not really good in CSS.
This is because of these lines:
#media screen and (max-width: 994px)
table.colors_pricebox tbody tr:last-child td:nth-child(2) table:first-child tbody tr:first-child
{
position: absolute !important;
}
Absolute positionings do overlap each other if they have the same margins.
If you remove the attribute or replace it by position: relative the <tr> - tags don't overlap anymore, but you have to find a way to display your <tr> - tags containing the price tag and such.
Here is the fix i recommend for quick turn around for the moment. Add this css in your media queries
#media screen and (max-width: 994px) {
td.productDetailDiscountWrapper table tr td {
padding-top: 50px !important;
}
.product_productprice {
margin-top: 40px !important;
}
}
Related
My site contain a lot of data like 150 records on page, when I press ctrl+p then it will show the first page only, like only the visible part of the page but I want full [ 150] records.
This is what I tried So far:
<style>
##media print
{
html, body {
height:100%;
margin: 0 !important;
padding: 0 !important;
overflow: auto;
}
#header, #menuheader
{
display: none !important;
}
table { page-break-inside:auto }
tr { page-break-inside:avoid; page-break-after:auto }
thead { display:table-header-group }
tfoot { display:table-footer-group }
#prctrow
{
text-align:center !important;
}
}
</style>
This css remove the scrollbar from print preview but data is still not showing.
A few steps to possibly fix this as it's a bit difficult to see the complete issue with only your CSS.
Make sure your actual CSS is using one "#" symbol for "#media print {"
"display: inline-block" might need to be set to "display: block;"
Anything floated may have to be cleared and set to not float
Things positioned absolute or fixed should be set to static
Add something at the bottom of the page to test if everything is blank or just the table on the second page
I'm attempting to apply media queries to a table to hide optional columns on smaller devices.
I have two columns to hide based on two screen breaks:
#media screen and (max-width: 33em) {
th.optional-1,
td.optional-1 {
display: none !important;
}
}
#media screen and (max-width: 43em) {
th.optional-2,
td.optional-2 {
display: none !important;
}
}
Then I apply class="optional-1" to both the th and td elements. I add data-role="table" to get the table to style correctly.
The media query works fine, however once the table gets to the default responsive size the table drops to a flattened view. I first thought about adding a class to force the table to be unresponsive (which works) but it then stops my optional classes working as both are competing with !important which is required to get over the default responsive style in JQM.
.table-responsive-none td,
.table-responsive-none th,
.table-responsive-none tbody th,
.table-responsive-none tbody td,
.table-responsive-none thead td,
.table-responsive-none thead th {
display: table-cell !important;
margin: 0 !important;
}
.table-responsive-none td .ui-table-cell-label,
.table-responsive-none th .ui-table-cell-label {
display: none !important;
}
Alternatively I could use data-mode="columntoggle" but I don't want the behaviour of the column toggling facility and I want to also specify my own breaks.
The problem is fixed when removing data-role="table" but then the table doesn't look right.
Bugger if only I thought of this sooner.
I solved the problem by removing data-role="table" and adding the class ui-table to the table which now turns off responsive behaviour and lets me control it. In the end I only need the media queries to hide the columns at the given breaks.
#media screen and (max-width: 33em) {
th.optional-1,
td.optional-1 {
display: none !important;
}
}
#media screen and (max-width: 43em) {
th.optional-2,
td.optional-2 {
display: none !important;
}
}
I'm attempting to use some media queries for a website I'm building. The problem I'm having however, is while the media query styles are actually being applied, they're being overridden. I can't for the life of me tell why because I'm using the same exact selectors. Can anyone point out something that I'm not seeing?
ORIGINAL CSS
#global-wrapper-outer > #global-wrapper-inner {
width: 85%;
height: 100%;
margin: 0 auto;
position: relative;
}
#global-wrapper-outer > #global-wrapper-inner > nav {
background: #fff;
padding-bottom: 20px;
box-shadow: 0 4px 2px -2px gray;
}
MEDIA QUERY CSS
#media screen and (max-width:1024px) {
#global-wrapper-outer > #global-wrapper-inner {
width: 100%;
}
#global-wrapper-outer > #global-wrapper-inner > nav {
display: none;
}
}
The second media query is working fine, where I set the nav to have a display of none. However, when I try to set the width of #global-wrapper-inner to 100% it doesn't apply. I can see the style being "applied" when I press F12 and select that element. However, the style itself is crossed out and not actually applied and it still has the original width of 85%.
The selectors in your original CSS have the same specificity as the selectors within your media queries (the first declarations are also targeting the same property - width) and because the media query rule set is being overridden I'm going to assume that it appears before the original rule set.
The second media query selector works because it's targeting a property that wasn't set in your original CSS, so specificity isn't relevant.
To have the first media query selector take precedence, prepend an ancestor element to it:
#media screen and (max-width:1024px) {
body #global-wrapper-outer > #global-wrapper-inner {
width: 100%;
}
#global-wrapper-outer > #global-wrapper-inner > nav {
display: none;
}
}
You need to link the media query file (queries.css) later than the normal css file (style.css). That way the rules in the queries.css will override those in style.css.
I have been at least 2 hours trying to find the override CSS problem till I found that my line comments where wrong... And the second definition of CSS wasn't working:
So, don't be so stupid as I !:
/* LITTLE SCREENS */
#media screen and (max-width: 990px) {
... whatever ...
}
/* BIG SCREENS */
#media screen and (min-width: 990px) {
... whatever more ...
}
never use: Double bar as I did:
// This is not a comment in CSS!
/* This is a comment in CSS! */
Here is the answer. (at least what worked for me)
I've had this problem before, and it took me a while to realize what I did, but once I figured it out it's actually pretty easy.
Ok so imagine I have this as the html
<main>
<div class = "child1"> </div>
<div class = "child2"> </div>
</main>
and then this as the CSS
main .child1{
height: 50px;
}
/* now let's try to use media quaries */
#media only screen and (max-width: 768px) {
.child1{
width: 75%;
}
}
The code above won't affect the .child. Just like someone mentioned above, the main .child1 overrides .child1. So the way you make it work is to select the element just like we did at the very beginning of the CSS above.
/* this will work */
#media only screen and (max-width: 768px) {
main .child1{
width: 75%;
}
}
So as a conclusion... select the elements the same way every time.
Meaning ... for example in the above code, in your CSS, you should either select it as main .child1throughout the whole CSS or .child1 or else they get mixed up, one ends up overriding the other.
From the code you submitted, this probably won't resolve your issue. However, in your CSS if you are nesting styles inside of one another:
.main-container {
.main {
background: blue;
}
}
A media query for .main won't work because of the nesting. Take .main out of .main-container and then the media query will work as assumed:
.main-container {
}
.main {
background: blue;
}
Check if your media query braces are equal.
Sometimes it is very subtle but when you miss a single brace the rest of the media queries mentioned for certain break points will not work
example:
#media(min-width: 768px) and (max-width: 991px){
#media (max-width: 767px){
.navbar-brand p {
font-size: .6em;
margin-top: 12px;}
.navbar-brand img {height: 20px;}
#collapsable-nav a {
font-size: 1.2em;
}
#collapsable-nav a span {
font-size: 1.2em;}
}
Here you can see i have started the braces for max-width:991px but forgot to end so the next set of codes in media query for max-width:767px will not work.
It is a very simple mistake but took hours because of lot of braces in the codes.
Hope it helps. Happy Coding!
What about using !important? If you range your media query from ( min-width: 176px ) and ( max-width: 736px ) or even up to 980px?
There can be some reasons because of which this type of error may occur.
I myself faced this issue where I was not able to understand what I am needed to do and was confused that, does media query just overrides the elements.
Here's what I understood:
MEDIA QUERY CSS:
#media screen and (max-width:1024px) {
#global-wrapper-outer > #global-wrapper-inner {
width: 100%;
}
#global-wrapper-outer > #global-wrapper-inner > nav {
display: none;
}
}
here you were able to override #global-wrapper-inner > nav i.e., 2nd media query selector, by display: none;
because you never added the display line in the original css, because of which there was nothing to override you just have given that display type should be none.
Whereas just in the 1st media query selector you already had given width:80%;
Basically media query doesn't override as far as I have understood but it take precedence, like already explained by one of them
by which media query comes to work:
https://stackoverflow.com/a/19038303/15394464
also if still did not get your doubt clear, https://www.youtube.com/watch?v=acqN6atXVAE&t=288s
then this might help.
I'm trying to build a list of two types of items, let's call them green and red. In resolutions below 980 I want them stacked in one column, in resolutions above 980 I want them stacked in two columns.
This is what I got so far: http://kristofferk.se/list-test/
(Play around with your browser width to see the one/two column-thing.)
My question: is there an easy way to make the items stack (without the vertical space in between) using just CSS? Not interested in jQuery etc.
Thanks!
you can achieve your results through CSS media queries this is the roughly idea what i am mentioning below:-
#media screen and (max-width: 980px)
{
.class {
background: #ccc;
}
}
read more about media queries :- http://webdesignerwall.com/tutorials/css3-media-queries
UPDATED
just give clear:right to your .in class that vertical space will remove....
.in {
clear: right;
color: green;
float: right;
}
You can write like this:
.in {
clear: right;
color: green;
float: right;
}
.in + .in {
margin-bottom:-30px;
}
I am using simple CSS with modern browsers: IE 9 and Firefox 10.
<link href="/css/print.css" media="print" rel="stylesheet" type="text/css" />
With this content it works.
#media print
{
#wrap, div.push, div.footer, div.barra_sopra_datatables, div.fg-toolbar, img{
display: none;
}
body {
font-size: 10pt;
}
* {
margin: 0;
padding: 0;
}
}
I need to hide some columns of a table, so just for testing I tried
tr:first-child {
display: none;
}
but it hides all the tr elements.
I’ve alsove also tried td:first-child and table tbody tr td:first-child and other selectors, and all of them fail. I need to maintain compatibility with IE 8. kimblim.dk says that IE 8 supports these selectors, so why won’t it work? I’m not trying to set background color which many pointed out doesn’t work.
I think you cannot just don't display table cells.
display:none means, don't display it at all, so do as it would not have been there in the first place. Perhaps the browser thinks, if the first column is not there anymore, the next column is the new first one and then it hide this columns as well.
Try to give a table-cell a class hide-in-print and then
#media print {
.hide-in-print {
display: none;
}
}
Maybe #media print is not supported fully by IE. If this is true, try conditional comments.