I'm trying to override an inline style set by a 3rd party API,
the element in question
<li class="BrainhubCarouselItem BrainhubCarouselItem--active"
style="padding-right: 25px; padding-left: 25px; width: 225px;
max-width: 225px; min-width: 225px;"/>
I have tried selecting the element like so
li.BrainHubCarouselItem.BrainHubCarouselItem--active {
padding-left: 3px !important;
padding-right: 3px !important;
width: 100px !important;
min-width: 100px !important;
}
However none of the styling is taking place
Change BrainHubCarouselItem to BrainhubCarouselItem (H to h)
li.BrainhubCarouselItem.BrainHubCarouselItem--active { .... }
So your css would look like this
li.BrainhubCarouselItem.BrainhubCarouselItem--active {
padding-left: 3px !important;
padding-right: 3px !important;
width: 100px !important;
min-width: 100px !important;
}
Related
Any idea why there's a thin grey line above my green and how to get rid of it?
Thanks
https://jsfiddle.net/Lc7gym88/
hr {
border-bottom: 4px solid #469551;
width: 30%;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px !important;
height: 0;
}
It's because <hr/> has border (at least in FireFox since <hr/> has browser dependent style).
Remove border first.
hr {
border: none;
border-bottom: 4px solid #469551;
width: 30%;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px !important;
height: 0;
}
body {
background-color: black;
}
<br/>
<hr/>
Replace this:
border-bottom: 4px solid #469551;
by this:
border: 4px solid #469551;
Here is the JSFiddle demo
Removed default <hr> border and uses height and background
hr {
background: #469551;
width: 30%;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px !important;
height: 4px;
border:none;
}
Example : https://jsfiddle.net/Lc7gym88/1/
by default tag <hr> taking border so you need first border zero. then add height check my demo
I'm pretty sure this is fairly easy, but i'm stumped.
I am working on a responsive layout design. Regardless of the size of the page, I always want there to be a 10px margin on the left and a 10px margin on the right. I am able to achieve the 10px margin on the left, but I can't figure out the right margin. How would I do this with css? I can estimate the % width based how much space I want on the right, but obviously as the page size scales so does this margin. How do I always keep margin-right? Here is an example of my code:
form {
width: 100%;
display: inline-block;
margin-left: 10px;
margin-right: 10px;
}
'form' sits inside '#wrap' and '.left' all of which have the same margin-right applied:
#wrap {
width: 95%;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: auto;
-moz-box-shadow: 0 0 3px 3px #CCC;
-webkit-box-shadow: 0 0 3px 3px#CCC;
box-shadow: 0 0 3px 3px #CCC;
background-color: #fff;
display: inline-block;
text-align: center;
}
.left {
float: left;
text-align: left;
padding-right: 10px;
padding-left: 18px;
font-weight: lighter;
font-size: 12px;
color: #777777;
padding-top: 10px;
width: 100%;
margin-right: 10px;
}
This will do the magic:
form {
width: auto;
display: block;
margin-left: 10px;
margin-right: 10px;
}
The problem is that the form ends up being 100% the width of its parent container plus the 20px for the two margins.
It would be easier to set the form inside a parent element and put padding on that. e.g.
body{
padding:0px 10px;
}
form {
width: 100%;
display: inline-block;
}
I am trying to make an expandable div that will have a minimum width of 200 px but will expand if the content is longer. the problem is the width always displays as 100%, If i put a width: 200px it will stay 200 and will not expand.
This is my CSS code for the div:
#section_title {
background-color: #2b65ae;
border-radius: 10px;
color: #ffffff;
padding: 5px 30px 0px;
background-size: 100% 100%;
font-size: 24px;
min-width: 200px;
height: 30px;
text-align: center;
font-style: italic;
margin: 0 auto;
text-transform: uppercase;
-moz-box-shadow: inset 0 0 8px #444444;
-webkit-box-shadow: inset 0 0 8px #444444;
box-shadow: inset 0 0 8px #444444;
}
You may use display:table properties to achieve this :
Update your CSS with :
display:table;
width: 200px;
DEMO , using just words and white-space to keep all on one line for the demo purpose.
You can use this
div {
float: left; /* or right according to your requirement */
width: auto;
min-width: 200px;
max-width: 100%;
}
This will keep the minimun width 200, will expand on more content and won't go beyond 100% width.
Try like this:
#section_title {
display:inline-block;
width: auto;
min-width: 200px;
max-width:100%;
}
Updated fiddle
If it's just for one line of content, then you can add a float to your css.
#section_title {
min-width: 200px;
height: 60px;
background-color: rgb(14,87,145);
float: left;
}
Example fiddle here.
this is my first post here. I don't know how to explain my problem because I don't really know what is causing my CSS code to break. It would be easier to show you in a photo.
So I have a div tag and input and div child elements inslide. One of the div is static 32px x 32px and I am calculating its width with calc(100% - 32px), but when scaling some pixels aren't filled with the input.
Here's a photo of the problem: http://imgur.com/TkRFLde
This occurs when the zoom is not divisible by 100. For example it breaks on 110%, 150% and 175%. But it is right when the zoom is 100%, 200%, 300%...
Heres my code:
<div class="search">
<input type="text" value="Search" class="search-text" />
<div class="search-icon" ></div>
</div>
CSS:
.search {
height: 32px;
width: 250px;
}
.search-text{
float:left;
width: calc(100% - 55px) !important;
display: inline-block !important;
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
margin: 0;width: 196px;
}
.search-icon{
display: inline-block !important;
background-color: #ACB6BE;
height: 30px;
width: 31px;
float:right;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
cursor: pointer;
border: 1px solid #acb6be;
}
input[type=text] {
border-radius: 5px;
border: 1px solid #acb6be;
min-width: 180px;
color: #acb6be;
padding: 0 10px;
height: 30px;
background-color: #fff;
font-weight: 600;
}
Or jsfiddle: http://jsfiddle.net/39VDR/1/
The problem happens because when you zoom, your values will not be integer anymore. This means that rounding will take place and the outer container (.search) will be 1px larger than you would expect.
You can remove the float:right on the .search-icon and it will work ok.
You can see it here:
http://jsfiddle.net/39VDR/4/
.search-icon{
display: inline-block;
background-color: #ACB6BE;
height: 30px;
width: 31px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
cursor: pointer;
border: 1px solid #acb6be;
font-size:12px;
vertical-align: top;
}
Still, as mentioned, you can remove the !important if you just add more specificity to your selectors.
I have a container that I am calling #profile-grid and I want it to be 330px wide. It contains an image that is 330px wide and an inline list below the image that is 330px wide with a 1px border all around. I want the list and image to be exactly the same width. In IE it lines up perfect, but in Chrome it is 2px too short. What am I doing wrong? http://jsfiddle.net/ZPQUP/13/
The problem is, as your title suggested, the box model.
Your best bet is to just explicitly set the box model, and then use a polyfill to make it work for older browsers. Paul Irish describes the problem and solution here: http://paulirish.com/2012/box-sizing-border-box-ftw/
I've shown what this looks like in an updated fiddle here: http://jsfiddle.net/mstauffer/ZPQUP/14/
Essentially, the different box models differ on whether borders and paddings are included in or added externally to the width.
Your div#listed is 330px wide plus 1 pixel either side for the border. That's how the 'standard' box model works. Reduce the width by that 1 pixel each side (i.e. 298px) and everything will line up...
... in the good browsers. In older versions of IE, you'll see a problem. Use a valid DOCTYPE and that will be resolved.
DEMO:
HTML:
<div id="profile-grid">
<img src="http://a8.sphotos.ak.fbcdn.net/hphotos-ak-snc7/428132_268919676513976_100001878373747_678116_241912084_n.jpg"/>
<ul id="listed">
<li class="item"> Profile </li>
<li class="item"> About </li>
<li class="item"> Photos </li>
<li class="item"> Albumlist </li>
</ul>
</div>
CSS:
#profile-grid {
height: 302px;
width: 330px;
}
#profile-grid img {
display: block;
width: 100%;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}
#listed {
height: 50px;
border: 1px solid #ddd;
overflow: hidden;
}
li.item {
margin: 0px;
display: inline;
float: left;
height: 50px;
border-left: 1px solid #ddd;
display: inline;
}
#listed li a {
display: block;
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
font-size: 15px;
color: #123454;
line-height: 50px;
padding: 0px 15px 0;
text-align: center;
text-decoration: none;
vertical-align: baseline;
}
#listed li a:hover{
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
font-size: 15px;
color: white;
background-color: #123454;
text-align: center;
text-decoration: none;
}
NOTES:
<ul> is a block element. whatever the width of the parent, it grows with it. sort of an automatic 100%. give the parent 330px, it also goes 330px.
as long as block elements don't have a specified width, the 100% width of it will include it's borders. so if you have a parent of 330px, the block element (in this case the <ul>) will be 298px wide + 1px left border + 1px right border.
on the other hand, specifying width for it will exclude borders in the count, thus the overflow.
giving an image display:block and width:100% also does the same thing PLUS it preserves the image ratio (and not squishing it in any way)
To avoid this issue, it is ideal to not mix width and padding or border on the same element.
In your case, if you simply remove the width: 330px from .listed and add it to .listed ul instead, you should be fine:
#listed {
display: block;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
height: 50px;
overflow: hidden;
border: 1px solid #ddd;
}
#listed ul {
margin: 0px 0px 0px -1px;
padding: 0px 0px 0px 0px;
overflow: hidden;
width: 330px;
}