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 8 years ago.
Improve this question
How can I make my website mobile, because if my website is viewed on mobile device, then my website design doesn;t fit, the header& footer are unbalanced.
Please suggest what change in my web site good view on mobile.
You can use mediaqueries*, you should do resarch on responsive design:
body{
background-color: red;
}
#media screen and (max-width: 800px) {
body{
background-color: green;
}
}
#media screen and (max-width: 500px) {
body{
background-color: yellow;
}
}
The code above is a simple example. The body will be red by default, green if the device is smaller than 800px and yellow when smaller than 500px. You can do this for print only, or min-width:1024px, or orientation:landscape. Plenty of options :)
A tip:
This tip will save you a lot of time: Instead if defining widths for different devices, use standard block behaviour. This will give you the option to use the element as 100% minus margin/padding/border.
#wrapper{
width: auto;
display: block;
margin: 10px;
}
*In the link provided there are examples for iPhone only. I suggest you keep it as broad as you can, this will be better in the long run
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 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;
}
}
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 does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 7 years ago.
Improve this question
I need to add a carousel on web site that shows various number of slides depending on screen width e.g. if the screen is 1920px width it will show 7 items, if width is 980px - 4 items etc. I guess there are plenty of jquery plugins which can do that. One more thing though - when sreen width is small and it can contain only one item - I need the carousel to stop being a carousel and just stack items one under another. What is better way to do that?
You could do this with CSS:
#media only screen and (min-width: 768px) and (max-width: 959px) {
/* do stuff for big screens*/
.small-screen-carousel{
display:none;
}
.big-screen-carousel{
display:block;
}
}
#media only screen and (min-width: 480px) and (max-width: 767px) {
/* do stuff for medium screens*/
}
#media only screen and (min-width: 80px) and (max-width: 479px) {
/* do stuff for samll screens*/
.small-screen-carousel{
display:block;
}
.big-screen-carousel{
display:none;
}
}
I faced same problem and I changed plugin and used elastislide it is exactly works like what you need http://tympanus.net/codrops/2011/09/12/elastislide-responsive-carousel/