I have a survey page, where the body has background-color: #A71930, and a container with background-color: white, which holds the <form>, like this on a desktop:
I have added these #media queries for mobile devices:
#media all and (max-width: 600px) {
#survey-container {
width: 100%;
}
}
#media all and (max-height: 600px) {
#survey-container {
height: 100%;
}
}
These queries make the page look like this on a phone screen:
This is good for now, but my issue is when you scroll to the bottom, then start going back up, this happens here:
As you can see, when you scroll up, part of the container is cut off at the bottom, still leaving the <form> content. You can see for yourself here. So, what is causing this problem, and how can it be fixed? My full code can be viewed below(the issue does not seem to occur in codepen, so only try the issue in a mobile browser):
https://codepen.io/jerryd2304/pen/qvERZL
I was able to replicate this in Mac/Safari (12.0.3), but not Chrome or Firefox.
Fix 1:
Remove the height: 100% altogether.
Fix 2:
Change height to min-height:
#media all and (max-height: 600px) {
#survey-container {
min-height: 100%;
}
}
Either way, the problem is resolved:
Related
I am trying to make a responsive webpage with my site here: https://chunzg.github.io/about.html
I have made a flex container for the photo and text.
Have used the media query below to first test on my laptop screen :
#media only screen
and (min-device-width: 300px)
and (max-device-width: 600px)
and (-webkit-min-device-pixel-ratio: 2) {
.sidebar {
width: 100%;
}
.photo {
width: 100%;
}
.text {
width: 100%;
}
}
but it doesn't work - nothing changes. I would like the sidebar, photo and text to be stacked vertically on top of one another if I am looking at it on a narrow screen.
I know I must be doing something wrong but just don't have enough experience to know what needs to change
Thanks
Hey I am giving a reference:https://www.w3schools.com/css/css3_mediaqueries_ex.asp
I couldnt understand the exact question but I think it should be like this:
/* On screens that are 992px wide or less, go from four columns to two columns */
#media screen and (max-width: 600px) {
.sidebar {
width: 100%;
}
.photo {
width: 100%;
}
.text {
width: 100%;
}
}
In my code I scripts lets webpage to change width by 100 if the screen size is less than 600 or equal to 600.(Maybe it can be usefull for your ipad or small devices screen)
Also why did you used min and max at the same time?
Note that I am not professional but I have had some experiences with css so that my answer maybe could not be the solution. But lets try this.
I have a problem with my navbar. I'm using Bootstrap for a responsive navbar but it overflows on the mobile version of my site. I used overflow-x: hidden on body and it solved the problem for larger versions but not the mobile version. I've checked for margin/padding issues on all my elements in the navbar but can't seem to find the problem. You can see the issue on www.tcbarringerphotography.com on the right hand side if you view it smaller than 500ish pixels. Any ideas?
Your problem is with width of two classes that you are using in your footer
social-media
blog-posts-link
#media only screen and (max-width: 1040px) {
.social-media {
width: 100%;
}
.blog-posts-links {
width: 100%;
}
}
Reduce the width to 90% at media screen max-width: 576px;
#media only screen and (max-width: 576px) {
.social-media {
width: 90%;
}
.blog-posts-links {
width: 90%;
}
}
mark as answer if it works thank you ;-)
Could someone inspect my website and look into the header.
The problem is that when the website transitions into mobile, the header doesn't seem to go full width - there are some margins around the left and right.
I would love to have some advice.
Thank You,
Website is: http://blackbird.marketing
When I inspect your website, I see your site set max-width: 90% at #media screen and (max-width: 760px) and max-width: 96% at #media screen and (max-width: 1200px); You should reset it.
You should not be asking about this, as a developer, you must have the skills or the initiative to try to fix this by yourself.
This is what is happening:
#media screen and (max-width: 760px)
body .pagewidth,
body.full_width .themify_builder_row .row_inner,
body.full_width .related-posts,
.full_width .post-nav,
.full_width .commentwrap {
/* max-width: 90% */
max-width: 100%; // <- change the 90% to 100%
}
You also have 2px padding on the right, either you wrap it into a media query or change the #headerwrap directly
#headerwrap {
/* padding-right: 2px; */
padding-right: 0px; // <- change 2px to 0px
}
I understand there's a gazillion questions on this issue but none of the solutions on any of them seem to work for me. This is what my markup looks like:
<div class="immersion-div">
<div class="immersion-div-image"></div>
</div>
As you see, it's a fairly straightforward setup with one div containing another. The parent div is styled to adapt its height to the device screen resolution using media queries. Here's how the two divs are styled:
Parent div:
#media (min-width: 2000px) { .immersion-div { height: 1307px; } }
#media (max-width: 1999px) and (min-width: 1401px) { .immersion-div { height: 1000px; } }
#media (max-width: 1400px) and (min-width: 750px) { .immersion-div { height: 500px; } }
#media (max-width: 749px) and (min-width: 300px) { .immersion-div { height: 300px; } }
#media (max-width: 299px) { .immersion-div { height: 136px; } }
Child div (with the image background):
.immersion-div-image {
background: url(../../bootstrap/img/homepage/spanish_immersion.jpg) no-repeat center center;
background-size: cover;
height: 100%;
}
The image serving as the background is 2880px by 900px (although that should be inconsequential in this scenario) and the resolution of the screen on which I tested this is 1366px wide. Per the defined media queries, the height of parent div should evaluate to 500px since the screen falls in the 750px-1400px category. However, on Internet Explorer, the div seems to render with a height of 1000px! This issue is only affecting IE whereas all other browsers are rendering the divs fine. What could be the problem? Before anyone suggests using background-size: contain, I must admit I tried it and it messes up the aspect ratio leaving a blank band at the bottom of the div which is why I don't want to go that route. Besides, I want to understand why cover wouldn't work on IE when it does just fine on all other browsers.
Just in case it helps, the site in question is peppyburro.com and the affected divs are on the last green image on the home page.
Hi I have looked at several stackoverflow questions on how to remove white space from a webpage (see selection below) but noone of the solutions given had any difference for me. The werid thing is that the whitespace only shows up when I look at my site on my mobile. The site in question is: http://moduleplanner.github.io/ and its corresponding github repo is: https://github.com/Moduleplanner/Moduleplanner.github.io
Thanks for the help. :)
Huge White Space At Bottom Of Page
Eliminating white space at bottom of page
CSS White Space At Bottom of Page
Strange space at bottom of page on iOS
current state of whitespace
It's your CSS on the .degree element, specifically the absolute positioning. For mobile, change the css to the following;
#media only screen and (max-width: 640px){
.degree{
min-width: 100%;
left: 0;
right: 0;
}
}
Or, even better, the following;
#media only screen and (max-width: 640px){
.degree{
min-width: 100%;
position: static;
}
}
Update
#media only screen and (max-width: 640px){
.degree{
min-width: 100%;
position: static;
}
.div.degree div.course{
width: auto;
max-width: 100%;
}
}