Hi everyone! So I'm having some problems trying to fix my client's site that has only one page doing what is shown on the screenshot. The problem is only on mobile and tablet. I tried messing with the meta tag and changing the viewport but that only fixed the tablet and made the mobile version blow up. The already-made template has fixed widths on the header and footer and the overflow: auto. Even when I removed the overflow it didn't change anything, so maybe it's the fixed widths that's the problem? Would anyone have any suggestions for how I could fix this?
Thank you all so much!
--Arielle
Easy just add the following then you can worry about viewport issues
body{ min-width:1000px; }
Related
I have this website that looks like how I want it to look like on desktop. When I view the website in the console (eg, check responsiveness) the website looks fine. But, when I upload the changes to AWS and view the website on my phone the vh and flexbox aren't working like I'm expecting them to.
View the website on your desktop and go to the console. From the console change toggle the device toolbar and change it the view to any of the phones. It works as intended. But then check the website out on your phone. What your viewing on the console is not what you'll see on your own phone.
I'd like the nav-bar, question, and chatbox, and input box all on one screen. Right now a use has to scroll through the chat in order to reach the input box. Once they reach the inputbox, they can't see the navbar or the question.
I'm trying to follow this guide
Chrome / Safari not filling 100% height of flex parent
But I'm still struggling. Not sure if anyone can go to my website and see the what's causing the problem.
There is too much code for me to put on here to hone in on the problem
I got rid of ALL height:100% css styles. I have very few height: ??px css styles. All 100:vh attributes are correctly implemented (I believe) as well as display:flex properties. If anyone can help, that'd be amazing.
Heres how mobile looks in the web console (which is what I want)
Heres how it looks (as an example) when you go on the website on your mobile phone. (Which is what I do NOT want)
EDIT can someone delete this post?
I fixed it by using display:flex and flex:1 in the correct divs. (I missed a few)
I would comment but I don't have comment privalages. I do want to help.
Have you added the following line to the top of your HTML?
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Hope this helps. Best of luck with the project!
Try to change height: 100vh; to height: 100%;. I hope it'll resolve your issue. Thanks
body, html {
height: 100%;
margin: 0;
padding: 0;
}
I am building a simple web page, and it seems to keep spilling over the width of the phone no matter what I try. I have tried to add the css attributes max-width:100% and overflow:hidden to every single container in the page, and still the problem remains.
I just feel like I am overlooking some very elementary solution. Could you please help?
Edit: A link to the page is https://www.hyperoffice.com/contact-us/contact-us.php
Please add the following to the main css file of your website.
body{
height: device-height;
width: device-width;
}
Cheers !
I'm working on the responsive part of my website but I'm having a bug with the mobile devices. When I test the responsive on my desktop browser everything works great, but when I test on my iphone this is what happens.
screenshot #1
screenshot #3
I don't know why but the container apply some sort of margin in the right. Already searched everywhere and nothing's fixing it. Already changed the viewport and add a min-width to the body. This happens when I have a 100% width on the main div.
If someone can help me with this i would be very thankful, because i'm trying to fix this for days.
Finally i fixed this problem. After a lot time trying different things I just wrote this css for all the small devices.
#media (max-width: 768px) {
html, body {
width: auto !important;
overflow-x: hidden !important;
}
}
I don't know if it's the best way to do it but solved my problem. I had this bug for a long time, i'm happy it's working now.
Thanks a lot everyone that tried to help me.
Cheers
As the title suggest, I'm having issues with creating my website.
It's currently at the design stage and I'm having problems upon putting my browser into windowed mode.
Everything sort of re-aranges it self. If you scroll a bit you see some sections falling out of order.
I don't know what I did wrong, but I would very much like to fix this issue.
This is the link to my website as it stands:
http://www.dennis-website.co.nf/index.html
There's no minimum width set to the overall site. Your #container_main has width set at 1002px where as the rest of the site doesn't so the header and menu will collapse to the browser's width. You can quickly solve this by setting
#wrapper {
min-width: 1002px;
}
So the overall site has a minimum width.
You need to use Media queries to adjust the font size, width of the elements and much more for various screen resolutions.
Example: http://webdesignerwall.com/tutorials/css3-media-queries
You have to make a responsive design website to overcome this issue. Here is a great book on Responsive Design by Ethan Marcotte. It will cover all topics of how to make responsive grid, responsive images and media queries + this is only 150 pages small free pdf :D
<div id="nav">
Your CSS must be:
#nav
{
width:100%
}
Url for the unruly site: http://chrism.se
After we put it live we discovered that if the viewport is too small for the content, so as to require scrolling, the background image (body-tag, repeat-x) won't extend beyond the initial view, but I can't for the life of me figure out why and how to fix it. A note to bear in mind is that I didn't code the site by myself, since I'm not that Javascript-savvy and the designers wanted some swooshy effects. My senior colleague could surely find a remedy, but he is unfortunately away and I'd like to wrap this up.
The state of the html and css is the same as when I found out about the issue, but I've tried suggestions I've seen on similar questions, mainly revolving around min-width. I don't really understand the difference between background is only as wide as viewport? and my problem?
Full view = i.imgur.com/6aDpN.jpg
Problem = i.imgur.com/X6JVp.jpg
IE does not support min-width so you can use an expression to do the same:
body {
/* fix for most browsers, fill in desired width */
min-width: 1000;
/* IE Version, fill in desired width equal to the min-width, second value with 2px less */
width:expression(document.body.clientWidth < 1000 ? "998px" : "auto" );
}
The closest thing to a working solution I could find was to from #bodyCurrent, #bodyNext:
Remove right: 0.
Add min-width: 1349px.
Looking again, maybe that's good enough.
Tested in Firefox only, using Firebug.
I realize I'm way late to the party, but I ran into the same problem and added a min-width to the body to fix this problem. Since the link you provided still has this problem, I assume you may want more advice. The min-width of the body should be at least as wide as the viewport when horizontal scrollbars appear.
It's easier to see what's happening if you make your viewport small enough for scrollbars and use Firefox's 3D view to see the page. Then you'll see that your region-footer is set to take 100% width of the body element and that the background works fine; however, the body itself is smaller than the overflow from the top part of the page so you get that cut-off looking area when you scroll. So make the body element have a min-width as large as the overflow from the top part of the page and you'll be all set. This is a pretty common problem (I even noticed it on mailchimp for a while).
Add this to the background of div#wrapper:
background:url("../img/home.png") repeat-x scroll 0 0 #1B2E4C;
Tested it in IE7:
html, body {
position:relative;
overflow:hidden;
margin:0 auto !important;
}