As you can see on the screenshot below, in my sidebar the right border of "KULTUR" is cutting off. Its always at the last element of the row.
I have tried to change margins and paddings but it's not working unfortunately.
Here is the URL to my website: http://holmsbuopplevelser.dahlsdata-test.com
It's in the right sidebar if you scroll down a bit.
Thanks in advance!
Try this:
.widget_categories li{
display: inline-block; //rather display:inline
}
I had checked your code and it is the only way you can manage tags with dynamic width and fix it!
find class ".widget_categories li" in your css and change display from "inline" to "inline-block".
.widget_categories li{
display: inline-block;
}
some of your li and buttons have this problem , add display:block to the buttons , and add display:inline-block to li , this will fix your issue, i checked your site
span.vc_gitem-post-category-name {
display:block;
}
.widget_categories li{
display: inline-block;
}
Related
My Site - Product Grid
When you hover over either of the product images on this page, there is a 2px horizontal line that appears to the left. I tried setting my padding, margin, no-wrap, I just can't figure it out. Thanks for looking and any advice.
I know I can cheat it by adding:
.mz-productlisting-image img {
margin-left: -4px;
}
But I don't want to if I don't have to!
This is the text-decoration:underline; of the anchor tag.
Simply add to
.mz-productlist-tiled a:focus,
.mz-productlist-tiled a:hover{
text-decoration:none;
}
Hope it helps :)
I have implemented BOOTSTRAP 3, NAV TABS to display content. But it takes the height of longest tabs, and white space is seen in other tabs. Why is this happening? I tried everything, but it didn't work.
The Link is: http://n.lookten.com/merchants.html
Can anyone suggest me whats happening here?
Thank You.
Try this css-
section.slice.bg-6{
overflow:hidden;
}
yes there is a difference of 1px.
Modify this class as
//bootstrap.min.css line no. 7
.navbar-nav > li {
float: left;
margin-bottom: -1px;
}
What I want to do is break up the inline-block <li>s. The code is generated and I have no access to it before it is written to the page. Because the <li> elements have no white space between them, they are not split and won't justify across the page.
I don't mind if the solution is CSS or Javascript based.
I have tried various things in CSS 'content:' and 'after:'.
Please see this fiddle for a demo of the problem: http://jsfiddle.net/2L56N/5/
Edit: The result should like the top example. However, the generated code is like in the bottom example (no space between the tags, causing the inline-block to become one). Drag the width over so only 2 images show to see the justify effect I am looking for.
Unless I'm misunderstanding the question, you can simply add margins to the li elements like so:
ul li {
display: inline-block;
margin:5px;
}
http://jsfiddle.net/B7cL9/
You can use display:flex; with justify-content:space-between; to simulate your text-align:justify when white space are missing in between your inline boxes this will only work for younger browsers
:
ul {
display:flex;
justify-content:space-between;
text-align: justify;/* your code */
}
ul li {
display: inline-block;/* your code */
}
DEMO
Hi guys I have a href on my page but it's waaay to wide and i've tried adding display:block's to it but it didn't help.
I have a lot of CSS so I think I shouldn't link my whole document, it's a mess.
I can give the link on which you might be able to test?
It's about the changing links under the slider on the frontpage.
Use:
.cycle-slideshow a {
display: inline-block;
}
EDIT: as pointed in the comments you have to override this behavior also in the pseudo-states (hover, focus and active). You can force that rule using display: inline-block !important; or with:
.cycle-slideshow a,
.cycle-slideshow a:focus,
.cycle-slideshow a:hover,
.cycle-slideshow a:active {
display: inline-block;
}
The display:block; is what causes the problem because it extends them to 100% width. Remove the display:block; from the link-style and also from the :hover-style.
I got the same problem but then I realized I just forgot to close with an </a>tag
I am trying to make a navigation bar with <nav> in HTML5 with a simple text and 3 links. This is pretty basic, but the text of my links gets mixed up and I don't know why.
↪ See my code at JSFiddle
You need to float your LI, not your UL. No need for position:absolute. If you want to move the menu to the right, you can float it as well, or use margin:left. Just be sure to clear your floats after.
See my tutorial: I Love Lists
it was because of the position:absolute and position:relative parts in your css.
Try this :
nav {
width:100%;
height:181px;
display: block;
background: url('http://i.imgur.com/JrTUv.png') top no-repeat;
margin-top:30px;
}
nav ul {
float:right;
list-style:none;
}
nav ul li {
display:inline-block;
}