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.
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 1 year ago.
Improve this question
I'm trying to create a responsive table layout in tailwindcss where certain columns will be hidden if the display size is mobile.
I'm adding hidden sm:inline-block to the th and td values that I want hidden, but the inline-block display breaks the normal flow of the table. I've tried block, flex, inline-flex, etc. but they all mess with the layout of the header and columns when viewed at the larger screen sizes.
What is the "normal" display for these elements that should be used in the breakpoint directive instead of inline-flex?
Here's a look at the code, by removing the hidden sm:inline-block you can see what should be displayed vs. what is displayed.
https://play.tailwindcss.com/jyMaE0MVWx
The default is display: table-cell so setting sm:table-cell should do the trick. Here is a remix of your play https://play.tailwindcss.com/g7PJ6ETsX5
Edit: You can always find the default display property for an element in the inspector inside the computed properties tab.
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 years ago.
Improve this question
The Situation
On my website I have a page for people to listen to my music. The page has a grid element with 3 rows: #music-header, #playlist, and #player. The music-header (header) and player (footer) are 60px tall and the content height is determined dynamically with a 1fr value.
The Problem
When the playlist is loaded with songs, it overflows the page. I have overflow-y: scroll set on #playlist, but that has yielded no results.
The Code
I tried for a good 10 minutes to get the HTML snippet to process my website's code to no avail, so instead I'll provide a link to the broken page:
http://hbms.me/#/music
You'll note the list of songs overflows the page. That list is meant to be contained within the #content box.
NOTE: I am currently using Firefox to view the page.
In style.css line 31 check and apply this css, this will fix your problem.
#playlist {
overflow-y: scroll;
height: 544px;
}
Overflow property only will work when you set max-height. So you need to set height for playlist container either using media query or Js. Else, you have to restructure your code to bring the expected view.
A non-ideal solution would be to use javascript:
setInterval(() => {
// get height of #content
// subtract by 120 (the header and footer are both 60px)
// set #playlist height to resulting value
});
But alas, that is extremely inefficient.
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.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I am having 3 issues across two pages:
http://www.easythemepro.com/ - The button at the bottom of the text appears to have quite a bit of space between the text and the button. What code is adding in this extra spacing?
http://www.easythemepro.com/ - The boxshadowing on the page appears to stop right after the button. What do I need to do to make it extend around the entire page?
http://www.easythemepro.com/themes.php - I'm having the same problem with boxshadowing on this page as well, but it is extending a bit further. What needs to be changed to make it extend all the way down?
I've been staring at the same code all day and can't seem to figure out what's happening with these last 3 issues. I know it's problem simple stuff I'm overlooking after having stared at it all for so long...
1)
In your CSS (style.css) on line 201. You have the following rule:
bottom: 0;
Remove this rule.
Setting the position of the button to "bottom: 0;", puts it at the bottom of the parent container. In this case you do not want this.
2)
Set the height of body & html to 100%:
html, body {
height: 100%;
}
Setting the height of body & html to 100% makes them fill 100% of the height as you'd expect!
3)
Inside #wpwrap set your overflow to automatic.
overflow: auto;
This will make sure the contents of #wpwrap do not escape.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
For some reason, when I use inspect element on my file input, it shows where it's supposed to be. But it doesn't behave that way. Go to oceankarma.co and click post at the top. Then try clicking the youtube icon. Please help
All the icons are of different dimensions. Youtube, Vimeo icons are placed in tags while other black icons are used as background. This is causing the different styles.
Use same dimensions.
Same styles(except for background image so that everything is either called as background or everything via <img> tag)
If you do the above, it should give the result you expect.
I believe the issue you're referring to is that the the hidden file inputs are overflowing into the youtube link, try adding this to your CSS to fix it:
#servicetable tr td {
position: relative;
}
#upload_video input, #upload_photo input {
position: absolute;
left: 0;
}
Also note that you cannot set the cursor property for file inputs. you can read this question for more info
Sorry, but none of the existing answers helped me. Kind of like what koala_dev said, the inputs are overflowing. So I added a simple overflow:hidden style to the container and that fixed it.