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 !
Related
I have deployed the site here. Everything works but if you scale down the page to a mobile-size, you will notice that there is a huge space at the right side of the screen. Not sure what it is? Normally, I don't have to write posts on here because somebody has asked the same question but this time I couldn't find anything.
Hoping someone can help. The HTML doesn't extend to the full page even though its styling says for it to go to 100%. Let me know if you need any other details, really hoping someone can help.
Use below CSS and remove width: 100vw !important; from html tag
img{
max-width: 100%
}
Check screenshot https://prnt.sc/1nya57a
I’m working on a website for my business at the moment.
I’m pretty much done, but the header (inside the main but before the content div) image isn’t resizing when on mobile, meaning that the user can scroll horizontally and it totally breaks the responsiveness.
Code at https://GitHub.com/Maestoso-Digital/MaestosoWebsite, and website at https://maestoso.uk.
How can I fix this?
On a less technical side, what are your thoughts on the design? Are there any changes you would recommend making?
I’m fairly new to web design and CSS in general, so sorry if this is really basic or the design looks a bit amateurish - we’ve all got to start somewhere 😊
Thanks in advance.
Since the background is an img and not an actual background-image or even a background, set the display to block and give it a width of 100% so that the image will resize with a width of 100% based on the screen width
#header-img {
display: block;
width: 100%;
}
If you're looking for feedback and suggestions for the site, head over to ux.stackexchange you'll have more luck there
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 using SquareSpace for the building blocks of my site and creating some custom CSS to fine tune. I'm trying to get the gallery page to display the images with more height. At the moment they are not very big in the slider, especially when viewed on a large monitor, seems like there is a lot of wasted space.
Using Inspect Element, I found there to be some HTML styling the height and restricting it to 500px.
<div class="slideshow strip main sqs-gallery-design-strip rendered: id="yui_3_17_2_1_1441831607164_254" style="height: 500px; margin-top: 203:5px;">
Changing the height from 500px to 600px in Firebug works perfectly, so I tried to apply some custom code to in the SquareSpace site. I used:
.slideshow strip main sqs-gallery-design-strip rendered {
height: 600px;
}
The injection of code did not have a visible result on the page. Am I writing the CSS incorrectly? Is there something I'm missing here? Please help.. Thank you!
Try to clear your cache. Sometimes a cache does not refresh on a server.
To clear it on a site, just hit Ctrl+F5.
Your CSS rule is close. It should read:
.slideshow.strip.main.sqs-gallery-design-strip.rendered {
height: 600px !important;
}
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; }