Here the demo: https://stackblitz.com/edit/react-ishkxp?file=index.js
When you will click on the cross you will see there is remaining space around the cross. I would remove this space.
I would that when I click on the cross the container fit at the maximum the cross instead of letting go remaining space.
I have tried:
box-sizing: border-box
height: auto;
absence of width precision to just create content depending of height
using a letter instead of an image with font-size to ensure it is the size of the letter that is taken in account.
reset button and span styles.
play with letter spacing and em.
play with display:flex
I am wondering if this is the font that make the component remain with space.
Here my ReactJS' snippet:
.container {
height: auto;
width: auto;
box-sizing: border-box;
display: flex;
}
.cross {
display: block;
height: auto;
font-size: 4em;
box-sizing: border-box;
}
<button class="container">
<span class="cross" >×</span>
</button>
If I understood your question your question correctly, you'll want to define a line-height for the .cross, so that there is less space above and under the cross glyph. Also, prehaps the browser's default padding is what causes the unwanted space. So you might want to consider setting padding: 0 as well.
And overflow: hidden; for the .container, to make the button adjust to the new height.
.container {
height: auto;
width: auto;
box-sizing: border-box;
display: flex;
overflow: hidden; /* Added */
padding: 0; /* Added. Removes the browser's default padding of buttons. */
}
.cross {
display: block;
height: auto;
font-size: 4em;
box-sizing: border-box;
line-height: .6; /* Added. Adjust value based on font and glyph. */
}
on the span for your cross add the following css:
line-height:.5
vertical-align:middle
Related
As title says-
I'm setting anchor and button to flex but their sizes are different.
Why does this happen? How can I achieve same visual on both elements with auto width?
a,
button {
display: flex;
align-items: center;
justify-content: center;
width: auto;
background: orange;
margin-bottom: 20px;
padding: 10px;
height: 50px;
margin: 0;
}
asdf
<button>asdf</button>
Here, in `width:auto`, auto tells the default value. The browser calculates the width.
Also both are different elements.
div {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
}
a,
button {
width: auto;
background: orange;
padding: 30px;
margin: 0;
}
a {
padding-bottom:31px;
}
<div>
asdf
<button>asdf</button>
</div>
My problem consists of 2 parts:
button and a render differently
I wanted a to render like button in this example. So the component I'm designing will not make its users to wrap it and so on and so forth.
The correct answer is arround width property set to fit-content. It has pretty good browser support and I'll try to use it.
Thanks a lot for your answers!
This depends on the engine but the most probable cause of this in browsers is due to the box-sizing property of css. MDN defines box sizing as
By default in the CSS box model, the width and height you assign to an
element is applied only to the element's content box. If the element
has any border or padding, this is then added to the width and height
to arrive at the size of the box that's rendered on the screen. This
means that when you set width and height, you have to adjust the value
you give to allow for any border or padding that may be added. For
example, if you have four boxes with width: 25%;, if any has left or
right padding or a left or right border, they will not by default fit
on one line within the constraints of the parent container.
You can read more about this here: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing how using
But the closest you can reach is by using width as inherit. This will cause the elements to inherit width from parent.
// Resetting both to have same type for similar render
a,button {
box-sizing: content-box;
border: unset;
}
a,
button {
display: flex;
align-items: center;
justify-content: center;
background: orange;
margin-bottom: 20px;
padding: 10px;
height: 50px;
margin: 0;
}
// Add width to parent element
.w-100 {
width: 100vw;
}
// This will cause the default width behaviour to inherit from parent
a,button {
width: inherit;
}
<div class="w-100">
asdf
<button>asdf</button>
</div>
This problem arises from button not being allowed to have some of the other display properties depending on the engine. Wrapping button in a span is the easiest solution.
asdf
<span><button>asdf</button></span>
a, span {
display: flex;
align-items: center;
justify-content: center;
width: auto;
background: orange;
margin-bottom: 20px;
padding: 10px;
height: 50px;
margin: 0;
}
I just finished the landing page for a nonprofit's holiday campaign. I am having a little trouble with some little finishing touches.
Currently, there is extra white space on the right side of the page triggering the horizontal scroll bar in browsers. I am not sure why, I'd like for the page width to adjust to screen size along with the elements.
Also, I am having trouble with the styling of the four images of the people being featured. I'd like the images to display on the same row with no spacing in between when screen is minimum 1200 pixels, each image is 300 x 300 pixels. Otherwise, I'd like them stacked one on top of each other centered on the screen (for mobile). They are stacking, but are displayed to the left.
I am not the savviest of programmers as I am NOT a web developer. I am actually a the Social Media Specialist for the nonprofit. I appreciate your help.
Page can be accessed here:
https://secure3.convio.net/little/site/SPageNavigator/Holiday%20Page%20Wrapper/HolidayCampaign2015.html
Best thing you can do is wrap everything inside tag to a new div & set overflow:hidden;
<body>
<div class="wrapper">
Every other HTML will go here...
</div>
</body>
CSS
.wrapper {
overflow: hidden;
}
ALSO: It is not best practice to call scripts/css inside body tag. Those should be called inside tags
Try placing everything in a Wrapper div with the folowing css:
.container {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
You could also try playing around with:
overflow-x: hidden;
For the whitespace (and scrollbar being displayed), add CSS for .row { margin: 0 !important; }. You currently have -10px +10px... I never understood why that was the bootstrap standard.
For centering the images, you want to add margin: 0 auto; to the parent div.box of the image.
The problem is all this margin fudging:
#media (min-width: 480px)
.row {
margin-left: -10px;
margin-right: -10px;
}
.row, #content-wrapper .fc-section__inner, .fc-section-outer .fc-section-row, #testimonial .fc-section__inner, footer .fc-section__inner {
margin-left: -15px;
margin-right: -15px;
}
.row, #content .fc-section__inner, #testimonial .fc-section__inner, footer .fc-section__inner {
margin-left: -15px;
margin-right: -15px;
}
After I turned all that off, things seemed to line up correctly.
Apply this to your CSS maybe styles.css it looks to be the stylesheet with the highest priority.
html,
body {
box-sizing: border-box;
width: 100vw;
height: 100vw;
overflow-x: hidden;
overflow-y: auto;
position: relative;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
/* place this div right aftter thr <body> and before the </body> */
#jar {
width: 100%;
height: 100%;
position: absolute;
margin: 0 auto;
overflow-y: auto;
}
UPDATE
I forgot to post a solution for your images. This code applies to an element wrapped around the images. Most people use a <div>, but I'm using a <figure> since it's semantically proper.
Using max-content on a container like .frame makes it act like shrink wrap. You need to use the vendor prefixes which is a pain as you can see you have to write out height and width 3 times each.
You might have to use negative margins and reset padding and borders to 0 in order to get rid of the space in between the images.
.frame {
width: -moz-max-content;
width: -webkit-max-content;
width: max-content;
height: -moz-max-content;
height: -webkit-max-content;
height: max-content;
margin: 0 auto;
max-width: 100%;
height: auto;
border: 0;
}
.frame img {
padding: 0;
margin: -2px;
border: 0;
display: inline-block;
width: 24%;
height: auto;
}
<figure class="frame">
<img src="http://placehold.it/150x85/000/Fff.png&text=FIRST" />
<img src="http://placehold.it/150x85/048/Fee.png&text=SECOND" />
<img src="http://placehold.it/150x85/fa8/375.png&text=THIRD" />
<img src="http://placehold.it/150x85/9a7/a10.png&text=FOURTH" />
</figure>
This code leaves this weirdly shaped border (it's the active link border) when you click the image, like so:
And when we put an orange background on the <a> element we see that there's an orange area underneath the image. So, <a> wraps around the image, but also around an area underneath it.
Why does <a> do that?
First, by default element has an 'outline' decoration, to disable it use the following css rule:
a { outline: 0 }
Second, the area is created by another css property you apply on the image itself: 'margin', which is the margin between the image to the elements around it, in this case it affects the element which wraps it, to fix that change the following rules:
.socialBtn {
/* Removed margin here so there won't be space around image */
height: 2.5em;
width: 2.5em;
}
a {
height: 2.5em; /* Gave it width like the image */
width: 2.5em; /* Gave it height like the image */
display: inline-block; /* Made it inline-block so it can have width and height */
}
http://jsfiddle.net/we67Lp6o/6/
UPDATE:
Changing source to understand how the display property: block vs inline-block vs inline.
Removed "outline: 0" from a selector, it is a bad practice, read why here.
It's actually not spacing underneath at all. It's because your a tag is collapsed due to the default setting of display:inline. Adding display: inline-block to those as will fix that issue:
FIDDLE
Alohci offers a great explanation on why this happens
UPDATE
The extra spacing is the margin on the img:
.social a {
display: inline-block;
background-color: orange;
padding: 0;
margin: 0;
vertical-align: top;
}
.socialBtn{
height: 2.5em;
width: 2.5em;
padding: 0;
margin: 0;
vertical-align: inherit;
}
NEW FIDDLE
The spacing answer can be provided here
inline-blockis the property you need for the <a> elements. For the spacing issues, the margins need to be removed.
The reason for the strangely shaped border, is of the outline property on <a>. It's showing you the area of your link, but due to the display and margin properties it is a different size than your img.
Here is the new CSS:
.header {
width: 650px;
height: 150px;
clear: left;
margin: 0px auto;
background-color: #efefef;
position: relative;
border-radius: 4em 4em 0 0;
}
.social{
padding: 1em 2em 0 0;
display: inline-block;
position: absolute;
right: 0;
}
.socialBtn{
height: 2.5em;
width: 2.5em;
}
img {
display: block;
}
a {
display: inline-block;
background-color: orange;
}
http://jsfiddle.net/Lg5a0ksg/4/
Set your images to display: block (or alternatively, to vertical-align: bottom) to remove the default space at the bottom. (By default, images align to the baseline of any potential text next to them, and they leave that space there even if there's no text beside them.)
I have the following CSS:
#imageContainer {
width: 100%;
margin: 0px;
margin-bottom: 10px;
}
.divSelectImage {
border: 2px solid red;
width: 25%;
margin: 0px;
margin-bottom: 10px;
float: left;
}
I have four instances of .divSelectImage which is why the width is 25%. I expect to see all four images side by side inside #imageContainer. So essentially, the four images should take up 100% of the #imageContainer which in turn takes up 100% of the screen.
But I don't. Despite checking firebug, at 25% each, the last image goes to the next line. I have to make them to about 24.5% for them to fit, but I don't want the white space at the end.
This occurs in both Firefox and Google Chrome.
Is there some kind of CSS wizardry that I am missing? How can I accomplish this?
I have set up the scenario on JSFiddle: http://jsfiddle.net/J3KXE/
Its because you haven't accounted for the 2px of border on each image, adding 12px in addition to the 100% width of its containing block. You can use the box-sizing property thats new to CSS to constrain the border and padding areas to the elements' content width:
#imageContainer {
width: 100%;
margin: 0px;
margin-bottom: 10px;
}
.divSelectImage {
border: 2px solid red;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 25%;
margin: 0px;
margin-bottom: 10px;
float: left;
}
http://jsfiddle.net/J3KXE/1/
2 solutions :
box-sizing: border-box;
or
flexbox and all this shit (see http://coding.smashingmagazine.com/2013/05/22/centering-elements-with-flexbox/)
You have a border of 2px which increases the size of the boxes to 25% plus these 2px on each side. If you don't have to support IE7- you can simply use box-sizing: border-box. If you have to take older browser into account you'd have to declare a wrapper div width 25% without any border/margin/padding and add those styles to the child element.
So I was trying to align a textarea inside of a div using the padding property:
#content {
background: #FFFFFF;
width: 80%;
height: 800px;
margin: 4em auto;
padding: 20px;
border-radius: 2px;
}
textarea {
width: 100%;
height: 790px;
}
But it appears that the sides are uneven even so:
I was wondering how I could fix this so the sides are even?
BONUS QUESTION: How can I make it so the text box is not scrollable if the text amount goes over the box size?
On the textarea set the border to 'none'. Edit - set padding to 0
textarea {
border: none; /*optional */
padding: 0;
height: 790px;
width: 100%;
}
to remove the scrollbars add overflow: hidden
textarea {
border: none;
height: 790px;
overflow: hidden;
width: 100%;
}
Make sure you always reset before adding ANY styles. Each browser comes with it's own set of 'defaults', so it can make your site vary from browser to browser (and add unwanted spacing, such as your issue).
Check this link http://meyerweb.com/eric/tools/css/reset/
You can put that at the top of your main style sheet or as the first external to load.