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.
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
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 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 to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I’m trying to make it so that the pages of my book can fit into 2 specific column sizes for all the text such that I can click through the pages. Is there any way I can automate it so it detects where exactly in the page it needs to stop and move onto the next?
Ella, your question is very vague. I would suggest as #paulsm4 suggested you study up on html, css and javascript.
Your question does not explain where you are getting the text from, and how it is rendered to the screen. I am going to try and help.
Let's assume you are adding text to a div, your "book" has two pages and so let's assume each page is a div. One on the left and one on the right.
I am going to assume we can use the flex layout so let's use a flexbox.
The css would look something like this.
.book {
display: flex;
}
.page {
flex: 1;
padding: 10px; //just because
border: solid; //so you can see the page
}
The html would be:
<div class="book">
<div id="page1" class="page"></div>
<div id="page1" class="page"></div>
</div>
You could use css to make the min-height of the book 100% so that it spans the entire page. I have added an ID to each of the pages so that you can use javascript to find out how big the div block is.
The javascript would be something like this,
var width = document.getElementById('page1').offsetWidth;
var height = document.getElementById('page2').offsetHeight;
Now with simple maths width x height we have the area. But now we have a problem. What is the font size and type of font you are using. If you have a fixed width font then this is easy if you have a variable width font, then you may have a problem. But in essence, using the size of a letter you could workout by taking the area of the div divided by the area of a letter and you will know how many letters and punctuation can fit in the div.
Alternatively, and a little more complex, but an approach I would use, would be to add words to the div, until the div is larger than a predetermined height. When this happens, remove the previous word and add words to the next div. This can be done using javascript. I would suggest instead of pure javascript that you use a framework such as react, or angular.
Your question however lacks loads of information. In future, please provide some source code to show what you have done, how you are fetching the words and how you are rendering them.
I suggest you take a Udemy course and learn a little more about html, javascript and css. See here.
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
I am trying to set my logo in between the menu. I am able to add logo but not able to make it work properly. My logo shows in a single line but all the other menu items show in a line. I want to show the whole menu in a line. Here is my website link: http://savourthemoment.fr/home
Thanks in advance for your help.
There are two modifications to be done.
1. The link which contains your image element is 1040 px wide. I changed it to:
a{
width: 104px;
}
However its better to reference it using an id or class rather than using the anchor tag as it will manipulate width of all the anchor tags.
The width of the image is set at 10 %. Change it to a 100% so that it occupies the entire width of its parent element.
img.savour-home-logo{
width:100%;
}
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.