I'm having a problem on my new website. But first I should give you some information.
I'm building a full responsive website with a portfolio. My portfolio images stands in a DIV and response to the screen size. On a screen with more then 1005px it's working perfect. Also the scaling works great. This is because the following CSS line:
#media only screen and (max-width: 1005px) {
The div with my image is newtextportfolio. The image itself doesn't use CSS except 100% width and height. When i give my div the follow definition (height: auto;) i get a white line under my images. And i don't want the white line :(
.newtextportfolio {
width: calc(95% + 10px);
height: auto;
margin-right: 25px;
}
I can make it disappear if I make the height for example 200px. But when I view my site on an iPad this makes the images stretch (because it's fixed and not responsive).
Does anyone know how i can make the white line disappear? I already tried some things with calc, percentages but this also makes the line, only fixed pixels doesn't.
.newcontainersmallleftprices {
width: 310px;
float: left;
margin-left: 14px;
}
.newtop1 {
width: 310px;
background-image: url("../images/tops/portfolio1.png");
text-align: center;
font-size: 23px;
color: #FFFFFF;
height: 50px;
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;
margin: auto;
padding-top: 20px;
float: left;
position: relative;
z-index: 2;
}
.newtextportfolio {
width: 310px;
height: 200px;
text-align: center;
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px #888;
box-shadow: 0 0 5px #888;
margin: auto;
background-color: #FFFFFF;
float: left;
position: relative;
z-index: 1;
font-size: 17px;
}
#media only screen and (max-width: 1005px) {
.newcontainerpricesmall {
width: 100%;
}
.newcontainersmallleftprices {
width: 95%;
margin-bottom: 25px;
margin-left: 4%;
}
.newtextportfolio {
width: calc(95% + 10px);
height: auto;
margin-right: 25px;
}
.newtop1 {
width: 95%;
padding-top: 20px;
padding-left: 5px;
padding-right: 5px;
margin-right: 25px;
}
}
<div class="newcontainer">
<div class="newcontainerpricesmall">
<div class="newcontainersmallleftprices">
<div class="newtop1">Broeckerhave</div>
<div class="newtextportfolio">
<a href="http://beta.gjwd.nl/images/portfolio/broeckerhave.png" data-lightbox="image-100" title="" class="portfolioimg"><img src="http://beta.gjwd.nl/images/portfolio/thumb/broeckerhave.png" width="100%" height="100%" /> </div>
</div>
Make the img element display:block.
https://jsfiddle.net/jmarikle/95gsk2tu/
An alternative approach is to give the image vertical-align: top;. This is being caused by the fact that images are inline elements with some block attributes. They retain line height, letter spacing, etc. Block level elements do not have those added calculations to their size, and aligning vertically collapses the attributes that cause the gap at the bottom.
Related
I have the following code:
.mod-prb {
display: block;
width: 250px;
height: 35px;
border: 2px solid #809097;
border-radius: 8px;
padding: 3px;
}
.mod-prb > div {
display: block;
height: 20px;
height: 30px;
border: inherit;
border-radius: 8px;
text-align: right;
padding: 0 10px;
}
<div class="mod mod-prb">
<div class="perc"></div>
</div>
The problem is that the <div class="perc"> can go up to width:95%;. How would I go about calculating pixels so that I can use JS 1%-100%. To clarify: I'm adding width with JS, so that's not an issue.
Why this happens
This issue is happening because you are setting the width to 100%, but the inner box also has a padding of 10px (in left and right) and a border of 2px. That makes it have an actual width of 100% of its parent width + 20px (10px margin on both sides) + 4px (2px border on both sides).
How to fix it
You could fix it in different ways. The easiest one would be to use box-sizing with a value of border-box:
The width and height properties include the padding and border, but not the margin.
The code would look like this (note how the height changes too):
.mod-prb {
display: block;
width: 250px;
height: 35px;
border: 2px solid #809097;
border-radius: 8px;
padding: 3px;
}
.mod-prb > div {
display: block;
height: 35px;
width:100%;
border: inherit;
border-radius: 8px;
text-align: right;
padding: 0 10px;
box-sizing:border-box;
}
<div class="mod mod-prb">
<div class="perc"></div>
</div>
I have a circular thing going on for my website (amitnkalra.github.io)
My image seems to be to big for this? How do I make this smaller and still show the same part of the image that it's showing right now.
I have the following code :
.profile {
border-radius: 150px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
background: url(img/Avatar.jpg) no-repeat;
width: 200px;
-moz-box-shadow: 0 0 1px #7992ce;
box-shadow: 0 0 1px #7992ce;
margin: auto;
height: 200px;
}
Also, my social media icons aren't displaying, they're clickable, but the icons don't show-up, why is that?
Here's the code for that:
.Twitter {
width: 25px;
height: 25px;
background: url(img/Twitter.png);
margin: auto;
display: inline-block;
}
Your divs are way smaller (25x25) than your background images, so you're only seeing fractions of them. In order to fit them you can use:
background-size: 100%;
on all the elements that have social images set as backgrounds.
Ideally, in order to optimize the website performance and safe some bandwidth, you'd shrink those images down to 25x25 pixels (unless you use the big versions elsewhere).
body {
text-align:center;
}
.profilePicture {
border-radius: 150px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
background-image: url(http://amitnkalra.github.io/img/anotherAvatar.jpg);
background-size: cover;
background-position: 45px top;
width: 200px;
height: 200px;
-moz-box-shadow: 0 0 1px #7992ce;
box-shadow: 0 0 1px #7992ce;
margin: auto;
}
.Twitter {
display: inline-block;
width: 50px;
height: 50px;
margin: auto;
}
.Twitter img {
height: 100%;
width: 100%;
}
<div class="profilePicture"></div>
<div class="Twitter"><img src="http://amitnkalra.github.io/img/Twitter.png" /></div>
The body css is not neccessary. I added it just to center the .Twitter
I used background-size: cover to ensure both width and height of the image fits the div and move the image to the left a bit by using background-position.
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;
}
How to make a fixed positioned div fit its content width?
I've made a demo here
Before clicking on the Load button, the div must only have enough width to contain the gif image and the button.
When more content is loaded, the width of the div must fit its width.
here is the CSS I've made
body{background: #eee; }
#divToCenter{
border-radius: 5px;
box-shadow: 0 0 0 10px rgba(0,0,0,0.2);
background: #fff;
padding: 20px;
position: fixed;
top: 20px;
right: 0;
left: 0;
margin-right: auto;
margin-left: auto;
max-width: 400px;
}
Since you are using JavaScript/jQuery to show/hide the loader, why don't you change the width of the box via JavaScript?
You could simply toggle a class called .wide for instance, to achieve the desired result as follows:
EXAMPLE HERE
CSS:
#divToCenter{
/* other declarations... */
text-align: center;
width: 50px;
}
#divToCenter.wide {
width: 400px;
text-align: left;
}
jQuery:
var $divToCenter = $("#divToCenter");
$("#show-more-data").click(function() {
// ...
$divToCenter.addClass("wide");
});
$("#show-less-data").click(function() {
// ...
$divToCenter.removeClass("wide");
});
Add display: table, position: relative and margin:0 auto to the following element:
#divToCenter{
border-radius: 5px;
box-shadow: 0 0 0 10px rgba(0,0,0,0.2);
background: #fff;
padding: 20px;
display: table;/*Add this*/
position: relative;/*Change fixed with relative*/
top: 20px;
margin:0 auto;/*Add this*/
max-width: 400px;
}
fiddle
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.