I'm using Isotope to present a grid of images within a Bootstrap 3 framework.
I've got a sticky footer (using recommended absolute positioning with bottom set to 0).
When the browser window is reduced in height, the div containing the isotope-d images doesn't stop where the sticky footer begins - so the bottom-most 60px of the div (actual amount depends on height set for footer) is hidden by the footer OR extends below the footer. The difference is determined on whether I set a height for the container divs.
Here's the html from https://codepen.io/marklsanders/pen/KrRVaK:
the codepen contains an example
I'm guessing the problem is caused by the fact that all the images positioned by Isotope are absolutely positioned.
Any suggestions as to how to work with this correctly?
thanks
Try changing your footer from position: absolute; to position: fixed;, and add padding-bottom: 75px; to your <body>.
Bear in mind that when you position absolute or fixed, that element is removed from the regular flow of the document. When you position it, it will most likely conflict with another statically positioned element.
In this case, adding padding to the body 'simulates' in the regular document the space that is actually occupied by the footer.
Additional note: The sticky footer approach generally means you'll need to set a fixed height for your footer. I've used 75px for the padding on the body, but you can fiddle with this for best results.
Related
I am maintaining a hubspot website and recently I have been asked to change a few things in the webpage. The first thing was, change the image in the ATF section. The section was 2 header tags followed by a form and an image placed side by side. The parent div of the form and image was set to display: flex and justify-content: space-around. Now, after changing the image, I had to resize it as well, the alignment changed. Now the form doesn't have the same left alignment as the h2 tag and p tags above it. I never touched the margin and padding of the parent div or the children divs. All I did was change and resize the image. How do I align the form element to be at par with the other things in the page. Justify-content: space-between solves the alignment issue but creates a lot of empty space in between.
Think I'm missing the obvious here, but I have a Bookstrap 3 navbar that works great in desktop view but as I squeeze the width and it gets to tablet size rather than collapsing into the toggle menu it's jumping the menu onto two lines:
http://www.doorsets.org.uk/
I've tried reducing the text size in the navbar via a media query but that isn't solving it.
What am I missing?
Appreciate it. Thank you.
NJ
One solution might be to change the point at which the navbar collapses, you can do this by creating a customized Bootstrap and setting the #grid-float-breakpoint to a larger number.
This variable unfortunately also influences the dt and dd inside a .dl-horizontal which might be a problem.
If you want to use a media query to reduce the font-size you can use the .navbar-default .navbar-nav > li > a selector. It however needs to become 9px at the smallest viewport size to still stay on a single row which is quite unreadable.
From the Bootstrap documentation:
Overflowing content
Since Bootstrap doesn't know how much space the content in your navbar needs, you might run into issues with content wrapping into a second row. To resolve this, you can:
Reduce the amount or width of navbar items.
Hide certain navbar items at certain screen sizes using responsive utility classes.
Change the point at which your navbar switches between collapsed and horizontal mode. Customize the #grid-float-breakpoint variable or add your own media query.
It goes on to say:
Changing the collapsed mobile navbar breakpoint
The navbar collapses into its vertical mobile view when the viewport is narrower than #grid-float-breakpoint, and expands into its horizontal non-mobile view when the viewport is at least #grid-float-breakpoint in width. Adjust this variable in the Less source to control when the navbar collapses/expands. The default value is 768px (the smallest "small" or "tablet" screen).
There is a large amount of white space below my flexslider and I do not know how to remove. I have played with the CSS quite bit and nothing seems to work, without breaking the "responsive" behavior. Any help is greatly aprpeciated.
Regards...
Site can be viewed here, all code in located in the head tag:
http://destinjustlisted.com/new/
Your div which contains the slideshow items must have the class "flexslider." Various things are setup for that class in flexslider.css, which is part of the download. One of the CSS properties it has is "margin." You'll see three values there. It looks like this:
margin: 0 0 60px;
I don't know if you're familiar with this property format, but it's common in CSS when you've got 4 settings, as with margin, border, or padding (all of which have 4 sides). You can have up to four values which represent: top, right, bottom, left (like you're going around a clock dial, starting with 12 o'clock). So, for example:
padding: 0 1px 0 2px;
would give no padding on the top and bottom, but 1 pixel on the right and 2 pixels on the left.
The flexslider CSS has 60 pixels of margin on the bottom. That leaves room for the navigation buttons if you want a visual representation of where you are in your slideshow or for you to select a specific slide. Unfortunately, if you set the property "controlNav" to "false" when you're setting up the plugin if you don't want to show those "buttons," then you just end up with the big blank area under the control. If you just set that property to this:
margin: 0;
all your problems will be solved!
If your images are different sizes (heights in particular), the Flexslider container will display as high as the tallest image. This can create the gap that you might see.
If this is the cause, resize your images in advance so they all have the same heights and widths.
I'm working on a Firefox extension, and am having problems getting relative constraints on the width of elements in the sidebar. For example, I want a description element in the sidebar that will always be as big as the sidebar when the sidebar is resized, and has text wrapping accordingly.
If I put a description in a box with a fixed maximum width, it will wrap correctly, but I can't get relative widths to work correctly using css. If is set the max-width to be 100% in css, it seems to just ignore it and the text will be on a single line and will overflow the sidebar. Any suggestions on how to put relative width constraints on a box in XUL so that text will wrap correctly?
It sounds like setting maximum width isn't what you really want. Have a look at https://developer.mozilla.org/en/XUL_Tutorial/The_Box_Model, setting flex attribute would be the right approach to make an element fill all the available space (typically flex="1"). The corresponding CSS property would be -moz-box-flex: 1.
I am having trouble trying to get a jquery ui tab panel's height to grow with floating divs within the panel.
the divs have specific data returning to these divs and I need them to float left and right to save ui real estate.
Does anyone know how i can fix this?
Actually, this is a well-known css issue. A discussion is here:
http://www.quirksmode.org/css/clearing.html
To summarize the article, any <divs> that you wish to function as both a tab pane and a float container should have these styles added to them either in your <style> or css <link> files:
overflow: auto;
width: 100%
This isn't a bug. It's intentional. The floating div literally lifts out of the container, and the container will not be aware of the floating div. At least, that was the goal.
You should do a search on here for "clearing floats" or other related css rules, because using the above will cause issues with certain browsers (in short: 'take care to test this, all the same').