I'm playing around with media queries and started developing for a mobile screen. I have the first page relatively how I would like it, but I am getting a horizontal scroll bar at the bottom when I resize my screen to <480px. I haven't tested this on a mobile device yet but I'm assuming the same error will appear.
The site is: http://brad.sebdengroup.com/newOdynSite/index.php
To recreate error open the site, resize window to <480px and vertically scroll to the bottom
Here's the problem:
#main span.bold {
padding: 15px 20px;
...
}
#main span{
width: 100%;
...
}
This combination of CSS rules creates an element that's greater than the width of the page. Width 100% does not include any space used by padding, borders, or margins. For instance, if the page width is 480px, the width of the element will be 20px + 480px + 20px = 520px.
To avoid this, try wrapping the content in an additional tag, so that the width and padding can be applied to separate elements, and tweaking the CSS as needed. For example:
<span><strong>What have we done?</strong></span>
You can try to use overflow-x: hidden; on the <body> to simply hide the scroll bar. However, you'll not be able to easily see the content outside the view port.
For mobile devices you can use media queries to specify style sheets:
<link rel="stylesheet" href="styles/mobile.css" media="only screen and (max-device-width: 480px)">
Or you can use <meta> elements:
<meta name="viewport" content="width=device-width, user-scalable=no">
Related
I am working on a search engine for my website where results are displayed within a div along the middle of the page. Since I would like the search engine portion to be useable on mobile as well, I decided to use a media query to change the width of the div that search results are contained in to be 100% when the width of the screen is less than or equal to 500px, using the following media style rules:
#result_box {
width: 60vmin;
min-height: 100vh;
background-color:red;
}
#media screen and (max-width: 500px) {
#result_box {
width:100%;
}
}
With the following chunk of html:
<body>
<?php $var_value = $_SESSION['query_literal']; ?>
<div class="result_entry">
<hr id="seperator">
<div id="result_box">
</div>
</div>
</body>
However, the width of my 'result_box' is still 60vmin when I test on a mobile device. Does anyone have any idea how I can change this?
I'm pretty sure you didn't set the viewport meta correctly in header or forgot at all about it.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
With this the the browser knows how to control the page dimensions and scaling.
Basically without it your website won't work responsivly.
width=device-width means you set to the width of the page to follow the screen-width of your device
initial-scale=1.0 sets the zoom level to 1 when the page is loaded
I am working on a React web page and I tried to see what the site looks like on mobile, so I switched to mobile view, and as you can see my element is only taking up half of the screen, so my content and my navbar and all my elements are actually only on half of the screen.
Here is my index.css
html {
padding: 0px;
margin: 0px;
overflow-y: scroll;
background-color: #ececec;
width: 100%;
}
body {
padding: 0px;
margin: 0px;
}
The table that you can see has a min-width attribute, so it can actually be seen, but its container div is also the same size as the html tag... Help!!
I noticed that the html element width is always as big as the screen of the device is, and it gets "stuck" at that point.. If I create a screen size that is 400px wide, the tag is 400px wide, and instead of wrapping all the content it's just a fixed width of 400px...
I added a min-width: 1000px to my #root and it looks okay now but my html width is still the same as my screen width which I think should not be like that
Maybe try this
<meta name="viewport" content="width=device-width, initial-scale=1">
You can find more info about this here:
Responsive Meta Tag
Try setting the width as 100vw, not 100% and if this won't work, set min-width to 100vw, too
I have the following markup: (simplified)
<meta name="viewport" content="width=device-width, initial-scale=1.0">
...
<body>
<div class="wrapper">
<div class="content"> (absolutely positioned stuff) </div>
</div>
</body>
with the following styles:
.wrapper {
width: 100%;
height: 100%;
}
.content {
width: 640px;
height: 640px;
margin: 0 auto;
position: relative;
background-color: orange;
}
On a desktop (screens larger than 640px x 640px) my square is top and center, which looks good. On mobile portrait, my square is top and fills the width, which is also good and perfectly acceptable. On mobile landscape (screens less than 640px tall), however, my square fills the entire width and the user will need to scroll to see the bottom of the square, which is not acceptable.
What I'd like to achieve is for the square to fit the height of the screen so it can be seen in its entirety in landscape view. I'm trying some media queries out now to see if that helps. Otherwise, what would be the best way to achieve this?
I've tried changing .content to height: 100%, but because most of its contents are absolutely positioned they end up having 0px height. As such, ideally the square should still be 640px x 640px in size, just scaled to fit the screen so the contents can stay put.
Thanks.
This is the ideal case for viewport units. Where 100vw is the the width of the viewport, and 100vh is the height of the viewport.
You should be able to find some more information on the different units here.
One thing to note though, is that using height related viewport units can lead to some odd effects on Mobile Safari and Mobile Chrome, because the viewport height can change on scroll. The various behaviours of Chrome and Safari on mobile with regards to this have changed over the years as they try to figure you out an ideal solution. I find if I need to rely on vh units I often use a little bit of javascript or css to then "lock" the object at that height on mobile.
You can find other tips for that issue if you run into it in this Stack Overflow Post
I am doing a quick mobile version of my desktop site in bootstrap and running into some formatting issues. When I expand this view on my desktop, my icons show in a 3 by 4 grid just fine. When I narrow does the width of the window, the grid of images acts accordingly and narrows down to 1 column with all 12 images per row, with no horizontal side bar.
However, when I am viewing this on mobile, my my nav bar does not 'snap' to the width of the visible resolution per say and allows me to side scroll - even though the images are still aligned in 1 column of 12 images. The navigation acts as if it is being viewed on desktop and not on mobile despite the site clearly detecting that it is being viewed on mobile. It might be hard to replicated this in a fiddle without seeing this on mobile, but i included the fiddle to see if anyone can tell what I am talking about.
/*******GENERAL********/
*{
box-sizing: border-box;
margin: 0;
zoom: 1;
font-size: 13px;
}
body{
background: #f9f9f9 url(../img/crossword.png) repeat top left;
font-family: 'Open Sans', Tahoma, sans-serif;
max-width: 100%;
background-color: #5F5E5E;
font-size: 13px;
color: #333;
overflow-x:hidden;
}
Sorry I had to include code in the post to include fiddle, but the entire index and CSS are there. I added this to show that I hide x overflow in hopes that would rid mobile x-scrolling just like it did for desktop x-scrolling.
Fiddle here:
http://jsfiddle.net/09wfonqv/5/
Again, it looks fine on desktop - but when opened in mobile, this demo allows for horizontal scrolling throughout and doesn't show the images in a single column with the dropdown menu visible in only the display like I would like.
Thanks!
You need <meta name="viewport" content="width=device-width, initial-scale=1">
Here is a guide on viewports for mobile devices Using the viewport meta tag to control layout on mobile browsers
You haven't set your viewport in the head. - that's a critical error!
Add <meta name="viewport" content="width=device-width, initial-scale=1"> to the head.
You also need to look into media queries.
Add #media screen and (max-width:480px) {your styles} and same for 768px to your css. (ipad) start there.
I have a page i've created which works fine in a desktop but get's messed up in a mobile browser.
This is the mobile version. I have a header and a .container(the one with gray background) set to width 100%. Inside .container i've a .wrapper set to width: 900px; and margin: 0 auto;. Why is the blue background and the gray background rendering till about half of the page witdh? What is the best way I can approach the problem to create a page like the desktop version on the mobile as well?
I believe your wrapper may be causing the issue. Instead of setting a fixed width for the object do:
.wrapper {
max-width:900px;
width:100%;
display:block; //for centering
margin:0 auto // for centering
}
Should solve your problem and make the website more responsive throughout different platforms.
Good luck! :)
NOTE
If you are not already doing so, take rajkumar's comment and add:
<meta name="viewport" content="width=device-width, initial-scale=1">
It's your wrapper and li width. Set them to percentages.
.wrapper {
width: 90%;
margin: 0 auto;
}
li {
width: 30%;
....
}
if you want create a site for both desktop and mobile..Try all width in percentage.because percentage only fit width automatically according to screen resolution.suppose you give in pixels the screen was not adjustable in all screen resolutions.its only fix according to your size only.
In your case please make sure for all width in percentage.
and also please conform the media type for get screen width in header section
<meta name="viewport" content="width=device-width, initial-scale=1">