Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I am working on a RWD site with a fixed side navigation that fits to the top of the page when viewed on anything smaller than an iPad. The problem I am running into is when I switch the view to vertical on an iPad the navigation menu on the top of the page disappears. This only happens on the iPad as far as I can tell.
(keep in mind this is still under development so if you see any bugs please let me know!)
You have in your style.css file set display to none when max-width is 768px, which is iPad's width on horizontal mode.
#media (max-width: 768px) {
[...]
.midnav {
display: none;
}
By the way, if you connect your iPad to the computer, then you can use the element inspector for your iPad if you open Safari and select on the Develop menu your connected iPad. This is very cool and very helpful.
At various points in your style sheet, you have your menu sections set to display: none;. You are then relying on #media rules to display them again, but they are falling through a few cracks (you are playing Russian roulette with them!).
You can test what's happening in your desktop browser. Slowly resize Chrome, and when you get to about the width and height of an iPad, you see all menus disappear. I recommend you use tests like this while setting up your #media rules.
Related
I'm currently working on a website and I have one particular issue with responsiveness.
The website looked very good and resized appropriately when I changed the size of the browser window from maximum to minimum. However I did get an issue on mobile devices where the website was cut off at the right and the title text was overflowing. I managed to reproduce the issue in the browser as well by making the window as small as possible and then zooming in until I got a horizontal scroll bar. Scrolling all the way to the right then revealed the issue.
I tried to fix it for mobile devices by including the following code in my CSS:
#media(max-width: 700px) {
html,body {
width: 150%;
height: 200%;
margin: 0;
padding: 0;
overflow-x: hidden;
}
}
It did solve the overflow issue but now after initial loading the page on mobile is zoomed in and I have to double tap to reset the zoom. I was unable to find a solution for this issue to reset the zoom automatically.
Also shrinking the browser window on PC with this code in place cuts off the website at the right side when the media query is executed.
Here is the code together with a way to look at the issues. If you want to see the original issue you only need to delete the media query from the top of the CSS file.
https://codepen.io/lapierre-bernard-david/pen/NWqZMqd
I'm very new to web development so I'm pretty sure what I came up with is more of a hack than an actual solution. I'd be very happy about any advice.
As I've seen many people with a similar issue, I did include the often suggested viewport header of course, and I have no fixed width anywhere in my code.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I'm trying to prototype project of mine (mobile version of message board). After few hours of html and css I've decided to check how it looks in Chrome (before it i'm was coding in firefox responsive design mode) and everything was smooth.
I can't figure out which css rules causes it to render this way. And why it looks fine only in FF responsive design mode. Thanks in advance!
firefox screenshot
chrome screenshot
prototype link, so you can inspect css
The difference looks like it is being caused by the lack of a viewport meta tag.
Add this to your head tag.
<meta name="viewport" content="width=device-width, initial-scale=1">
This tells the browser to render the page at the width of the device as opposed to trying to render the desktop version of the site and zooming out to fit all the content in the window.
Delete "height: 155px;" into
.homepage-gallery__block {
float: left;
width: 48%;
height: 155px;
margin: 0 1% 10px;
}
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
On http://quizdash.co.uk/ Internet Explorer got HUGE error: it scaling site content to all screen, but in develepment panel, it say that content not scaled and has original size.
http://storage2.static.itmages.com/i/16/0201/h_1454300006_8737908_ad9e854b85.png
Of course, scale option=100%.
Other browsers show site correctly.
Is this undocumented feature of modern IE? Can I with css/html make IE do not scale site?
It's not an error in IE or an undocumented feature.
In your vendor.css, the following CSS appears:
#-ms-viewport{width:10in;zoom:1;initial-scale:1;max-zoom:1}
#-o-viewport{width:10in;zoom:1;initial-scale:1;max-zoom:1}
#viewport{width:10in;zoom:1;initial-scale:1;max-zoom:1}
That's causing the page to scale with the viewport. The only browsers that support #viewport are IE and Opera Mini, so the page will only scale in those browsers. As far as the CSS is concerned, the page is displaying correctly in IE, not the other browsers, so your assertion that the other browsers are showing the site correctly is wrong. However I cannot comment on whether IE is "lying" about computed pixel sizes because I don't know how or if viewport scaling should affect computed values.
If you don't want the page to scale with the viewport, don't use #viewport.
I'm having an issue with background-size: cover on mobile devices (tested on mobile safari and android).
There are times in which the height of my webpage changes when the user expands a more info box. Whenever that happens on mobile the background image actually zooms in. On desktop it does not.
I worked around this issue by adding a "scrollable" layer in the CSS, but this introduced more issues.
Any suggestions on how to fix this, or is the "scrollable" layer my only option?
I believe that the mobile browsers are simply adjusting the background to be what it would look like if the site initially loaded at the "expanded" size, however, on desktop it does not do this.
Using responsive design might help you to get rid of these issues, the method is design for developer who creating a website for both desktop and mobile device.
I will give out an example:
In your CSS you have:
#media screen and (max-width: 700px) {
.hide {
display:none;
}}
In your PHP/HTML you have
<p class="hide"> tester 1234 </p>
These will let your display your text when the screen size is bigger than 700px, disappear if smaller than 700px.
I think you should be able to do some modify for you codes by now, hope this help.
Reference : http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I am building html pages which can have text, pictures, videos, facebook like buttons etc. I am using CKeditor to create pages. I store that html in database and then access it for web and mobile applications.
It works fine for web but not for apps. Sometimes problem with videos, pictures, width, height etc and quality is also not good on apps. If I fix things for mobile apps then web disturb. HTML5 support mobile environment but how can I get one html for all environments?
I don't want to create seperate html for all environments, I want to create one html and it should work for all environments. Anyone can suggest some best solution?
You need to use Media queries, view port tag
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px){
/* iPads ----------- */
}
#media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* smartphones**/
}
Meta tag into header
<meta name="viewport" content="width=100%; initial-scale=1; maximum-scale=1; minimum-scale=1; user-scalable=no;"/>
Use percentage in height / width, fonts
You also need to know UI properties in java for webview like margin, padding etc.
You can use CSS3 media queries as #Smokescreen suggested.
You can use these directly within your stylesheets and include the stylesheet on the page the same way as normal, but additionally by adding a media attribute to a link tag.
<link rel="stylesheet" media="screen and (max-width: 480px)" href="mobile.css" />
Or with inline CSS:
#media screen and (max-device-width: 480px) {
.button {
background: #000;
}
}
It will take some time to get your website to look perfect on all devices though. I'd suggest thinking about if it's even worth spending so much time modifying your website just so it looks good on mobile etc. For example, why bother adapting a website about retirement homes when you know that the target audience (old people) will barely ever be visiting your website on a mobile device. You haven't specified what your website is about, so it's up to you to do your research and decide on this.
Another option is redesigning your website and using Bootstrap. This option may seem a little over the top, but you'd be suprised how quickly you can build decent looking websites with bootstrap which are fully responsive.
Can you add any CSS to style it differently depending upon the screen size of the device that is opening the page.
eg make yourself a css stylesheet and then use media queries to define different styles for use with different size browser windows. Then in the 'source' code view of ckeditor assign different ids or classes to your html text such that they then take the styling from the stylesheet for use at different screen sizes.
This way you can say something like - for a screen resolution of 1024px or above style the text at 25px etc etc, for a screen of 600px or less style the text at 12px etc etc. You can also use this method to recofigure your layout for different screens.