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">
Related
I made a website for fun & testing but it doesn't look well on mobile as it works on desktop, especially images and specially positioned stuff got out of page. I tried
<meta name="viewport" content="width=device-width, initial-scale=1">
but it still looks a way that nobody wants to see.
I'm a newbie codder please forgive my flaws :)
website: http://ersinski.epizy.com/
<meta name="viewport" content="width=device-width, initial-scale=1">
in your css file:
img {
max-width: 100%
}
It's because you are centering things with left: 500px;. It's a fixed distance from the left side that will only look centered on a specific screen size. For example on a device with a screen width of 320px(mobile) all your 'centered' elements will start 500px from the left side even if that means going beyond the device screen.
For dynamic design look into flexbox.
And for your specific website:
Remove all the left: 500px; on 'centered' elements
Add display: flex; and flex-direction: column; to your body element
Add align-self: center; to anything you wanna center horizontally.
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 a webpage as linked:
Click Here
Everything is fine on PC or MAC. The issue is if you look at it on a mobile devices, you will find that the 3 images caused a horizontal scroll bar.
I use this to set the viewport for mobile device consideration:
<meta name="viewport" content="width=device-width, initial-scale=1.0, target-densitydpi=320, maximum-scale=1.0, user-scalable=no">
I use a sprite method to set the div background, for showing the 3 images.
HTML:
<div class="demopic" id="category"></div>
CSS:
.demopic {
text-align: center;
margin: 10px auto;
background: url(http://7te8e7.com1.z0.glb.clouddn.com/sprite_instructions.png);
}
#category {
width: 560px;
height: 590px;
}
My question is, based on my situation, is there a quick fix to achieve a responsive image? I don't want to show the horizontal scroll bar on mobile devices.
If I delete initial-scale=1.0 in <meta name="viewport" content="width=device-width, initial-scale=1.0, target-densitydpi=320, maximum-scale=1.0, user-scalable=no">, the image will be compressed for a proper size, but at the same time, the font-size will be resized as well.
Anyone give me some inspiration will be highly appreciated!
I think you're best bet is to use the standard img tag and make sure the image never expands wider than it's parent container (could just be the body element).
.my-image {
max-width:100%;
height:auto;
}
This should do the trick.
However, if you really want to use the div / background image approach things are slightly more complex.
.my-background-image {
width:100%;
height:0;
padding-bottom:50%;
background:url(img.png) no-repeat center center;
background-size:100% auto;
}
Here we set an element to fill it's parents width. Then we make it's height proportional to it's width using padding-bottom (you'll need to tweak this). Finally we make the background size always fill the element. Worth noting that background size won't work in IE8.
I am having trouble making content scale proportionally when it get to mobile devices.
On a desktop the site looks like this http://imgur.com/a/hhsIb (first image)
I set a media query to make it look like this (second image)
#media only screen and (max-width: 867px) {
#header-wrap{
padding: 0px 0px 0px;
max-height: 100%;
}
.right.nav {
float: none;
}
.nav{
}
ul {
display:inline-block;
padding: 0px 10px 0px;
min-width: 300px;
}
.left {
float: none;
}
.logo{
margin:auto
}
}
But when viewed on a mobile device it looks like the desktop (third image)
I am also trying to make the nav move from being floated right to aligned in the center once it hits the query but I don't know how to do so.
Here's the JS Fiddle http://jsfiddle.net/u9shm5af/
You need to add the viewport meta tag to the <head> section of the document:
<html>
<head>
<title>Robert Fikes</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
...
</body>
</html>
Mobile browsers, without this tag, render web content at a fixed width, so that older sites that don't have responsive styles aren't cut off.
From the Safari Developer Library:
The majority of webpages fit nicely in the visible area with the viewport width set to 980 pixels in portrait orientation, as shown in Figure 3-10. If Safari on iOS did not set the viewport width to 980 pixels, then only the upper-left corner of the webpage, shown in gray, would be displayed. However, this default doesn’t work for all webpages, so you’ll want to use the viewport meta tag if your webpage is different.
I'm working on a web site that uses responsive images and a couple of fixed sidebars (first attempt at responsive design). The problem: The responsive images are working as expected in Chrome, but they aren't working at all in Firefox. Here's an example of the page in question:
http://ellenflaherty.com/projects/carland/
Any idea why the discrepancy?
Note: The responsive images aren't working when the browser is over 1000px. They actually are working as expected when things adjust for tablet/phone-sized screens.
I've had a look and in terms of Firefox I suggest you remove your display: inline-block and float: left; when your browser window reaches is re-sized to a larger screen size, like the 1000px that you have mentioned in your question, and then for smaller screen sizes you can reintroduce the display and float to make sure the page displays as it should.
I'm attaching an image below the code of what it looks like after the display and float are removed on a large screen.
.projectimg {
bottom: 0;
/* display: inline-block; REMOVE THIS */
/* float: left; /* REMOVE THIS */
height: auto;
margin-left: 220px;
margin-right: 30px;
overflow: hidden;
width: 80%; /* THIS */
}
Hope that helps
Add the <meta name="viewport" content="width=device-width, initial-scale=1.0"> in the header of HTML. It will help to adjust page size according to screen size.