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 20 days ago.
Improve this question
I used the outline of the code from we3schools. My problem is that the button is not level with the navbar.
I couldn't get the code to align where it would let me publish so here is the github link (it's an html file with just the navbar and a css file with just the navbar portion in it).
LINK: https://github.com/Terrancesky/website/tree/main
Seems everything is fine, You can also check by adding this css
#media screen and (min-width: 600px){
.topnav {
display: flex;
align-items: center;
}
}
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 8 months ago.
Improve this question
I have this website that displays 'The Game of Life', showing a canvas with the cells. On mobile, you can touch the canvas and it draws some cells, but it also scrolls the screen a little bit, even if the content of the web doesn't occupy more than 80% of the screen.
I've tried using
body {
overflow: hidden;
}
But it didn't work Webpage
Try this:
body {
overscroll-behavior: none;
overflow: hidden;
}
EDITED!!
I finally solved it. In my CSS i put this:
html, body {
touch-action: none;
}
Maybe it doesn't work for everyone, but solved my problem.
Buttons still work properly :)
EDIT:
I needed to activate the touch action in the rest of the website, so i replaced the code above, applying it only to the canvas
canvas {
touch-action: none;
}
This allowed to zoom or scroll in the rest of the web, while not in the actual game
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
Sorry for the noob question.I've bought a template in order to practice and I have the next situation.
I'm trying to obtain a centered logo for mobile device and I simply can not figure what is the problem.
I've uploaded the code on a domain: http://digitalicus.com/ to simplify the process of explaining.
Any advice's are much appreciated.
Vlad
with this css your can align your logo to center:
#media screen and (max-width: 767px) {
.header-content-one .d-flex {
display: flex;
justify-content: center;
}
.header-content-one .d-flex a{
width: 100%;
}
}
I've setted up a breakpoint to 767px (the code work only for smaller screen) change it to the measure you want.
Looks like you are using "display: flex" which could be part of the problem. You could try using display: "inline-block" or "display: flex-box" which will start you in the right direction. Check out this article: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
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 5 years ago.
Improve this question
I'm experiencing some issues with parallax background images.
I'm working with this template. As you can see, in the home page there are 2 divs exploiting stellar.js (i.e., .fh5co-cover and #fh5co-started ). All seems fine with a computer resolution but if I try to visualize the website with a Phone resolution (e.g., simulating the iPhone7 Plus rendering through Chrome) the background image in .fh5co-cover is not centered. Moreover the background image in #fh5co-started displays grey borders when you scroll the page.
Is there a way for centering background images and for avoiding those annoying grey borders at small resolutions?
Set the background position x to 50%:
background-position-x: 50%;
In here:
#media screen and (max-width: 768px)
.fh5co-cover {
heifght: inherit;
padding: 3em 0;
background-position-x: 50% !important;
}
PD: important! because the position is being changed in js by whatever plugin you are using.
About the gray border, couldn't find it so i guess was just a bug on your browser
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 5 years ago.
Improve this question
I have created a mobile header only for mobile devices. My problem now is, if you click on Menü, the menu shows up but you cannot hide the menu again by clicking on Schliessen. Also the function closeExtendMenuMobile() got set with an onclick event.
Also, if you call the function closeExtendMenuMobile() in the console, the menu colapses again. How is that?
Why is the event not clickable and how can I fix that?
Here ist the website I am talking about: https://classymagazin.de/home/
You have to load the website as a 'mobile device'. Means, below 920px!
div#headerHeadingMobile {
position: relative;
z-index: 999;
}
Does the trick.
The element with the Id of extendMenuMobile is overlapping the link so you cannot tap it.
Maybe try giving extendMenuMobile a position of absolute and a top to push it down so that the link is not covered.
OR
Set #extendMenuMobile and .vc_custom_1509619992888 to position relative and give them appropriate z-index's.
I found this using firefox's "Responsive Design Mode" set to a mobile size and the firefox built in "Inspector" both are under the "Developer" section.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I am using this javascript, which scrolls pages (divs).
The problem I am having is, when resizing the browser window. A white border appears.
Is there anything I can do to fix this issue?
URL to my slightly modified version here.
Thanks.
In your class .wrapper, mask and itens* try using % values. This works for me!
.wrapper {
width: 100%;
height: 100%;
}
So I'm trying to inspect all yours elements and i notice if you change with property to 100% your animation works good! Instead of the "back div" coming from right is coming from bottom
This is a advice -> If u use 'px' unit you will have serious problem just because your web app isn't responsive!
See the transition with 100% width except the frist one and notice the white border appears!
You need to figure out what its better for you
If you really need the "back div" coming from right you need to do a transition and using 'margins' and 'z-index'
By removing all the height and width variables, I was able to keep the script from modifying my css.
Thanks for all your suggestions.