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
When viewing my website (http://elsealabs.com/), it seems as if the content is animating inwards, even though I have no animations for such an event specified. How do I make this animation stop?
It is especially noticeable if you refresh the page and watch the download button or the navigation menu.
The Stylus code is here: https://gist.github.com/Connorelsea/a8d62c9dc7ac31069fc9
My Jade layout is here: https://gist.github.com/Connorelsea/b614e3754a1854625f1b
My Node.JS server code is here: https://gist.github.com/Connorelsea/198b7c2a1bace65d03c9
If anyone could even point me in the right direction to figuring out why this is happening, that would be great.
I believe it's the padding or margin transitioning at the page load. It is a bit weird, but the solution is to only apply a transition to the attributes you wish to have transition (and not "all" as you are here).
For the links, it would be something like
a {
transition: font-size .2s, font-weight .2s;
}
On a sidenote, I suggest making the line-height a fixed height (in px) to make it less jumpy.
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 6 days ago.
Improve this question
The website is: https://www.epicoyachts.ch
As you can see there is the possibility to scroll right, which should not be possible.
I've tried to play around with the positioning settings, trying to scale the upper bar to the screen. But it has not solved the problem. I can't understand which settings I have to adjust, and mainly of which element.
it's the tiny red arrow to scroll back up
I haven't found any code for your website but, I have a feeling that for your page dimensions you are retrieving the data from the user resolution or, using a constant resolution like 100%.
If that's the case then I'd suggest possibly a fixed lengt resolution of eg 1920p.
//You can try this first if you did not have this
html, body {
max lengt: 100%;
overflow-x: hidden;
}
// If you did have it you can try changing 100% into a standart resolution (1920)
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
The problems that I have is that
1st. the image will change when I resize the window but the text won't
2nd. when I put the browser window to the side there is a white box
Please help me with this 2. I'm getting annoyed
I was going as the "Free HTML and CSS3 Course" to make you own website by Bring Your Own Laptop.
you did not share your source code. Regarding your problem what you can do:
set padding and margin 0 to the body of your HTML.
set font size in em, or vw of your text.
write your own css media queries to make a responsive website.
We couldn't got any image or code. So it's hard to tell but for 1st problem I think you are setting font-size in px(pixel). Means it will take a fixed amount of screen size. You could try with something else as abir sikder said em or vw or %.
Also I think
box-sizing: border-box; will help
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 using vanila Css and having sucsess on the mobile Firfox broswer but a a problem occuring using Chrome broswer.
Here is the link.
Man i could not fixed. removing the footer which is fixed only partly solves the problem the right blank white
There is a "#footerTxt" element in the "#footer", you may modify it's css. If you remove the 'width' from it, the view is will normalizing (white space will remove from the right side).
You need to change/modify this "#footerTxt width" property.
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 am very new at both HTML and CSS but learning on the way. I have come to a stuck point and I can't seem to work it out. When viewing my webpage I have noticed that when I 'inspect element' the bottomnav div and ul div are both the size of my main div which is basically 0.
This is causing my issues in terms of trying to place a boarder on my bottom navigation.
None of the images are working but here it is
Code: http://jsbin.com/xuluqugovu/edit?html,css,output
Thanks for anyone's help on this.
Set overflow:auto on the .main rule (since its contents are floated, it does not expand to contain them)
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 have built a website in HTML/CSS, however at some point along building it I have gained a slight sidway scroll to it, in other words the instead of the website perfectly fitting the screen there are thin bars of white each side that can be accessed through scrolling left or right on the screen. I am wondering how I could find out the source of this issue?
http://whynotapp.co.uk/tryitout.html
This occurs on both safari and chrome
This could happen because of a left/right margin on a 100% width element/div. It could also happen if you have positioned an element somewhere that causes it to go off the screen.
In general, if nothing is missing from the screen that needs to be on the screen, you can just use :
body {
overflow-x: hidden;
}
which will hide anything that over extends the x access from the screen.
Inspect element in chrome allows you to see a box of the location and size of an element, by selecting it in html. The element causing the problem should be larger than the containing element, which can help you find it.
F12 to enter dev mode or right click your element.