Ok,
So I have a Div which is set to 100% width via Css (width: 100%;). In web browsers it displays fine. On iPhones (both in Safari and Chrome) it hangs over the screens but quite a few pixels (couple hundred). When setting at 100% width Android phones seem to fit the div into the screen.
I basically just want my div to fit in whatever container its in, but i think for some reason the iFrame is stretching it on iOS.
I tried setting a fixed width to test (e.g. width: 10px;), which is reflected in the web browser, but in iOS it is always the same width... I tried playing around with the #media in CSS, but the width will not change.
I also tried adding the following meta tag:
and added a fixed with css and applied to the div... still did not change the width..
I tried removing the div, just having an iframe of 10px, which is reflected on my laptop, but in ios it is still extremely wide...
I will try provide some screenshots to show what I mean, you can also feel free to visit the page I am talking about, however, you may need to join up to test: http://www.ozesports.net.au/chat
Ive posted an album for the below images as I can only post 2 links at the moment:
http://imgur.com/a/q9wcM
Page on laptop (Google Chrome)
1st img
Page on iOS (Safari)
2nd img
Page on iOS with me pinch zooming out so you can see its hanging over (Safari)
3rd img
Page on Android
4th img
I am really stuck, let me know if you need me to clarify anything..
Thanks!
Try working with media queries
#media only screen and (min-device-width : 320px) and (max-device-width : 568px) {
width: 100%;
}
Related
I have written some HTML and CSS for a website, and some media queries to reformat the code when the screen shrinks. This works on browsers, when I shrink the browser window size, but isn't working on mobile devices. Can anyone think of why? See the Media CSS below:
#media screen and (max-width:500px) {
#education-table td {
display: block;
text-align: center;
}
}
Thanks in advance!
I have looked at similar issues and thus added the "screen and", but this has not fixed the issue.
Update: I am testing the code on a pixel 7. When resizing the browser to the same width as my phone it works perfectly. I have ensured my phone width is indeed below 500px. TO clarify, this code works when used on a browser where I have both emulated a pixel 5 (through dev tools on edge) as well as just resizing the browser window. However, when I load the same site on my pixel 7 (and a pixel 6a, + Samsung galaxy a30) this CSS does not kick in, and it loads the standard "desktop" CSS styling - so the columns of tables do not collapse and are impossible to read
This code is valid CSS and works like intended. It just applies to devices with screens smaller than 500px. I would recommend you to set the size to something higher like 768px.
The screen and just ensures that the style is only applied to normal screens and not the print-view or anything else.
As others mentioned, your code is correct and should work on mobiles, it just depends on their screen size.
If you want to reformat your layout for mobiles in portrait orientation independently of their screen width, you might want to consider the following:
#media screen and (orientation: portrait) {
#education-table td {
display: block;
text-align: center;
}
}
Solved it!
I needed to add this line to the HTML document -->
It was not linking the device width before I added this meta tag. Thanks for the help from you all
I've been searching in other questions since this is a pretty common problem but none of them applied to my case.
I'm developing a small web app with React, just to get the basics, and the background img works fine in mobile view (there's a media query that changes it at 480px to a portrait one) it resizes from 480px to 320 and looks good.
The problem is that, at certain heights if you stretch or wide the window the background gets stucked in the middle of it (if you recharge the page it appears as it should, being the window in the same exact place as where the problem occurs).
The img is loaded through CSS in the html, If I remove the background-size property it works as expected in desktop and mobile, but when I cross the 1260px width it doesnt cover the full width.
I have this codesandbox with all my code: https://codesandbox.io/s/stoic-brahmagupta-ro2kb?file=/src/style.css
And I attach an image of the problem. Thanks in advance.
As u r testing this you can see the content of the App is overflowing the html element
I rather use min-height on global elements like body or html than static height to prevent such as cases.
So to fix it you just simply add
html {
height: auto;
min-height: 100vh;
To prevent not overflowing instead of scaling we just add min-height equaly of 100vh (viewport height).
I think it will propably do the job without height: auto; but i like add it to prevent even more edge casing
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'm trying to make a website for my friend's company and I did but it only looks good on desktop computers. On the phones and tablets looks really bad. I was doing so much research but couldn't find how to use fluid layouts or any other way. On some phones, divs just position in weird places and on some other phones they just look very small or cover the whole screen. And I have a white space on the bottom of the page(on phones). Here is a link so you can take a look: http://agrofit.hr/ p.s. it is on Croatian but you don't need to read :-))). Please help as soon as you can. Thanks!!!!
Try using percentage measurements instead of pixel measurement's.
For example:
.example {width: 100%}
rather than:
.example {width: 700px}
Also as mentioned above use some CSS Media Queries.
So for example:
#media screen and (max-width: 700px) {
img {width: 200px}
}
This says that whenever someone is viewing on a device with a screen smaller than 700px, the image will be 200px.
Hope this helps.
[Edit] To Test Your Site On Mobile -
1) Open the webpage you want to test in Chrome.
2) Right click and click 'Inspect'
3) Then a grey window should appear either at the bottom of your browser or the right hand side of your browser.
4) At the top left corner of the new grey window there will be a two buttons, click the one that says "toggle device toolbar"
You can now select different devices and see how they appear in each.
You should read on css media queries and responsive layouts. You could also check out responsive frame works like bootstrap
div {
font-size: calc((.05em + 2vmin) + (.05em + 2vmax));
line-height: 115%;
}
That seems to work.
I tested on Chrome with Inspect's device profiles.
I have this page, it only has an image on it right now but since I'm pretty new to this I thought that would be enough. On a normal desktop screen, I want the image to be left-aligned. And that's how it is. But when it's in portrait mode, and the max-width is 480px, I want the image to be centered, horizontally.
My code is:
#media (max-width: 480px)
{
img
{
display: block;
margin-left: auto;
margin-right: auto;
}
}
Now, the above code works great on the computer. When my PC is in landscape mode and the max-width is greater than 480px, the image is left-aligned. And when I put my PC in Portrait and Shrink the browser window's width to less than 480px the image becomes centered.
But this does not work on my phone. My phone's width is 480px. Why isn't is working then? I don't understand.
This will help (it did for me) - http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html.
Viewports, widths and device widths are confusing - with multipliers, and other things in place - this article seemed to explain them.
What about putting
text-align:center;
On the parent wrapper?
http://jsfiddle.net/lharby/6y4E4/
And combine that with setting max-widths in the media query?
Just a thought, try having the page detect the device that is being used and run different code for desktops and mobiles? not sure how it would work since I am fairly new to this myself, but I have seen others do it.