I am editing the CSS of a DataTable plugin, When my window is at 839px or less I want my search filter to be on the left and when it's 840px or bigger I want it on the far right.
If I use only the text-align rule I will get an invalid value when the media query kicks in.
I managed to pull it off using, text-align to pull it on way when it's 839px or less and Flex when it's 840px or more, just wandering if I can do it cleaner.
Code I used.
.dataTables_filter {
text-align: right !important;
}
#media only screen and (max-width: 839px) {
.dataTables_filter{
display: flex;
justify-content: flex-start;
}
Fixed - Thanks DreamTek
Used the following code to make it more uniform and clean.
.dataTables_filter {
float: right;
}
#media only screen and (max-width: 839px) {
.dataTables_filter {
float: left !important;
}
}
If it is the position of .dataTables_filter that you want to edit then you need to adjust the float property used in datatables.
.dataTables_filter {
float:right;
}
#media only screen and (max-width: 839px) {
.dataTables_filter{
float:left;
}
}
From https://www.datatables.net/
Related
I have a hero class where I have:
.hero{padding: 90px 30px}
I have this, but when there is a bigger screen, I want to remove the padding completely so I tried:
#media screen and (min-width: 1150px) {
.hero{
padding: none !important;
}
}
I tried this but it came back with "invalid property value". Any suggestions?
You could use padding:0. Your attempt is not working because none is not a valid padding. A valid one is either a <length> or a <percentage>.
#media screen and (min-width: 1150px) {
.hero {
padding: 0;
}
}
I've tried setting width at max-width: 786px to container but it doesn't seem to affect it properly, but affects other elements as well.
#media (max-width : 768px) {
.container {
width: 768px;
padding-top: 200px;
}
}
How can I move the text container "David Kim ... people over profits" down # 967 width (so it doesn't cover his face) & not allow the email join box disappear # 767 width?
The site is at: https://davidkim.socialarts.com
Thanks so much in advance!
You already have this happening at 767px so why not alter that code to be 967?
#media (max-width: 967px) {
.tt-content-wrapper .tt-intro-sub {
padding-top: 433px;
}
}
This is the code that is removing the join now box:
#media (max-width: 767px) {
.banner-joinnow-form {
display: none;
}
}
Simply update this to width that you want it to disappear at.
I am developing website based on Bootstrap template.
Here is link: http://pixelslab.pl/ly/
I just have trouble with paragraphs in the middle - they are overlaping in strange way.
Any idea how to fix it?
screenshot of issue
The fixed height is causing this... change your CSS in the following:
#media screen and (max-width: 766px){
.elementor-text-wrap .section
{
height: auto;
min-height: 200px;
padding-top: inherit
}
}
In order to make them work as expected, you should set your default line-height to normal in a certain breakpoint like 767px. You should also apply flex-direction: column; to the parent element in order to get better results. So the result should be something like this:
#media only screen and (max-width: 767px) {
.elementor-text-wrap .section {
flex-direction: column;
}
.section p {
font-size: 14px;
line-height: normal;
}
}
}
I am working on a web site.
On min-width: 769px and max width of 1203px I was trying to remove the float for two divs so I can make it a full width option for both divs is:
Since I am using a page builder I tried to use my inspector tool on Chrome and search for appropriate classes or div that can do the trick and I pull the ff codes:
#media (min-width: 769px) and (max-width: 1203px){
.pbuilder_column_inner.pbuilder_droppable{
width: 100%;
display:block;
float: none;
}
}
But for some reason it doesn't do the trick. Am I doing it wrong?
Hi just remove width: 50% in or replace it with 100% instead:
.pbuilder_column.pbuilder_column-1-2{
width: 100%;
}
The following CSS properties:
float:none;
width:100%;
on the divs which classes are pbuilder_column pbuilder_column-1-2 (in the hierarchy, they are right below pbuilder_row_colwrapper ).
So, the code would be:
#media (min-width: 769px) and (max-width: 1203px){
.pbuilder_column{
float:none;
width:100%;
}
}
It does the trick, from my inspector at least.
Just use the class .pbuilder_column instead of .pbuilder_column_inner.pbuilder_droppable.
body,
#pbtheme_wrapper{
overflow-y: visible !important;
}
.pbuilder_column.pbuilder_column-1-2{
width: 100% !important;
}
You have to add below css:
#media screen and (min-width: 769px) and (max-width: 1203px){
.pbuilder_row_colwrapper .pbuilder_column {
float: none;
display: block;
width: 100%;
}
}
To me the real problem comes from the way you add your paddings to your elements. By removing or adjusting a lot of them, I was able to achieve it and increase the responsiveness (try to play around margin more than padding in some situations)
The main thing here, is not that your field aren't taking 100% of the container space, it's your button that overflows the container because of a 170px padding (with a !important, which is something I really don't recommend) so it seems like divs aren't taking the right amount of space.
So I wanted my nav bar to have 3 links with each link being to the left,center and right (http://lawthatworks.com/site/) so I decided to target each with a float. My problem is when my site is viewed on a mobile or tablet, the responsive menu is not showing properly because of the float tags. How would I go about fixing this?
Move this whole section
#menu-item-12{
float:left;
}
#menu-item-11{
float:right;
}
#menu-item-13{
float:center;
}
Into a media query using the existing breakpoint (min-width: 850px) this will mean that if the screen is bigger than 850px wide it will float otherwise it wont
#media screen and ( min-width: 850px ) {
#menu-item-12 {
float: left;
}
#menu-item-11 {
float: right;
}
#menu-item-13 {
float: center;
}
}
But the use of floats in layout is discouraged. I would recommend using the flexible box model layout. Set the parent as display: flex and justify-content: space-between; This will align all items spaced equidistant from each other.
#media screen and ( min-width: 850px ) {
#menu-home-menu {
display: flex;
justify-content: space-between;
}
}
While both methods will display the same in most modern browser, they are buggy. It is generally a good idea to stay away from them, unless you're doing something like adding an image to a paragraph and letting the text "float" around the image.