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
I've looked at many a thread and understand the width and display tags ( min, max, block inline, inline-block and table etc), but I'm having a terrible time trying to fix this issue with my page footer. When I resize the browser window, everything in the footer collapses.
Can someone kindly check my markup and let me know what I need to add in my CSS to fix this, please.
Basically I'd like the browser window to pass over the content and all that contained be fixed centrally... how it looks, laid out, when window full-size.
Thanks!
Site: http://mixititb.com/Z_Test_Site/index.html
Edit;
Two issues I'm seeing are when you change window size, the footer itself is collapsing and perhaps making the content bunch up. So, that would be first priority fix and then aligning the content center.
For these two issues, I'm really stuck and truly appreciate the help for a newbie to get this fixed. Thanks for checking my code!
Edit 2;
Just fixed the footer sizing with overflow-x: hidden; for the fix_footer class! :)
So, now we/I just have to figure out why the content is collapsing when you resize the window. Any takers? :) :)
Edit 3;
# PeeHaa, easwee, mario, user35443, Starkeen... please kindly take this off hold, I'm unsure how to edit the question as I've fixed some issues myself and too with help from those below, but a few remain, so didn't want to ask another question. Thanks, appreciated!
Edit 4;
Fixed through reorganising HTML structuring div's with classes and setting .container to white instead of the footer itself. Setting all main div's (i.e. nav, content and footer) with a class of container allowed fixed scaling of the footer as it was taking the width set in CSS.
Thanks everyone for the help!
Search media queries on google and center the elements with text-align: center or margin: 0 auto, if the elem are floated, use clearfix.
Your footer breaks at about 900px.
Example:
#media screen and (max-width: 900px) {
center your elem
}
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 11 months ago.
Improve this question
I've been working upon a Personal Portfolio for a few days now. I originally made it for my freeCodeCamp certification. But, now I wish to expand it however I've been facing a strange issue with the page where part of the body goes off-screen. I've tried resizing and removing the height of various elements and changed their display and position properties. But it's not working. I mean, it's not the biggest problem since all text and images are visible but still it's annoying.
I've hosted it through Github Pages here is the link:
brainstormed.github.io
It would be of great help if someone could point out what I'm doing wrong.
Thanks!!
The fixed padding of 40px on projectTile CSS class is causing the issue. On small screens the horizontal space is already filled by the image width: 80vw; padding: 10px; margin: 20px. You can either remove that padding or use a media query to remove it on small screen sizes.
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've looked everywhere and I've tried almost everything and I can't seem to understand why my work is messing up. I even asked my ict teacher for help but I didn't want to tell him that it didn't show up since he spent ages on it.
Anyways, uh quite frustrated since everything is going wrong. I just want my footer to be at the bottom of the page and for me to write on the page without it going into the header.
coding for website: https://gist.github.com/JazmineCz/12884de1cf76ce72f3265b83c13aab76
The <footer> just act as a <div> and don't have some special property to get at the bottom of the page.
Your page don't have that much content so that the footer get to the bottom, What I mean is footer is at correct place at the end of page as your page is ending there
One thing you can do is fill up the page.
another was to move it to bottom are using css.
2 things you can do either give the article section a height:100vh this will make the Article section a vertical page long, or *make the footer's postion:fixed and then set bottom:0 this will fix the position of footer and it will be not move even you scroll
You need to give height to your section. For example;
section {
height: 500px;
}
Your footer is in the bottom actually. Since you don't have enough content between, it doesn't have a place at the bottom.
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 footer in the main home page works fine: https://michaelarabic.blogspot.com/
It doesn't work when you're on a Page or a Post.
Page: https://michaelarabic.blogspot.com/p/home.html
Post: https://michaelarabic.blogspot.com/2019/03/test-2.html
This is one of the default blogger templates. I tried to figure out what's the <div> that is responsible for the footer.
Using inspect feature in Chrome, I can guess that they are the ones that have those classes: footer-outer and footer-fauxborder-left.
After figuring out the possible or the potential class names. I used the method in this question: Make footer stick to bottom of page correctly
There was some changes in the footer but that's not what I wanted. It became very thin and it doesn't respond to changing the height. I faced some issues while trying different solutions from other websites.
If it's hard or impossible to stick the footer to the bottom. At least, I need a method to hide it.
This is very simple,
just fix the
position of your footer content to fixed
,it will ready your content to fix to a point, now the browser looks for the position where it need to be fixed so just pass
bottom:0;
now in your case the content is not containing the full width so to recover that we need to provide a
width to 100%
so your final code looks something like this.
footer{
position: fixed;
width: 100%;
bottom: 0;
}
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
For a school deliverable I need to make a horizontal bar graph with a description for each bar. This is the first HTML/CSS thing I'm making after completing the codecadamy courses. I've been able to figure out everything so far by looking at stuff on codepen, w3schools, stackoverflow, etc. But this last part is kicking my ass and I can't figure it out.
I have two lay-outs:
the graph and description next to each other for screens wider than 1240px,
the graph and description under each other for narrower screens
I did this by making two columns in Bootstrap and giving the container two fixed sizes. This works great on screens wider than 992 pixels, but on screens smaller than this the links don't work anymore. Some detective work with the Chrome Developer Tools shows that this coincides with a float:left that's enabled by #media (min-width:992px) in the bootstrap.css. Disabling the float on wider screens breaks the links again, but enabling it narrow screens doesn't fix them, so I'm not sure how that relates.
Here's the page: http://tijmen.kervers.nl/B1.2/competencies.html
And I think these are the questions I need to ask:
Why do the links only work when float:left is enabled?
If I failed to provide necessary information please let me know, thanks in advance!
Add a clearfix on your first #bars with Bootstrap's class clearfix, and it's clickable again.
To understand this :
Without clearfix, your block #bars has no height, and the second .col-md-6 overlaps it. The links are thus unclickable :
With clearfix, your block #bars clears the float of the second col, and has its height defined by its content. Thus, its content is brought back to front, and clickable :
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 8 years ago.
Improve this question
I'm trying to solve this problem in Internet Explorer 8.
I have two div tags whose content should be shown on the same line. I know I can easily achieve this by using inline-block. However, I also want that, if the browser window is reduced to the point where the content doesn't fit in a line anymore, the content of the second div is moved on the line below.
Basically I'm looking for a behaviour of the kind "show both items on the same line if there is enough space, otherwise go to the next one".
Is there any way to achieve this with IE8? Even a Javascript solution is fine.
Try using style="float:left" on both divs. You may need to wrap both of them in another div to get the effect you're looking for.
You can use a media query to check the width of the screen and change the styling based on that:
#media(min-width:768px) { //div style here }
Check it out here:
http://jsfiddle.net/b9ahqnt0/
as well as float left try adding a percentage as a width so when the size of the screen is reduced it can adjust. Although normally when it comes to responsive sites you are better setting it up then adjust the issues as Daniel said using #media conditions to change the layout as the screen changes to what you need it to look like..