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/
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 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 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
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 9 years ago.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
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.
Improve this question
Okay, so I'm making a mobile theme to my website, which is based on WordPress. I need to scale the images in articles to fit the screen. Okay, I could do that easily with CSS (width: 100%, height: auto) but that's not working right, because then images which are horizontal would be scaled stupidly.
So let's say the images are sized:
576x432
432x576
100x300
Let's say that the screen resolution is 360x640.
Here's how I wan't the images to scale:
360x270 (same dimension, but scaled down!)
360x480 (same dimension, but scaled down!)
100x300 (not scaled, because 100<360)
With the CSS thing everything would just be scaled to 360xSomething, even the small one which doesn't need scaling. And if screen was like 460x780, number 2 would be scaled up even if not needed!
So here's what I've thought of doing:
Go through all images
Check if image width > screen width
If yes, then scale, if not => skip
Profit!
And the problem: I have no idea how :( So any help guys?
You can achieve that using max-height:100%; and max-width:100%;
See this FIDDLE
I used a wapper div the size of your example screen (360x640) around the images and you can see that only the wider/heigher images are scaled.
.image-responsive {
display: block;
height: auto;
max-width: 100%;
}
Apply this class to images.. Should stretch the image on smaller screens :-)
Thank you,
Rahul Patil
You can very easily achieve that.
Instead of width:100%, use max-width:100%.
To scale any image to browser width, simple idea is to use
width:100%;
height:auto
see this DEMO