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.
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 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 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
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.
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'm having a real hard time trying to figure out how to fix this css issue. I'm trying to fix what's in the 3rd table content that is the compose new pm message form so that it doens't have any space between the form and the outer content just like it is on the template that says Form with Alternative Style in the form heading. I can't fix the content class rule because that completely messes up the rest of the page and you can see that if you go back to one of the other two tabs.
Template: http://www.kansasoutlawwrestling.com/peach/forms.html
My Page JSfiddle: http://jsfiddle.net/MtzqR/
The parent element has left and right padding and the child divs are using negative margins to compensate (not ideal but it works). Applying the same negative margins seems to work:
.box .content2.no-padding {
margin: 0 -11px; /* Apply -11px margins to left and right sides */
}
Try and set the following:
.box .content2,
ul.block-list {
margin: 0;
}