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
Related
So I have an issue when the screen is a certain width my background photo disappears. It's weird because at full screen (desktop) it's fine and on mobile it's fine. It's kinda the in-between space like tablets or small desktop screens where the background photo leaves/disappears. (The site was written with "responsiveness" in mind.)
The code is quite extensive so it would probably be easier to visit the page in question and use "inspect" to see the code. Unfortunately, iv tried some solutions but they have not worked which means I have no clue what I am doing wrong! How can I get the photo to NOT disappear regardless of the browser/screen width?
See the page # Zoeaa.com
RECREATE ISSUE BY: Reducing the browser and at a certain point, and the background photo should disappear.
Would really appreciate the help! If there is anything I can do to improve this question, please let me know!
Photo of site working.
Photo of the site not working.
I reviewed your site and I think this is not actually background issue but height issue on the element which you applied this background image.
I found something like that:
#media only screen and (max-width: 1360px){
.px_slider, .px_slider .slides>li {
height: auto !important;
}
}
So when height: auto !important; the element I found height is 0 that's why background image not showing. So just check you media query break-points wheres you wrote same type of CSS.
See here:
And when showing:
I am working on that website
https://steelmountain.io/new/
I tried to fix css but still zoom-out the website its gone worst.
Can someone please help me to fix my mistake.
Thanks
Layout seems fine to me honestly, at least from a desktop point of view. When you alter the screen height/width there are a few overlapping elements, which can be fixed by adding spacing, padding, and margins within the corresponding css #media. Use percentages to ensure that pixelation does not remain constant
For instance,
#media only screen and (max-width: 1200px) {
.hero__form .form-control {
padding-top: 10%
}
}
If you look at this website in Google Chrome's developer options, specifically mobile responsive toggle, it will overlap my portfolio section over my about section. I have tried a number of potential fixes from the internet, like changing the "display" and "positioning" in CSS. None of those worked.
As a side note this issue doesn't exist on local environment, only live.
Any suggestions?
P.S. This is a portfolio website. I'm not trying to solicit my information. It's just broken and looks bad on mobile. THANKS!
Well, try to removing the rule height: 100%; from the following classes:
.intro-section
.about-section
.portfolio-section
This solves the overlaping bug. You can still add a media query to reduce the padding-top from all sections. Something like that:
#media all and (max-width: 580px) {
.about-section, .portfolio-section {
padding-top: 70px;
}
}
Hope this can help you.
You can just remove the height: 100% from the body. This will allow the body to overflow, and not to stuck to the window's height maximum.
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; }
My page is rendering extremely narrow on chrome. It wasn't doing this before I edited it, and the +1 button was the only thing I added. However commenting out that doesn't seem to fix it. Can anyone guide me into what's exactly wrong here? I've tried tracking this but I'm at a total loss.
Site
extra Css
.main-body {
padding: 20px 160px 0px 160px;
}
You should use a media query to clear this on mobile.
Example:
#media screen and (max-width:screen-xs-max){
.main-body{padding:0px;}
}
I always recommend using a container instead of a custom class. If you are using a row property without the container you aren't using Bootstrap properly. Main-body should be replaced with container. Then you set the widths on the container for each breakpoint. Solves a ton of headache and it's proper for Bootstrap.