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.
Related
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/
On our website: https://dev.shiftdivorceguide.com/ everything looks great on desktop.
When I switch to smaller screens like tablets I get a padding to the right of the screen. When I go even smaller (smartphones) I get an even larger padded area to the right of the screen.
I am unsure if the Panic Button bar at the top may be interfering with the code of the page (.panic-button-container). I have already tried altering the CSS in the media queries. To reduce the size of the white area on tablets I changed the code below concerning the logo and navigation widths.
I changed:
#media (max-width: 1024px) and (min-width: 981px) {
.header-right-panel {
width: 40%;
float: right;
}
}
to:
#media (max-width: 1024px) and (min-width: 981px) {
.header-right-panel {
width: 80%;
float: right;
}
}
This helped a little with the layout but I still get a white bar on smaller screens. The smart phones are the worst. Any possible solutions would be appreciated.
Stop using floats. Use Flexbox. Too many clearfix divs in the way.
Obviously the footer is extending past the site content body as well as some other elements.
If you really want to narrow it down set this style:
* { outline: 1px solid red }
That way you see what container is over-extending and then set it's width to 100% instead of a fixed width.
EDIT 2:
Using my technique I have narrowed down the problems:
.footer-menu
remove width: 500px;
.lp-section-content row
remove all negative margin
.vc_column-inner vc_custom_1548439628787
remove all padding
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.
Here's the page: https://hamzicabdulah.github.io/Raptitude/
The divs with the "other-stories" and "footer" classes overlap when the height of the "other-stories" div is set manually:
.other-stories {
height: 65%;
}
#media screen and (min-width: 768px) {
.other-stories {
height: 89%;
}
}
If I remove the above code, the divs don't overlap. What's the workaround here, considering the manually set height of the "other-stories" div needs to stay there in order to work fine in Firefox?
Set Float to footer and other stories.
.other-stories {
height: 65%;
float:left;
}
#media screen and (min-width: 768px) {
.other-stories {
height: 89%;
float:left;
}
}
It overlaps, because the <div>s in your <div class="other-stories"> are overflowing out of the div itself.
Why do you have a fixed height on other-stories what functionality are you trying to gain? Also, is there a particular reason you are using height %s?
With flex is a little tricky. I suggest to change all, remove flex display and use bootstrap grid. Do you know?
To explain it in a short way, this is what I'm trying to achieve: http://www.bootply.com/Muh7eahFC8#
A responsive design, with three columns, and a button at the bottom of each column.
The problem is that I'm setting the height of the columns manually, and I'd like the whole thing to automatically adapt to the longest content of the three column.
Right now, I'm setting a different height based on the size of each viewport:
#media only screen and (min-width : 992px) {
div {
height: 180px;
}
div a {
position: absolute;
bottom: -40px;
}
}
#media only screen and (min-width : 1200px) {
div {
height: 140px;
}
}
(Give it a try on different screen width)
I think that what I'm trying to achieve is pretty common. Isn't there a smarter wayt to achieve it?
-- edit
With #DavidG help I could fins a responsive solution: http://www.bootply.com/7C2WvyxNyZ
unfortunately hte 33% is hardcoded, if I change the number of columns I'll have to update the css, and I found NO WAY to center the buttons in each column
Can't remember where I got this snippet from but this will make your columns the same height:
.row {
display: table;
}
[class*="col-"] {
float: none;
display: table-cell;
vertical-align: top;
}
Then with a couple of tweaks, you can force the anchors to be fixed to the bottom of the div.
http://www.bootply.com/crLlXiiKqk