Black space after HTML ends [closed] - javascript

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 4 years ago.
Improve this question
So , I have gotten a ticket from a client saying that he has some extra space after the footer end,i looked into it and it's true,basically,after the HTML ends there are a good few scrolls of plain black space. I tried giving the html doc a height of 100% and body a min-height:100% ,but it doesn't work.

It seems that the overflow of the div class="page-width" in the footer class="site-footer" is causing this issue. Set the css property overflow: hidden; to resolve the issue.
The implemented change:
.page-width {
overflow: hidden;
max-width: 1180px;
margin: 0 auto;
padding: 0 10px;
}

There is something that is shown from the dev tools that you have included in the HTML tag and has classes as follows html.js.svg.supports.csstransforms.csstransforms3d.csstransitions.shopify-features.__smart-payment-buttons--enabled.gr__virtualbabylon_com that has a dimension of 1349*2357.11. One of those classes or a combination of them generate that height of 2357.11. That is where you should start looking at.

Related

Problems with the sticky div [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 months ago.
Improve this question
fixed div through position:sticky and after scrolling navbar which is fixed overlaps div. How can this be fixed?
Navbar from bootstrap
I am new to frontend, so I used only padding, but it does not look nice, everything is not flat in relation to other blocks
I am new to frontend, so I used only padding, but it does not look nice, everything is not flat in relation to other blocks
You can use z-index property in CSS, imagine you have 2 divs, div-1 which has it's position sticky and and div-2
the code would be:
.div-1 {
position: sticky;
z-index: 0;
}
.div-2 {
z-index: 1;
}
I didn't understand what you want please write your code here, before that try the code below and see its work or not
* {
padding:0;
margin:0;
box-sizing: border-box;
}
#your-id-name-for-navbar{
z-index:99;
}

my button can't be clicked because of some properties in css [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
help, I created a card with a button in it, in the card section I used the css property pointer-events: none; so that the button cannot be clicked because of that property, can I click the button without deleting the property pointer-events: none;
thank you
you can do that with the help of bootstrap, you need to give a mentor column class col-sm-12 and rest of the icons class col-sm-6
You can use #media queries to set the width and height of each icon.
#media (max-width: 786px) {
.icon1{
width: 30px;
height: 30px;
}
}
Media queries are useful when you want to modify your site or app depending on a device's screen size. Now the above css will work if the maximum size of the screen is 786px

Is it possible to make the trimmed borders by "border-radius" unclickable? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
Is it possible to make the trimmed borders by "border-radius" unclickable, and also not detecting you are hovering over it?
One way is to make the wrapping div and a tags also have a border radius...
.blackground > div, .blackground > div a {
border-radius: 100%;
}
.blackground > div a {
display:block;
}
The trick is to make the <a> tag the one whose size changes, because that's the element that determines the click area.
So you can do
.backgroud > div > a {
display: inline-block;
border-radius: 100%;
overflow: hidden;
}
Then remove the border radius (if you want) on the actual image.

How to set transition from JavaScript while still inheriting style from CSS [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I want to set transform: translate(50px, 25px) from JavaScript (I want to calculate 50 & 25 coordinates) to element <div id="foo">bar</div> and to inherit from CSS #foo { transform: scale(.8) }.
I explicitly want to have scale defined in CSS.
I would like to know if it's possible to override only one type of transform from JS without overwriting whole transform property. (example: like with margins; if you set in CSS margin: 10px 20px 30px 40px; you can directly access margin-top and change it without affecting other 3 sides).
You need to use window.getComputedStyle to read styles from CSS file. Read current transformation and apply with new one.
See how this works there:
http://jsfiddle.net/Lcjb5vLd/

This is a bit abstract, but can you get a div to start at one of the bottom corners? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
Maybe there's an easy answer, but I don't know it. I know you can float right, but is there anyway to position something at the bottom of a box?
You can use absolute positioning. Absolute positions relative to its first positioned ancestor. If there is none it defaults to the document. So I gave it a parent with relative.
http://jsfiddle.net/DSpkv/
#parent { position: relative }
#foo { position: absolute; bottom: 0; right: 0; }
<div id="parent">
<div id="foo"></div>
</div>

Categories