I am facing the same issue mentioned in Unwanted white space on mobile version and as per the solution there, I looked for the elements which are 100% width and having padding. For such elements, I gave box-sizing: border-box; like below but the issue persist.
input[type=text], input:focus {
width: 100%;
padding: 12px;
border: 2px solid #ccc;
border-radius: 27px;
resize: vertical;
margin-right: 5px;
margin-left: 5px;
height: 35px;
box-sizing: border-box;
}
Can any one help me how to debug trough inspect, which element is blowing out. I could not figure out by looking at inspect element, computed styles.
looks fine in vertical view -
Issue in horizontal view -
https://jsfiddle.net/vky60wz7/1/
Because max-width is defiened as 540px
see here
if you disable this it will be ok
You can try two things. first instead of width, give a min-width. Second, check that the parent elements display is not affecting this.
Related
I have the following block of code for the styling on a div supposed to be a box:
.newsBox{
width: 100%;
text-align: center;
border-style: solid;
border-width: medium;
padding-left: 10px;
padding-right: 10px;
border-radius: 25px;
}
I am using this code in a PWA, and so it is going to be used on a mobile screen.
Instead of my div just spanning the entire screen of my phone, it spans off the screen as well (and so I have to move the screen left and right to view the whole box), but I can't understand why when my width is set to 100%. I have tried everything I could find on stack overflow and other websites; I think it may just be my code that's wrong.
Any help is appreciated. Thanks
After setting the the width to 100% and adding extra padding, it will show annoying scrollbars. Try to add the box-sizing: border-box; property to your div and it will be fixed.
Without the box-sizing property, an element with padding will actually be bigger than its width and height. You should try the following:
.newsBox{
width: 100%;
text-align: center;
border-style: solid;
border-width: medium;
padding-left: 10px;
padding-right: 10px;
border-radius: 25px;
box-sizing: border-box;
}
You can read more about box sizing here.
Aditionally you must take into account the width of your newsBox's parent container. Setting newsBox's width to 100% means it will be full width within its parent.
The scroll probably appear because there is margin or padding property set up somewhere (browsers add them to html and body by default). You can turn it off with:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
box-sizing changes the way browser calculate the width of the element ( 100% - padding of the parent is used instead of 100%).
But it is hard to guess without an actual code.
I'm working on a site and I added previous and next buttons to my posts which I'm creating via a wordpress theme. For some reason on the hover stage of these blocked elements which are links the padding pushes beyond the max height and I can't figure out how to correct this problem. If you take a look at the link
http://hearthable.com/hearthstone-account-wipe/
At the end of the post content you will see Previous Post and Next Post. If you hover over either one you'll see the issue with the padding. I've been trying everything and haven't been able to figure out to not get the hover to flow over.
Thanks
Two different solutions:
Use box-sizing: border-box:
#browse-posts a {
position: relative;
display: block;
padding: 20px 40px 0;
text-decoration: none;
color: #888;
height: 85px;
-webkit-box-sizing: border-box; /* Some Webkit versions requires a prefix */
-moz-box-sizing: border-box; /* Gecko (i.e. FireFox) requires a prefix */
box-sizing: border-box;
}
Compability tables are available here.
You can read more about CSS3 box-sizing at MDN, QuirksMode or other good places. Avoid W3Schools like the plague.
Calculate the height as height = desiredHeight - border - padding.
#browse-posts a {
position: relative;
display: block;
padding: 20px 40px 0;
text-decoration: none;
color: #888;
height: 65px; // 85px - 20px padding
}
Finally, you can drop the height: 85px from #browse-posts a:hover, it is inherited anyway.
if you have used padding, along with it you should do something else to make the element fits to its original height.
example
div{width: 100px;}
div:hover{padding-left: 5px;}
in this case on hover effect you have added padding left, which makes the div body a 5px margin. in this case the div occupies its original width along with the 5px padding. in order to get rid from this problem.. you can reduce the width to 5px.
then your code will be..
div{width: 100px;}
div:hover{padding-left:5px; width:95px;}
do the same in your code.. you can find your own solution to your problem.
Simply reduce the height of the <a> to 65px
CSS
#browse-posts a {
position: relative;
display: block;
padding: 20px 40px 0;
text-decoration: none;
color: #888;
height: 65px;
}
#browse-posts a:hover{
background: #cccccc;
}
Padding, by default, pushes the boundaries of an element outwards. This is a result of something called the box model. The box model defines the way that the width and height of a element is calculated (basically, which properties will contribute or not contribute to this calculation).
In your case, the padding on the <a> element extends outwards past the edge of the container. It's not noticeable normally because the element has no background, but on hover you add one, allowing you to see the true size of the shape.
You can fix this in one of two ways (plus more that I'm not mentioning.. CSS is pretty versatile!):
First of all, you can change the box model to something that will take padding into consideration on the overall size of the element:
box-sizing: border-box;
You will need to use vendor prefixes for this property, like so:
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
(note that this needs to be applied to #browse-posts a)
Alternatively, you can simply hide the issue using overflow: hidden; which will not fix the padding from extending outwards, but it will not be visible
This would go on #browse-posts
I hope that helps you. Also, just for future reference, when posting a question it is always a good idea to post some of your source code so that people can easily find the areas that need to be looked at, rather than just a site link.
Cheers!
I can't reduce size of textarea using mouse although I didn't specify minimum width and height. In Firefox everything is ok. This question was asked here: Can't reduce size of resizable textarea in Chrome, but I couldn't find suitable answer, maybe someone can help me.
This is my mark up:
<textarea id="textarea" name="textarea"></textarea>
and CSS:
textarea{
width: 90%;
height: 400px;
border: 2px dashed black;
border-radius: 12px;
background-color: transparent;
font-family: Purisa;
font-size: 23px;
padding: 5px;
margin: 20px auto auto auto;
outline: none;
border-color: black;
}
Google Chrome has a some kind of restriction to show content properly to user. Because of that they edited the default actions of resizing on <textarea>. In older versions of chrome there was no restriction.
So if you use height min-height will be your height. So you need to set min-height and max-height only. Height overrides min-height in Chrome.
Here is a simple fiddle: http://jsfiddle.net/gAr72/1/
Edit:
You can see Firefox will work same as Chrome in this fiddle. Height is risky for design btw. Unlimited resizing always breaks the design. So limiting height and width is good option.
I'm trying to use a border property on a div that is using a border-radius property.
Here's my CSS:
#page {
border: 1px solid #beb2b2;
width: 732px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
So as you can see I just put a border radius (with all different properties for each browser) as well as a border of 1px. The problem is border isn't drawn on both top corners. It's drawn everywhere else including bottom corners. I looked for something on google but can't find anything...
Any idea ?
Problem in the other markup and styles, because your css is correct: testcase on dabblet
Try to add some margin: #page { margin: 15px; } May be border is simple invisible or container of #page hide border with overflow: hidden;
Update: Problem also may be exists in inner images which can override or ignore some parent properties (e.g border-radius).
I guess due to some issue with height the bottom part is will be hiding, can you set some height on it.
The page height is not defined. That is why it is spanning the whole window and you are not able to see the other borders.
Maybe that's the reason it's not working.
I just made some changes. See the fiddle.
HTML
<div id=page></div>
CSS
#page {
border: 1px solid #beb2b2;
width: 732px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
margin: 10px auto; /* the extra line */
height: 200px; /* the extra line */
}
Strangly enough, my website is rendering fine in Internet Explorer but fails in Mozilla based browsers.
Here is a screenshot:
Does anyone see why "right-panel" does not go all the way to the right? You can see how it is not lined up with the right edge of "top-panel":
#container
{
margin: 0 auto;
width: 750px;
background-color: #ffffff;
}
#top-panel
{
padding-left: 10px;
background-color: #000000;
text-align: left;
width: 100%;
height: 88px;
}
#left-panel
{
padding-top: 10px;
text-align: center;
background-color: #ffffff;
border-right: 1px dashed #000000;
float: left;
width: 250px;
}
#right-panel
{
background-color: #ffffff;
float: right;
width: 449px;
}
.clear
{
clear:both;
line-height:0;
}
If anyone wants to see the actual site it is: Math Relay
When you apply width:100% and use padding-left:10px also, it computes the width first, and then applies the padding, so actually your #top_panel CSS declaration is the problem. Try setting it to a fixed width for that.
it is the padding-left:10px; in the #top-panel
Set that to 0 and you'll see them line up.
Try using FireBug, that's how i found the issue.
The Padding-Left:10px is causing an extra 10 pixels to appear on the right hand side.
Along the lines of the other answers, but hopefully explaining what's happening behind the scenes, too:
The width: 100% on #top-panel refers to the width of the div's content area, excluding borders, padding and margin. Thus, when you specify both width: 100% and padding-left: 10px the width of #top-panel including padding is actually 10px + 750px (the padding plus 100% of the width of #container.)
The best solution in my opinion is to remove width: 100% from #top-panel. This will make the div take up the entire width of the parent element withut overflowing the #container.
The page looks ok in Internet Explorer since IE incorrectly includes padding and border when calculating the width of the div if the page is rendered in quirks mode. More details about this bug can be found here.
It's your #top-panel that's 10px bigger that your #container because of your padding-left: 10px;
Just add 10px to your #container and it will be good.
Remove the width: 100% from #top-panel.