Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 6 years ago.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
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.
Improve this question
I have an element that has a fixed position to the bottom left corner of the browser window. I noticed that the text in footer layers above the fixed position element.
I traced this back to the Bootstrap style for columns that sets them to a relative position. If I remove or override that style, the layering appears as I desire. I don't, however, know why that style is there. I am concerned over unintended side-effects.
Why does Bootstrap use position: relative in their column class?
I'm also open to other ways of accomplishing my desired layering without changing core Bootstrap styles.
EDIT
When creating a minimal example, I found that the issue was not present. I then looked to my own CSS for the problem. I found that it was z-index: 0 on the element containing the fixed position element that was the culprit. Changing it to z-index: 1 fixed the problem.
Add a class to the element that you want to change then overwrite the Bootstrap styles with the new class.
It is difficult to guess without a code example, but something like:
<footer><p class="override-bootstrap">Some text</p></footer>
CSS
.override-bootstrap {
// here reset the styles
}
Make sure that the stylesheet for your new class is included after the bootstrap css.
Related
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 2 months ago.
Improve this question
I'm trying to adjust the paragraph spacing and move it closer to the title, but Top or Bottom seems to be disabled when using flex-direction: column... What can I do to push up .par2?
Properties bottom and top work with position: absolute; elements. They don't work with other positions.
You have to use padding-top or margin-top with negative meaning (for example -10px).
And you can check properties margin and padding by headers ('CATORING', 'EVENT HOSTING', 'DELIVERY') using GoogleChrome Devtools. Most likely it is they who prevent the text from being located higher.
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 9 months ago.
Improve this question
i have a problem with form inputs on only on safari. I don't know why they stick out beyond the edges of the form.
Why is this happening
This happens because inputs have a default width determined by the size attribute of an input. You can learn more here.
Workaround
You can adjust the size attribute or make the parent bigger but my favorite way is to create a div that wraps input and its corresponding label, give it a display: flex, and a flex-direction: column. This way input will always span the full width of the parent. Example
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 1 year ago.
Improve this question
So, I imported a demo theme (wordpress). The theme came with some issues including a horizontal scroll that the developer is refusing to fix. I would like some assistance to explain how to remove the horizontal scroll or what is causing it so i find a way to fix it with CSS somehow.
site is located here - http://corporateh27.sg-host.com/
If you get horizontal scroll issues the best thing to do is put an outline on every element using:
* {outline: 1px solid blue;}
This then effectively adds a border to every element on the page (it is better to use the outline property as opposed to border because outline doesn't add any pixel values to the size of the elements the way border does).
You will then be able to see which element is causing the problem and fix it.
When you find the problematic element a lot of people tend to add overflow: hidden; on a parent element. Generally I would recommend finding the specific issue/child element causing the problem. In your case it is being caused by padding values added to an entire list of bootstrap classes. I've deselected them in the image. (see Image):
Instead of picking through all of those values, in your case it's probably worth just adding .content {overflow:hidden} which will remove overflow from the main .content class. Some of the code being used in that theme is woeful.
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 4 years ago.
Improve this question
My Blogger Soho theme main page has two columns listing the posts complete with pictures. The gaps between the columns are too close. May I know if there is a css code to improve that?
Sorry if this question has been answered as I could not find one after searching and I am a newbie in css.
https://retireby50sg.blogspot.com
Thanks in advance for advice!
Actually your image width is going out of div so try to reduce the width of image. here is the css try this
.snippet-thumbnail img {
width: 95%;
}
If you don't post your code is so hard to give you a proper answer, but I could say you that you should open the CSS code about your theme and find the two columns tag or id or whatewer the theme uses, then you could use margin or padding property to make the gap between both bigger.
Use of margin and padding (Because you said you're a newbie hahahaha)
Margin: https://www.w3schools.com/css/css_margin.asp
Padding: https://www.w3schools.com/css/css_padding.asp
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 5 years ago.
Improve this question
I am working on my website development. While creating the portfolio page, I encountered the issue of the last column moving to next row.
I do have images larger than the parent container but I figured it out to display properly, however, after applying the margin the last column went to next row.
Please check the link below:
https://bootsnipp.com/user/snippets/o1e9d
I also wanted to add img-thumbnail class but it does not look proper and adding padding also didn't work as expected.
Please help.
Thank you.
You have added margin: 1px on bootstraps column class which breaks the last column.
Add another div inside gallery_product and apply border/margin to inner div.