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.
Related
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).
Long time lurker, first time asker! I'm unable to find what I want after a few nights of searching.
I'm looking for very standard bootstrap behavior.
Greater than/equal to 760px width resolution, I want fixed width.
Below 760px width resolution, I want the two lists to stack and take 100% width.
The problem is that above 1200px there is a different fixed width. I tried to fix this by making setting the .container class a fixed width, but then the sub 760px is also fixed --- no longer fluid. I've also tried using media queries.
Here's the code I'm working on: http://travelprobiotics.com/
Any suggestions?
thank you,
Evan Jerkunica
If you are hosting bootstrap yourself, you can't go wrong using bootstraps customization tool found here.http://getbootstrap.com/customize/
Look under the 'Media Queries Breakpoint' section and changed the screen-sm to 760px. (it is already defaulted to 768px so if you're OK giving away the 8 pixels, skip this step and use the code snippet below by itself.)
After that, add this snippet below in your own stylesheet, set the container to whatever width you want to be 'fixed'
#media screen and (min-width:760px) {
.container {
width: 960px !important;
}
}
I'm working on an iPhone app where I'm using Pixate:
navigation-bar back-indicator {
background-image: url(backIcon.png);
background-size: 25;
}
This results in:
however its not centered with the Back text. How do i get the image to move down slightly?
Ive tried background-top-padding however that simply squashes the image down.
Any ideas? Thanks.
After playing around with padding options, it seems like anything larger than the default indicator height (22pts) cannot be pushed downward with padding.
If you want to create a smaller back indicator, you can account for an increased padding by adjusting the height (or width) accordingly, like so:
navigation-bar back-indicator {
background-image: url(custom_arrow.png);
background-size: 17 19;
background-bottom-padding: 2;
}
Also, it's worth noting that adding right padding to the back indicator will not move the back button text right, so you won't be able to fix the horizontal overlap in your particular example with padding on the back indicator. However, several examples from Apple drop the text altogether when using large indicators, so you might want to consider this as an option.
What I am trying to do is get the grey boxes on this to go to the edge of the page, I have found a similar article here but when I have tried changing the margin and padding to 0 nothing is happening, this table is created in a cms that has been coded by previous developers and I have no idea why I can't get these grey areas to automatically fill the edge of any size screen.
Any help on where I am going wrong would be grateful as I am re-developing this website and need it done ASAP
you will have to remove the width of the wrapper to auto
then add to your content2 div something like: padding: 0 200px; for the gray only
Your #wrapper style is set to width: 970px. Change that to width: auto and you're good to go.
if you are talking about the box shown in blue below
is because the table is been redered inside the <div id="wrapper">
if you change the width: of the DIV to auto.... your boxes will go all the way to the edge as shown on the other image
after changing the width to auto of the wrapper div looks like:
Let's say i have a sprite with lots of icons. I want to place one of the icons in the specific position over the div, e.g. 15px from the right side and 20px from the top.
Previously, when i had single image file i used the following code:
background: white url(./imgs/some/icon.png) no-repeat 91% 47%;
Now then the image is in the sprite i can access it using
background-position: 0 -471px;
But as i see it there is no place to add my current 91% 47%. Is there some kind of workaround?
It's possible to use CSS3 in the project if it helps.
Thanks!
Would you be able to add another <div>, give it the correct background, and absolute position it where it needs to be? I'm thinking that your background-position percentages are probably out when you use a sprite sheet.
If I understand your set of constraints correctly, you might be able to pull it off with a single div, but only if your png has a transparent background and the icon has enough "transparent space" as to not reveal any other icons.
Try:
background: white url(./imgs/some/icon.png) 91% 47% no-repeat, transparent url(./imgs/some/icon.png) 0 -471px no-repeat;