I've used the below code to add a box around a header title, however is there any way to make this responsive to fit the header text? At the moment all boxes are the size set and when scaled down to mobile go off screen, thanks for any help in advance
.box.active .header-title p {
width: 600px;
height: 120px;
padding: 15px;
border: 0px solid white;
padding-bottom: 15px;
background: rgba(80, 80, 80, 0.4);
opacity: 1;
color: white
}
Why don't you just put border around the text? No need bind text with fixed height and width. This will not make text responsive.
Try this code.
.box.active .header-title p {
padding: 15px;
border: 1px solid #000;
}
Remove extra css.
width: 600px;
Is causing problems for you. This is fixed with of 600px and mobile screen is, lets say, 375px
Related
I have a div that has image on it done by uploading. It is quite working well until we uploaded diff image sizes. Problem came up when they uploaded a very big image and it is being cutoff (coz of overflow hidden) and just shows like a certain portion of the image, but if i remove the overflow: hidden, it becomes way too big. So then I put a transform(.20, .20) which worked well, but when user uploads a small sized image, it becomes really small because of the transform, which I don't like. I would like to put a min-width or like a conditional transform that if image is below 400px, don't transform it, or transform but not smaller as 400px square img. is that possible? I put min-width on several parts but nothing works.
here is my css & div:
.upload-viewer {
/*
border: 1px solid #e0246f;*/
margin-left: -199px;
height: 188px;
text-align: center;
background-color: #eee;
border: solid 1px #ddd;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
padding: 4px 5px;
transform: scale(.20, .20);
position: relative;
top: -70px;
margin-bottom: 50px;
}
<div class="upload-viewer">
<img src="" />
</div>
Min width sets the minimum width you should set the image width to 100%
Like this
.upload-viewer img{
width:100%;
}
Try using max-width
You can set a max-width prop at your img tag
For example:
.upload-viewer img {
max-width: 400px;
}
That way, it will not change your image width if it is lower than 400px, but will limit it to this width.
Here is a Plunker I just created: http://plnkr.co/edit/jKo6yavo9fFNHiMsEvAL?p=preview
It is a simple single row layout. What I need is a fixed minimum margin on both sides (left and right) of the row. Let's say 25px. Resizing the window should always show at meast 25px of grey background before and after the row.
I tried modifying the table.container style from:
table.container {
width: 580px;
margin: 0 auto;
text-align: inherit;
}
to
table.container {
width: 580px;
margin: 0 25px 0 25px;
text-align: inherit;
}
But it seems it does not work for the right margin (goes out of the page). Any suggestion?
I think the simplest solution would be to use the left and right table borders instead of margin.
Something like the CSS below should do the trick.
table.container {
width: 580px;
border-left: solid 25px #f1f0ef !important;
border-right: solid 25px #f1f0ef !important;
text-align: inherit;
}
Since not all email clients support margin your other option would be to add padding/border to an outer table/tables.
If you have any questions let me know.
and sorry I can't properly translate my question into easier language, sorry :(
body
{
background: #33ffcc;
min-height: 100%;
margin-top: 3em;
}
#kal
{
font-size: 2em;
color: #fff;
border: 3px solid #fff;
text-align: center;
}
but here:
http://jsfiddle.net/skinnytotoro/s3Xfp/
and notice the box border is changing everytime the screen size change?
and I want to make the border is fixed, like, 20px from left and right of the text
is there how and any way to do so..?
thanks in advance!
sorry grammar errors too. Hope you don't get headache.
Use display: inline-block and set padding to how much space you want: http://jsfiddle.net/s3Xfp/1/
Another alternative way to get this working would be to set a fixed size div with margins to center the div, then manually set the padding.
#kal {
width: 180px;
margin: 0 auto;
padding: 0 20px;
}
http://jsfiddle.net/s3Xfp/6/
I am having trouble with the alignment of a span contained within a button tag.
I have already done something like this before and it worked. In fact, it's the same css but different sizes.
The problem is that the containing span seems to be aligning to the right.
CSS:
#closePreviewBtn {
position: absolute;
height: 24px;
width: 24px;
right: 0;
background: #B9DEFD;
border-top: solid 1px #333333;
border-left: solid 1px#333333;
border-right: solid 1px #333333;
border-bottom: solid 1px #333333;
border-radius: 4px;
}
#closePreviewBtn .close {
display: inline-block;
position: relative;
height: 20px;
width: 20px;
background: url(../imagenes/close.png) no-repeat center;
padding: 0;
/*right: 2px;
bottom: 1px;*/ //This fixes the problem but it's manual
}
HTML:
<html>
<body>
<button id="closePreviewBtn" name="closePreviewBtn"><span class="close"></span></button>
</body>
</html>
Thanks a lot!
Simple fix - seems like the button has a padding by default. Just set it to 0:
#closePreviewBtn {
padding: 0;
}
Now you can position however you want - maybe adding a margin to the span if you want to move it around.
Hope that helps you,
In your #closePreviewBtn rule, remove the right:0;. Setting the position to absolute and right to zero will take the element out of the document flow and position it as far to the right as possible.
jsFiddle example
I noticed that the button still has some padding after resizing it to 10px. I found no way to set that space off.
The solution i've foud to center it was removing the button height and width, because it will expand to wrap the span and it will be centered.
For some weird thing, it works for small buttons. But for bigger buttons like 30px x 50px it will just be fine to set height and width, or at least the padding is very very hard to notice if there's some.
Trying to add a box around a menu of links in Wordpress. So far I've got this - which should make a box of 150px x 50px if I am correct. However, while margin, padding, etc, all work, this does not. Why would that be the case? Has width become deprecated in recent CSS?
.menu-header .menu-item {
display: inline !important;
margin: 0px 50px !important;
border-style: solid !important;
border-width: 2px !important;
width: 150px !important;
height: 50px !important;
background-color: #EDEDED !important;
}
Remove display: inline - that will cause problems with setting a size. The element needs to be block level to specify the size.
Also, the CSS can be simplified:
.menu-header .menu-item{
margin: 0 50px;
border: 2px solid #000;
width: 150px;
height: 50px;
background: #EDEDED;
}
display:inline and width 150px collide with each other.
An inline element has at every time the width of it's content.
You could set the display to inline-block when you really need it inline or else to block.